CSS-анимация для цветущих цветов

внешний интерфейс CSS

Недавно я видел несколько статей о CSS, Чистый CSS может достигать различных сложных эффектов и даже получать пароли пользователей и отправлять их в указанное место, что очень шокирует. В свободное время я использовал свой существующий фундамент CSS для реализации этой работы, и в то же время я практиковал навыки CSS3, которые давно не использовались (технический обмен, независимо от совместимости).

Без лишних слов, давайте начнем с анимации:

Это эффект воспроизведения

  • Градиентное скругление радиуса границы с линейным градиентом
  • коробка-тень

Структура HTML выглядит следующим образом:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>flower</title>
	<link rel="stylesheet" href="gift.css" type="text/css"/>
</head>
<body>
	<div id="flower-container">
		<div id="bg-star"></div>
		<div id="flower-outer">
			<span class="flower-outer outer1"></span>
			<span class="flower-outer outer2"></span>
			<span class="flower-outer outer3"></span>
			<span class="flower-outer outer4"></span>
			<span class="flower-outer outer5"></span>
			<span class="flower-outer outer6"></span>
			<span class="flower-outer outer7"></span>
			<span class="flower-outer outer8"></span>
			<div id="flower-center">
				<span class="flower-center center1"></span>
				<span class="flower-center center2"></span>
				<span class="flower-center center3"></span>
				<span class="flower-center center4"></span>
				<span class="flower-center center5"></span>
				<span class="flower-center center6"></span>
				<span class="flower-center center7"></span>
				<span class="flower-center center8"></span>
				<div id="flower-inner">
					<span class="flower-inner inner1"></span>
					<span class="flower-inner inner2"></span>
					<span class="flower-inner inner3"></span>
					<span class="flower-inner inner4"></span>
					<span class="flower-inner inner5"></span>
					<span class="flower-inner inner6"></span>
					<span class="flower-inner inner7"></span>
					<span class="flower-inner inner8"></span>
				</div>
			</div>
		</div>
	</div>
	
</body>
</html>
.flower-Container Class - крупнейший контейнер, который имеет два элемента - звезда # BG-Star и цветочные контейнеры # цветок-внешний. Поскольку есть три слоя лепестков, внутренние # наружные слои для цветов последовательно вложены, да, элемент охвата - лепестки, каждый лепесток 8.

После долгого ожидания код CSS вышел сразу:

body{
font-size: 20px;
height: 100%;
width: 100%;
background:#000;
overflow: hidden;
}

Звездное небо:

#bg-star{
top: 30%;
left: 30%;
height: 2px;
width: 2px;
position: absolute;
transform-style: preserve-3d;
box-shadow: 10em 10em yellow,
2.5em 10em white,10em 5em yellow,
20em 0em white,0em 20em white,
20em 20em white,25em 20em lightyellow,
40em 35em white,25em 40em white,
10em 50em white,60em 0em white,
5em 0em white,15em 40em yellow,
45em 30em white,30em 20em lightyellow,
35em 15em white,15em 35em yellow;
transform-origin: -10em 10em;
animation: stars 20s linear infinite;

} @keyframes stars{ from{ transform: translateZ(0em) rotate(0deg);

}
to{
	transform: translateZ(80em) rotate(360deg);
}

}

Чтобы показать стереоскопическое чувство расстояния и

#bg-star:before,#bg-star:after{
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: white;
box-shadow: inherit;

}

#bg-star:before{ transform: translateZ(-100em); }

#bg-star:after{ transform: translateZ(-50em); }

#flower-container div:not(:empty){
position: absolute;
top: 50%;
left: 50%;
box-sizing: border-box;

}

#flower-outer{
height: inherit;
width: inherit;
margin: -12.5em 0 0 -12.5em;
transform-style: preserve-3d;
transform: rotateX(30deg) rotateZ(20deg);
animation: outerdiv 10s linear infinite alternate;//这是外层容器的动画

}

@keyframes outerdiv{
0%{
	transform: rotateX(30deg) rotateZ(20deg);
}
100%{
	transform: rotateX(30deg) rotateZ(380deg);
}

}

Середина

#flower-center{
height: 18em;
width: 18em;
margin: -9em 0 0 -9em;
transform-style: preserve-3d;
transform: rotateZ(22.5deg);

}

#flower-inner{
height: 10em;
width: 10em;
margin: -5em 0 0 -5em;
transform-style: preserve-3d;
transform: rotateZ(-22.5deg);

}

внешний слой

.flower-outer{
top: 0.5em;
height: 12em;
width: 5em;
margin-left: -1.5em;
opacity: 0.6;

}

Середина

.flower-center{
height: 9em;
width: 4em;
margin-left: -1em;
opacity: 0.8;

}

внутренний слой

.flower-inner{
height: 5em;
width: 2.5em;
margin-left: -0.75em;
opacity: 0.9;

}

Вот различные настройки положения лепестков и анимация.

.outer1{
transform: rotateZ(0deg) rotateX(-15deg);
animation: flowerouter1 2s ease-in-out 1s backwards;

}

.center1{
transform: rotateZ(0deg) rotateX(-30deg);
animation: flowercenter1 3s ease-in-out 2s backwards;

}

.inner1{
transform: rotateZ(0deg) rotateX(-60deg);
animation: flowerinner1 4s ease-in-out 3s backwards;

}

.outer2{
transform: rotateZ(45deg) rotateX(-15deg);
animation: flowerouter2 2s ease-in-out 1s backwards;

}

.center2{
transform: rotateZ(45deg) rotateX(-30deg);
animation: flowercenter2 3s ease-in-out 2s backwards;

}

.inner2{
transform: rotateZ(45deg) rotateX(-60deg);
animation: flowerinner2 4s ease-in-out 3s backwards;

}

.outer3{
transform: rotateZ(90deg) rotateX(-15deg);
animation: flowerouter3 2s ease-in-out 1s backwards;

}

.center3{
transform: rotateZ(90deg) rotateX(-30deg);
animation: flowercenter3 3s ease-in-out 2s backwards;

}

.inner3{
transform: rotateZ(90deg) rotateX(-60deg);
animation: flowerinner3 4s ease-in-out 3s backwards;

}

.outer4{
transform: rotateZ(135deg) rotateX(-15deg);
animation: flowerouter4 2s ease-in-out 1s backwards;

}

.center4{
transform: rotateZ(135deg) rotateX(-30deg);
animation: flowercenter4 3s ease-in-out 2s backwards;

}

.inner4{
transform: rotateZ(135deg) rotateX(-60deg);
animation: flowerinner4 4s ease-in-out 3s backwards;

}

.outer5{
transform: rotateZ(180deg) rotateX(-15deg);
animation: flowerouter5 2s ease-in-out 1s backwards;

}

.center5{
transform: rotateZ(180deg) rotateX(-30deg);
animation: flowercenter5 3s ease-in-out 2s backwards;

}

.inner5{
transform: rotateZ(180deg) rotateX(-60deg);
animation: flowerinner5 4s ease-in-out 3s backwards;

}

.outer6{
transform: rotateZ(225deg) rotateX(-15deg);
animation: flowerouter6 2s ease-in-out 1s backwards;

}

.center6{
transform: rotateZ(225deg) rotateX(-30deg);
animation: flowercenter6 3s ease-in-out 2s backwards;

}

.inner6{
transform: rotateZ(225deg) rotateX(-60deg);
animation: flowerinner6 4s ease-in-out 3s backwards;

}

.outer7{
transform: rotateZ(270deg) rotateX(-15deg);
animation: flowerouter7 2s ease-in-out 1s backwards;

}

.center7{
transform: rotateZ(270deg) rotateX(-30deg);
animation: flowercenter7 3s ease-in-out 2s backwards;

}

.inner7{
transform: rotateZ(270deg) rotateX(-60deg);
animation: flowerinner7 4s ease-in-out 3s backwards;

}

.outer8{
transform: rotateZ(315deg) rotateX(-15deg);
animation: flowerouter8 2s ease-in-out 1s backwards;

}

.center8{
transform: rotateZ(315deg) rotateX(-30deg);
animation: flowercenter8 3s ease-in-out 2s backwards;

}

.inner8{
transform: rotateZ(315deg) rotateX(-60deg);
animation: flowerinner8 4s ease-in-out 3s backwards;

}

@keyframes flowerouter1{
from{
	transform: rotateZ(0deg) rotateX(-90deg);
}
to{
	transform: rotateZ(0deg) rotateX(-15deg);
}

}

@keyframes flowerouter2{
from{
	transform: rotateZ(45deg) rotateX(-90deg);
}
to{
	transform: rotateZ(45deg) rotateX(-15deg);
}

}

@keyframes flowerouter3{
from{
	transform: rotateZ(90deg) rotateX(-90deg);
}
to{
	transform: rotateZ(90deg) rotateX(-15);
}

}

@keyframes flowerouter4{
from{
	transform: rotateZ(135deg) rotateX(-90deg);
}
to{
	transform: rotateZ(135deg) rotateX(-15deg);
}

}

@keyframes flowerouter5{
from{
	transform:rotateZ(180deg) rotateX(-90deg);
}
to{
	transform:rotateZ(180) rotateX(-15deg);
}

}

@keyframes flowerouter6{
from{
	transform:rotateZ(225deg) rotateX(-90deg);
}
to{
	transform:rotateZ(225deg) rotateX(-15deg);
}

}

@keyframes flowerouter7{
from{
	transform:rotateZ(270deg) rotateX(-90deg);
}
to{
	transform:rotateZ(270deg) rotateX(-15deg);
}

}

@keyframes flowerouter8{
from{
	transform:rotateZ(315deg) rotateX(-90deg);
}
to{
	transform:rotateZ(315deg) rotateX(-15deg);
}

}

@keyframes flowercenter1{
from{
	transform:rotateZ(0deg) rotateX(-90deg);
}
to{
	transform:rotateZ(0deg) rotateX(-30deg);
}

}

@keyframes flowercenter2{
from{
	transform:rotateZ(45deg) rotateX(-90deg);
}
to{
	transform:rotateZ(45deg) rotateX(-30deg);
}

}

@keyframes flowercenter3{
from{
	transform:rotateZ(90deg) rotateX(-90deg);
}
to{
	transform:rotateZ(90deg) rotateX(-30deg);
}

}

@keyframes flowercenter4{
from{
	transform:rotateZ(135deg) rotateX(-90deg);
}
to{
	transform:rotateZ(135deg) rotateX(-30deg);
}

}

@keyframes flowercenter5{
from{
	transform:rotateZ(180deg) rotateX(-90deg);
}
to{
	transform:rotateZ(180deg) rotateX(-30deg);
}

}

@keyframes flowercenter6{
from{
	transform:rotateZ(225deg) rotateX(-90deg);
}
to{
	transform:rotateZ(225deg) rotateX(-30deg);
}

}

@keyframes flowercenter7{
from{
	transform:rotateZ(270deg) rotateX(-90deg);
}
to{
	transform:rotateZ(270deg) rotateX(-30deg);
}

}

@keyframes flowercenter8{
from{
	transform:rotateZ(315deg) rotateX(-90deg);
}
to{
	transform:rotateZ(315deg) rotateX(-30deg);
}

}

@keyframes flowerinner1{
from{
	transform:rotateZ(0deg) rotateX(-90deg);
}
to{
	transform:rotateZ(0deg) rotateX(-60deg);
}

}

@keyframes flowerinner2{
from{
	transform:rotateZ(45deg) rotateX(-90deg);
}
to{
	transform:rotateZ(45deg) rotateX(-60deg);
}

}

@keyframes flowerinner3{
from{
	transform:rotateZ(90deg) rotateX(-90deg);
}
to{
	transform:rotateZ(90deg) rotateX(-60deg);
}

}

@keyframes flowerinner4{
from{
	transform:rotateZ(135deg) rotateX(-90deg);
}
to{
	transform:rotateZ(135deg) rotateX(-60deg);
}

}

@keyframes flowerinner5{
from{
	transform:rotateZ(180deg) rotateX(-90deg);
}
to{
	transform:rotateZ(180deg) rotateX(-60deg);
}

}

@keyframes flowerinner6{
from{
	transform:rotateZ(225deg) rotateX(-90deg);
}
to{
	transform:rotateZ(225deg) rotateX(-60deg);
}

}

@keyframes flowerinner7{
from{
	transform:rotateZ(270deg) rotateX(-90deg);
}
to{
	transform:rotateZ(270deg) rotateX(-60deg);
}

}

@keyframes flowerinner8{
from{
	transform:rotateZ(315deg) rotateX(-90deg);
}
to{
	transform:rotateZ(315deg) rotateX(-60deg);
}

}

Следующий код много повторяется, только значение регулируется. Принцип заключается в том, чтобы сделать разные лепестки встать с плоскости и вращаться вокруг разных осей, так что их относительные положения могут быть объединены в эффект, который мы хотим.

Категории