| Kosten | Понедельник, 17 Декабря 2018 | Сообщение 1 |
| У каждого веб мастера есть желание, чтоб интернет сайт как можно больше привлек внимание. Анимация, что может больше быть привлекательнее, где вашему вниманию логотип кружки с горячим напитком, как пример это может быть кофе. И теперь само привлечение внимания остается для пользователей к вашим веб страницам намного больше, чем просто бы были одно записи.
Создавайте картинки живыми, где есть возможность сделать выборочно, это анимируя некоторые части фотографии, как в нашем случай, что идет чашка, а вот остальное, как пар, что в ней горячий напиток, это уже под анимацией. Вообщем, все что нужно, это добавить немного креатива в свой материал, чтоб стал намного привлекателен.
HTML
Код <div class="valuable-viekos"> <div class="koseam-nedsaed"></div> <div class="sakedv-mieters"></div> <div class="vesbeing"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div>
CSS
Код .valuable-viekos {
position: relative;
height: 195px;
width: 195px;
background: #cab174;
border-radius: 30px;
}
.valuable-viekos:before, .valuable-viekos:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: #cab174;
border-radius: 30px;
}
.valuable-viekos:before {
transform: rotate(30deg);
}
.valuable-viekos:after {
transform: rotate(60deg);
}
.koseam-nedsaed {
position: absolute;
z-index: 3;
bottom: 50px;
left: 30px;
width: 70px;
height: 40px;
background: #e4e0e0;
border-radius: 8px/15px;
box-shadow: inset 35px 0 white;
}
.koseam-nedsaed:before {
content: "";
position: absolute;
top: 15px;
left: -3px;
width: 76px;
height: 10px;
background:linear-gradient(to bottom, #24232f 5px, #ec6433 5px);
}
.sakedv-mieters {
position: absolute;
z-index: 1;
top: 90px;
left: 40px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #e46232;
box-shadow: 26px 0px 0 #e46232, 13px -26px 0 #e46232;
}
.sakedv-mieters:before, .sakedv-mieters:after {
content: "";
position: absolute;
width: 18px;
height: 12px;
background: #1b1a29;
}
.sakedv-mieters:before {
top: -38px;
left: 8px;
border-radius: 0 100%;
}
.sakedv-mieters:after {
top: -38px;
left: 24px;
border-radius: 100% 0;
}
.vesbeing {
width: 70px;
height: 50px;
background: white;
position: absolute;
z-index: 2;
top: 84px;
left: 80px;
border-radius: 0 0 20px 20px;
}
.vesbeing:before {
content: "";
position: absolute;
width: 84px;
height: 10px;
background: white;
bottom: -10px;
left: -5px;
border-radius: 0 0 20px 20px;
}
.vesbeing:after {
content: "";
position: absolute;
top: 20px;
left: 70px;
width: 6px;
height: 10px;
background: #d4b975;
box-shadow: 0 0 0 5px white;
border-radius: 4px;
}
@keyframes wave {
50% {transform:scale(-1)}
}
ul {
list-style: none;
margin: 0;
padding: 0;
width: 30px;
position: relative;
top: -34px;
left: 25px;
}
li {
width: 13px;
height: 14px;
float: left;
border-radius: 13px;
}
li:nth-child(odd) {
margin-right: 4px;
}
li:nth-child(1), li:nth-child(2) {
background-image: linear-gradient(to right, rgba(247, 241, 241, 0) 50%, white 51%);
animation: wave 1.1s ease-in-out infinite;
}
li:nth-child(3), li:nth-child(4) {
background-image: linear-gradient(to left, rgba(247, 241, 241, 0) 50%, white 51%);
animation: wave 1.1s ease-in-out infinite;
}
С помощью анимированных изображений, которые есть возможность поставить как на главную или к статье, это отличное решение для привлечения внимание.
Демонстрация
| | Страна: (RU) |
| |
