css+js实现圆点组成的花朵绽放动画效果代码-html代码-BFW代码库

css+js实现圆点组成的花朵绽放动画效果代码

代码语言：html

所属分类：动画

代码描述：css+js实现圆点组成的花朵绽放动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">


<style>
HTML, BODY { height: 100%; overflow: hidden; }
BODY { background: #0a0a0a; background-image: -webkit-linear-gradient(#0f0f0f 1px, transparent 1px), -webkit-linear-gradient(left, #0f0f0f 1px, transparent 1px); background-image: linear-gradient(#0f0f0f 1px, transparent 1px), linear-gradient(to right, #0f0f0f 1px, transparent 1px); background-size: 3.33333vmin 3.33333vmin; }
.range { /* display: none; */
position: absolute; zind: 2px; }
.wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 10vmin; height: 10vmin; font-size: 10vmin; -webkit-transform: rotateX(-45deg); transform: rotateX(-45deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.flower { width: 10vmin; height: 10vmin; -webkit-animation: rotate-flower 10s linear infinite; animation: rotate-flower 10s linear infinite; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.flower:before { content: ''; display: block; position: absolute; width: 95%; height: 95%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #226600; border-radius: 50%; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-animation: rotate-hue 5s infinite; animation: rotate-hue 5s infinite; }
.petal { position: absolute; z-index: 20; bottom: 80%; left: -10vmin; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: bottom; transform-origin: bottom; }
.box { width: 30vmin; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-animation: rotate-box 12s infinite; animation: rotate-box 12s infinite; }
.shape { width: 0.5em; height: 0.5em; margin: auto; background: currentColor; box-shadow: 0.5em 0 0 0, 1em 0 0 0, -1em 0 0 0, -0.5em 0 0 0; border-radius: 50%; -webkit-animation: rotate-hue 5s infinite; animation: rotate-hue 5s infinite; }
 @-webkit-keyframes rotate-box {
 0% {
 -webkit-transform: rotateX(3.5deg);
 transform: rotateX(3.5deg);
}
 15% {
 -webkit-transform: rotateX(3.5deg);
 transform: rotateX(3.5deg);
}
 50% {
 -webkit-transform: rotateX(-7deg);
 transform: rotateX(-7deg);
}
 80% {
 -webkit-transform: rotateX(-7deg);
 transform: rotateX(-7deg);
}
 100% {
 -webkit-transform: rotateX(3.5deg);
 transform: rotateX(3.5deg);
}
}
 @keyframes rotate-box {
 0% {
 -webkit-transform: rotateX(3.5deg);
 transform: rotateX(3.5deg);
}
 15% {
 -webkit-transform: rotateX(3.5deg);
 transform: rotateX(3.5deg);
}
 50% {
 -webkit-transform: rotateX(-7deg);
 transform: rotateX(-7deg);
}
 80% {
 -webkit-transform: rotateX(-7deg);
 transform: rotateX(-7deg);
}
 100% {
 -webkit-transform: rotateX(3.5deg);
 transform: rotateX(3.5deg);
}
}
@-webkit-keyframes rotate-flower {
 100% {
 -webkit-transform: rotateY(360deg);
 transform: rotateY(360deg);
}
}
@keyframes rotate-flower {
 100% {
 -webkit-transform: rotateY(360deg);
 transform: rotateY(360deg);
}
}
@-webkit-keyframes rotate-hue {
 100% {
 -web.........完整代码请登录后点击上方下载按钮下载查看