Kosten |
Суббота, 14 Июля 2018, 20:29 | Сообщение 1 |
|
Просмотрев эту тему и название, что идет оригинальное, так и не понял, в чем заключается анимация в тени, так как по сути ее здесь нет. Больше похоже на коллайдер или функцию загрузки страниц. В стилях прописаны оттенки, которые идут прозрачном виде, хотя есть возможность добавить и саму конструкцию изменить, как по форме, так по скорости.
Тень на CSS и текстовая тень позволяют нам создавать довольно классные элементы дизайна, которые даже не выглядят как тени. Главное - подумать о том, как работают тени CSS и использовать их для получения желаемого эффекта. Не ограничивайте свое мышление только тем, что они используют только тени для тени. Стили CSS3 позволяет добавлять анимацию в такие элементы, как ссылки. Где с помощью плагина jQuery, а также можете расширить функцию анимации для поддержки свойства теневого окна CSS.
Для начало посмотрим, как будет смотреться:
Приступаем к установки:
HTML
Код <div class="animations-ecomplex"></div>
CSS
Код .animations-ecomplex {
width: 195px;
height: 195px;
position: relative;
}
.animations-ecomplex:after,
.animations-ecomplex:before {
content: "";
border-radius: 73%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center center;
}
.animations-ecomplex:before {
box-shadow: inset 0 20px 0 rgba(14, 222, 222, 0.68), inset 20px 0 0 rgba(21, 199, 199, 0.6), inset 0 -20px 0 rgba(17, 151, 195, 0.6), inset -20px 0 0 rgba(15, 177, 218, 0.63);
animation: rotate-before 2s -0.5s linear infinite;
}
.animations-ecomplex:after {
box-shadow: inset 0 20px 0 rgba(232, 232, 19, 0.6), inset 20px 0 0 rgba(224, 186, 32, 0.63), inset 0 -20px 0 rgba(234, 146, 14, 0.64), inset -20px 0 0 rgba(224, 100, 17, 0.66);
animation: rotate-after 2s -0.5s linear infinite;
}
@keyframes rotate-after {
0% {transform: rotateZ(0deg) scaleX(1) scaleY(1);}
50% {transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);}
100% {transform: rotateZ(360deg) scaleX(1) scaleY(1);}
}
@keyframes rotate-before {
0% {transform: rotateZ(0deg) scaleX(1) scaleY(1);}
50% {transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);}
100% {transform: rotateZ(-360deg) scaleX(1) scaleY(1);}
}
Возможно трудно понять, такое понятие, чтоб анимация была не тени, но увы, такой элемент существует и как можно заметить, что применяется по популярности аналогично от других. Чтобы понять ситуацию, оживление теневого размытия, чтобы элемент почувствовал, что он движется вперед и назад, это шаблон дизайна, видимый повсюду. Тени вызывают перерисовку на каждом кадре, который они изменяют, поэтому переход теневой волны невероятно медленный.
Демонстрация
|
| [ RU ] |
|
|
Kosten |
Среда, 18 Июля 2018, 04:10 | Сообщение 2 |
|
|
Играя с некоторыми анимация загрузки CSS, то заметил, что они были абсолютно потрясающими. Точнее они были гладкими, векторными и мобильными. Поэтому я подумал о классической анимации загрузки, которую мы все знаем, вращающихся стрелках. Хотя CSS анимации могут использоваться для изменения почти всех аспектов элемента HTML, за исключением свойств, перечисленных в предыдущей главе, некоторые из самых мощных средств манипулирования представлением веб страниц заключаются в модулях CSS, которые являются совершенно новыми в CSS3.
Переходы CSS, это самая простая форма анимации: движение между двумя состояниями. После того, как вы освоите основной синтаксис переходов, описанных в этой главе, вы сможете применить простые, эффективные анимации к изображениям и элементам пользовательского интерфейса, а затем начать создавать более сложные ключевые кадры анимации.
Анимированные круги CSS3
Приступаем к установки:
HTML
Код <div id="ransforamus"> <div id="ransition"> <div id="nimated-ircles"> <div id="properties-listed"> <div id="fective-animations"> <div id="content"></div> </div> </div> </div> </div>
CSS
Код html {
overflow-y: scroll;
-webkit-font-smoothing: antialiased; }
body {
background: #2E2A69; }
a {
color:#fff;
text-decoration:none;
}
a:hover {
color:#FF5E99;
}
a:link { -webkit-tap-highlight-color: #FF5E99; }
#ransition {
width: 800px;
height: 300px;
margin: auto; }
#nimated-ircles {
-webkit-box-shadow: 0 0 50px 10px #453D9B;
-moz-box-shadow: 0 0 50px 10px #453D9B;
box-shadow: 0 0 50px 10px #453D9B;
border: 10px solid #ECEBFA;
border-top-color:#746EBB;
margin: 20% auto;
text-align:center;
background: -webkit-linear-gradient(top, #ffffff 48%, #ecebfa 49%, #ecebfa 51%, #fff 52%);
background: -moz-linear-gradient(top, #ffffff 48%, #ecebfa 49%, #ecebfa 51%, #fff 52%);
background: linear-gradient(to bottom, #ffffff 48%, #ecebfa 49%, #ecebfa 51%, #fff 52%);
width: 220px;
height: 220px;
-webkit-border-radius: 220px;
-moz-border-radius: 220px;
border-radius: 220px;
-webkit-animation:turning_cw 5s infinite;
-moz-animation:turning_cw 5s infinite;
animation:turning_cw 5s infinite;
position:relative;
opacity: 0.7; }
#nimated-ircles:hover {
-webkit-box-shadow: 0 0 100px 15px #453D9B;
-moz-box-shadow: 0 0 100px 15px #453D9B;
box-shadow: 0 0 100px 15px #453D9B; }
#properties-listed {
border: 10px solid #ECEBFA;
border-left-color:#746EBB;
border-right-color:#746EBB;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
position:absolute;
background: -webkit-linear-gradient(top, #ecebfa 48%, #746EBB 49%, #746EBB 51%, #ECEBFA 52%);
background: -moz-linear-gradient(top, #ecebfa 48%, #746EBB 49%, #746EBB 51%, #ECEBFA 52%);
background: linear-gradient(to bottom, #ecebfa 48%, #746EBB 49%, #746EBB 51%, #ECEBFA 52%);
margin: 10px;
width: 180px;
height: 180px;
-webkit-border-radius: 180px;
-moz-border-radius: 180px;
border-radius: 180px;
-webkit-animation:turning_acw 3s infinite;
-moz-animation:turning_acw 3s infinite;
animation:turning_acw 3s infinite; }
#fective-animations {
border: 10px solid #746EBB;
border-bottom-color:#ECEBFA;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
position:absolute;
background: -webkit-linear-gradient(top, #fff 48%, #ECEBFA 49%, #ECEBFA 51%, #fff 52%);
background: -moz-linear-gradient(top, #fff 48%, #ECEBFA 49%, #ECEBFA 51%, #fff 52%);
background: linear-gradient(to bottom, #fff 48%, #ECEBFA 49%, #ECEBFA 51%, #fff 52%);
margin: 10px;
width: 140px;
height: 140px;
-webkit-border-radius: 140px;
-moz-border-radius: 140px;
border-radius: 140px;
-webkit-animation:turning_cw 5s infinite;
-moz-animation:turning_cw 5s infinite;
animation:turning_cw 5s infinite; }
#content {
position:absolute;
top: 10px;
left: 10px;
width: 120px;
height: 120px;
-webkit-border-radius: 140px;
-moz-border-radius: 140px;
border-radius: 140px;
background: #2E2A69;
text-align:center;
line-height: 120px;
font-size: 30px;
color:#746EBB;
text-shadow: 0 2px 2px #000;
font-weight:bold; }
@-webkit-keyframes aura {
0%{
text-shadow: 0 2px 2px #000; }
50%{
text-shadow: 0 10px 10px #000;
line-height: 190px; }
100%{
text-shadow: 0 2px 10px #000; }
}
@-webkit-keyframes turning_cw {
0%{
-webkit-transform: rotate(0deg); }
100%{
-webkit-transform: rotate(360deg); }
}
@-webkit-keyframes turning_acw {
0%{
-webkit-transform: rotate(360deg); }
100%{
-webkit-transform: rotate(0deg); }
}
@-moz-keyframes aura {
0%{
text-shadow: 0 2px 2px #000; }
50%{
text-shadow: 0 10px 10px #000;
line-height: 190px; }
100%{
text-shadow: 0 2px 10px #000; }
}
@-moz-keyframes turning_cw {
0%{
-moz-transform: rotate(0deg); }
100%{
-moz-transform: rotate(360deg); }
}
@-moz-keyframes turning_acw {
0%{
-moz-transform: rotate(360deg); }
100%{
-moz-transform: rotate(0deg); }
}
@keyframes aura {
0%{
text-shadow: 0 2px 2px #000; }
50%{
text-shadow: 0 10px 10px #000;
line-height: 190px; }
100%{
text-shadow: 0 2px 10px #000; }
}
@keyframes turning_cw {
0%{
transform: rotate(0deg); }
100%{
transform: rotate(360deg); }
}
@keyframes turning_acw {
0%{
transform: rotate(360deg); }
100%{
transform: rotate(0deg); }
}
Демонстрация
|
| [ RU ] |
|
|
