• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Вертикальная шкала времени на CSS и JavaScript (Создание фиксированной шкалы времени в HTML / CSS)
Вертикальная шкала времени на CSS и JavaScript
Kosten
 		Четверг, 25 Марта 2021 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
« 555 »
Это расширенный шаблон временной шкалы с возможностью расширения, разработанный с использованием HTML, CSS и JavaScript. Элементы временной шкалы были реализованы с использованием списков, а временная шкала была разработана в виде маркированного списка с использованием UL.

Функция JavaScript задействована для реализации функций по щелчку путем динамического добавления классов стилей. Чтобы скрыть раздел данных до события щелчка, устанавливается элемент отображения CSS, тогда как для отображения раздела данных после события щелчка элемент отображения устанавливается как блок.



HTML


CSS

Код
.box{
    margin:0 10%;
    height: 630px;
    overflow: hidden;
    padding: 10px 0 40px 60px
}

.box ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    transition: all 0.5s linear;
    top:0
}

.box ul:last-of-type{top:80px}

.box ul:before{
    content: "";
    display: block;
    width: 0;
    height: 100%;
    border:1px dashed #fff;
    position: absolute;
    top:0;
    left:30px
}

.box ul li{
    margin: 20px 60px 60px;
    position: relative;
    padding: 10px 20px;
    background:rgba(255, 255, 255, 0.3);
    color:#fff;
    border-radius: 10px;
    line-height: 20px;
    width: 35%
}

.box ul li > span{
    content: "";
    display: block;
    width: 0;
    height: 100%;
    border:1px solid #fff;
    position: absolute;
    top:0;
    left:-30px
}

.box ul li > span:before,.box ul li > span:after{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background:#ff6d6d;
    border:2px solid #fff;
    position: absolute;
    left:-7.5px
}

.box ul li > span:before{top:-10px}
.box ul li > span:after{top:95%}

.box .title{
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px
}

.box .info:first-letter{text-transform: capitalize;line-height: 1.7}

.box .name{
    margin-top: 10px;
    text-transform: capitalize;
    font-style: italic;
    text-align: right;
    margin-right: 20px
}

.box .time span{
    position: absolute;
    left: -100px;
    color:#fff;
    font-size:80%;
    font-weight: bold;
}
.box .time span:first-child{top:-16px}
.box .time span:last-child{top:94%}

.arrow{
    position: absolute;
    top: 105%;
    left: 22%;
    cursor: pointer;
  height:20px;
  width:20px
}

.arrow:hover{
    -webkit-animation: arrow 1s linear infinite;
       -moz-animation: arrow 1s linear infinite;
         -o-animation: arrow 1s linear infinite;
            animation: arrow 1s linear infinite;
}

.box ul:last-of-type .arrow{
    position: absolute;
    top: 105%;
    left: 22%;
    transform: rotateX(180deg);
    cursor: pointer;
}

svg{
    width: 20px;
    height: 20px
}

@keyframes arrow{
    0%,100%{
        top:105%
    }
    50%{
        top:106%
    }
}

@-webkit-keyframes arrow{
    0%,100%{
        top:105%
    }
    50%{
        top:106%
    }
}

@-moz-keyframes arrow{
    0%,100%{
        top:105%
    }
    50%{
        top:106%
    }
}

@-o-keyframes arrow{
    0%,100%{
        top:105%
    }
    50%{
        top:106%
    }
}

JS

Код
var downArrow = document.getElementById("btn1");
var upArrow = document.getElementById("btn2");

downArrow.onclick = function () {
    'use strict';
    document.getElementById("first-list").style = "top:-620px";
    document.getElementById("second-list").style = "top:-620px";
    downArrow.style = "display:none";
    upArrow.style = "display:block";
};

upArrow.onclick = function () {
    'use strict';
    document.getElementById("first-list").style = "top:0";
    document.getElementById("second-list").style = "top:80px";
    upArrow.style = "display:none";
    downArrow.style = "display:block";
};

// creating my image link

var link = document.createElement("a");
document.body.appendChild(link);

link.href = "https://codepen.io/mo7hamed/pens/public";
link.target = "_blank";

var photo = document.createElement("img");
link.appendChild(photo);

photo.src =
  "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1292524/profile/profile-80.jpg";
photo.alt = "mo7amed";

photo.style =
  "border-radius:50%;position:fixed;bottom:20px;right:20px;transition:all 0.5s ease";

photo.onmouseover = function() {
  this.style.transform = "scale(1.1,1.1)";
  this.style.boxShadow = "5px 5px 15px #000";
};

photo.onmouseout = function() {
  this.style.transform = "scale(1,1)";
  this.style.boxShadow = "none";
};

На этом установка завершена.

Демонстрация
Прикрепления: 7127917.png (41.7 Kb) · advanced-timeli.zip (7.4 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Вертикальная шкала времени на CSS и JavaScript (Создание фиксированной шкалы времени в HTML / CSS)
  • Страница 1 из 1
  • 1
Поиск: