css3+svg情人节表白鲜花动画特效
代码语言：html
所属分类：表白
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>情人节快乐</title>
<style>
/* ================
// Settings
// ============= */
/* ================
// Love Letters
// ============= */
.love {
position: relative;
margin-bottom: 6em;
padding-top: 4em;
text-align: center;
}
@media (min-width: 600px) {
.love {
left: 50%;
margin-bottom: 0;
margin-left: -9.375em;
padding-top: 10em;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
}
.letter {
display: inline-block;
top: 0;
left: 0;
display: inline-block;
font-size: 4vmin;
text-shadow: 0 0 .25em red, 0 0 .35em red, 0 0 .45em transparent, 0 0 .55em transparent, 0 0 .65em transparent;
}
@media (min-width: 600px) {
.letter {
motion-offset: 0;
motion-path: path("m0, 0 c100, -150 200, -150 300, 0");
offset-path: path("m0, 0 c100, -150 200, -150 300, 0");
}
}
.letter:nth-child(1) {
-webkit-animation: twinkle 2.7s infinite 0.9s;
animation: twinkle 2.7s infinite 0.9s;
motion-offset: 5.55556%;
}
.letter:nth-child(2) {
-webkit-animation: twinkle 2.7s infinite 2.1s;
animation: twinkle 2.7s infinite 2.1s;
motion-offset: 11.11111%;
}
.letter:nth-child(3) {
-webkit-animation: twinkle 2.7s infinite 2.7s;
animation: twinkle 2.7s infinite 2.7s;
motion-offset: 16.66667%;
}
.letter:nth-child(4) {
-webkit-animation: twinkle 2.7s infinite 1.2s;
animation: twinkle 2.7s infinite 1.2s;
motion-offset: 22.22222%;
}
.letter:nth-child(5) {
-webkit-animation: twinkle 2.7s infinite 1.8s;
animation: twinkle 2.7s infinite 1.8s;
motion-offset: 27.77778%;
}
.letter:nth-child(6) {
-webkit-animation: twinkle 2.7s infinite 2.25s;
animation: twinkle 2.7s infinite 2.25s;
motion-offset: 33.33333%;
}
.letter:nth-child(7) {
-webkit-animation: twinkle 2.7s infinite 1.8s;
animation: twinkle 2.7s infinite 1.8s;
motion-offset: 38.88889%;
}
.letter:nth-child(8) {
-webkit-animation: twinkle 2.7s infinite 2.1s;
animation: twinkle 2.7s infinite 2.1s;
motion-offset: 44.44444%;
}
.letter:nth-child(9) {
-webkit-animation: twinkle 2.7s infinite 0.6s;
animation: twinkle 2.7s infinite 0.6s;
motion-offset: 50%;
}
.letter:nth-child(10) {
-webkit-animation: twinkle 2.7s infinite 0.3s;
animation: twinkle 2.7s infinite 0.3s;
motion-offset: 55.55556%;
}
.letter:nth-child(11) {
-webkit-animation: twinkle 2.7s infinite 1.5s;
animation: twinkle 2.7s infinite 1.5s;
motion-offset: 61.11111%;
}
.letter:nth-child(12) {
-webkit-animation: twinkle 2.7s infinite 1.35s;
animation: twinkle 2.7s infinite 1.35s;
motion-offset: 66.66667%;
}
.letter:nth-child(13) {
-webkit-animation: twinkle 2.7s infinite 0.75s;
animation: twinkle 2.7s infinite 0.75s;
motion-offset: 72.22222%;
}
.letter:nth-child(14) {
-webkit-animation: twinkle 2.7s infinite 2.7s;
animation: twinkle 2.7s infinite 2.7s;
motion-offset: 77.77778%;
}
.letter:nth-child(15) {
-webkit-animation: twinkle 2.7s infinite 0.6s;
animation: twinkle 2.7s infinite 0.6s;
motion-offset: 83.33333%;
}
.letter:nth-child(16) {
-webkit-animation: twinkle 2.7s infinite 0.6s;
animation: twinkle 2.7s infinite 0.6s;
motion-offset: 88.88889%;
}
.letter:nth-child(17) {
-webkit-animation: twinkle 2.7s infinite 0.9s;
animation: twinkle 2.7s infinite 0.9s;
motion-offset: 94.44444%;
}
.letter:nth-child(18) {
-webkit-animation: twinkle 2.7s infinite 1.65s;
animation: twinkle 2.7s infinite 1.65s;
motion-offset: 100%;
}
.letter:empty {
padding: 0 .2em;
}
@-webkit-keyframes twinkle {
50% {
text-shadow: 0 0 .25em red, 0 0 .35em red, 0 0 .45em red, 0 0 .55em red, 0 0 .65em red;
}
}
@keyframes twinkle {
50% {
text-shadow: 0 0 .25em red, 0 0 .35em red, 0 0 .45em red, 0 0 .55em red, 0 0 .65em red;
}
}
/* ================
// Roses
// ============= */
.roses {
position: relative;
height: 50vmin;
width: 100%;
-webkit-animation: grow 10s forwards;
animation: grow 10s forwards;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
@-webkit-keyframes grow {
100% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
}
@keyframes grow {
100% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
}
.rose {
position: absolute;
top: 50%;
left: 50%;
-webkit-perspective: 50em;
perspective: 50em;
-webkit-transform: translate(-50%, -50%) rotate(-25deg);
transform: translate(-50%, -50%) rotate(-25deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.rose:nth-child(1) {
z-index: 6;
height: 5.9vmin;
width: 5.9vmin;
}
.rose:nth-child(2) {
z-index: 5;
height: 12.35vmin;
width: 12.35vmin;
}
.rose:nth-child(3) {
z-index: 4;
height: 14.75vmin;
width: 14.75vmin;
}
.rose:nth-child(4) {
z-index: 3;
height: 17.65vmin;
width: 17.65vmin;
}
.rose:nth-child(5) {
z-index: 2;
height: 24vmin;
width: 24vmin;
}
.rose:nth-child(6) {
z-index: 1;
height: 28vmin;
width: 28vmin;
}
.rose:nth-child(7) {
z-index: 0;
height: 31.05vmin;
width: 31.05vmin;
}
.pedal {
position: absolute;
bottom: 50%;
left: 50%;
height: 100%;
width: 100%;
-webkit-transform-origin: center 100%;
transform-origin: center 100%;
}
.pedal:before {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
content: '';
border-radius: .35em 50% 35% 50%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.pedal:nth-child(1) {
-webkit-transform: translate(-50%, 0) rotateZ(51.42857deg) rotateX(-70deg) rotateY(8deg) scale(0);
transform: translate(-50%, 0) rotateZ(51.42857deg) rotateX(-70deg) rotateY(8deg) scale(0);
}
.rose:nth-child(1) .pedal:nth-child(1) {
-webkit-animation: flower-1 10s forwards 2.7s;
animation: flower-1 10s forwards 2.7s;
}
.rose:nth-child(1) .pedal:nth-child(1):before {
background: #a40000;
}
.rose:nth-child(1) .pedal:nth-child(2) {
-webkit-animation: flower-2 10s forwards 2.7s;
animation: flower-2 10s forwards 2.7s;
}
.rose:nth-child(1) .pedal:nth-child(2):before {
background: #f40000;
}
.rose:nth-child(1) .pedal:nth-child(3) {
-webkit-animation: flower-3 10s forwards 2.7s;
animation: flower-3 10s forwards 2.7s;
}
.rose:nth-child(1) .pedal:nth-child(3):before {
background: #f10000;
}
.rose:nth-child(1) .pedal:nth-child(4) {
-webkit-animation: flower-4 10s forwards 2.7s;
animation: flower-4 10s forwards 2.7s;
}
.rose:nth-child(1) .pedal:nth-child(4):before {
background: #ae0000;
}
.rose:nth-child(1) .pedal:nth-child(5) {
-webkit-animation: flower-5 10s forwards 2.7s;
animation: flower-5 10s forwards 2.7s;
}
.rose:nth-child(1) .pedal:nth-child(5):before {
background: #960000;
}
.rose:nth-child(1) .pedal:nth-child(6) {
-webkit-animation: flower-6 10s forwards 2.7s;
animation: flower-6 10s forwards 2.7s;
}
.rose:nth-child(1) .pedal:nth-child(6):before {
background: #e80000;
}
.rose:nth-child(1) .pedal:nth-child(7) {
-webkit-animation: flower-7 10s forwards 2.7s;
animation: flower-7 10s forwards 2.7s;
}
.rose:nth-child(1) .pedal:nth-child(7):before {
background: #d40000;
}
.pedal:nth-child(2) {
-webkit-transform: translate(-50%, 0) rotateZ(102.85714deg) rotateX(-70deg) rotateY(8deg) scale(0);
transform: translate(-50%, 0) rotateZ(102.85714deg) rotateX(-70deg) rotateY(8deg) scale(0);
}
.rose:nth-child(2) .pedal:nth-child(1) {
-webkit-animation: flower-1 10s forwards 2.25s;
animation: flower-1 10s forwards 2.25s;
}
.rose:nth-child(2) .pedal:nth-child(1):before {
background: #ac0000;
}
.rose:nth-child(2) .pedal:nth-child(2) {
-webkit-animation: flower-2 10s forwards 2.25s;
animation: flower-2 10s forwards 2.25s;
}
.rose:nth-child(2) .pedal:nth-child(2):before {
background: #e00000;
}
.rose:nth-child(2) .pedal:nth-child(3) {
-webkit-animation: flower-3 10s forwards 2.25s;
animation: flower-3 10s forwards 2.25s;
}
.rose:nth-child(2) .pedal:nth-child(3):before {
background: #950000;
}
.rose:nth-child(2) .pedal:nth-child(4) {
-webkit-animation: flower-4 10s forwards 2.25s;
animation: flower-4 10s forwards 2.25s;
}
.rose:nth-child(2) .pedal:nth-child(4):before {
background: #d50000;
}
.rose:nth-child(2) .pedal:nth-child(5) {
-webkit-animation: flower-5 10s forwards 2.25s;
animation: flower-5 10s forwards 2.25s;
}
.rose:nth-child(2) .pedal:nth-child(5):before {
background: #c40000;
}
.rose:nth-child(2) .pedal:nth-child(6) {
-webkit-animation: flower-6 10s forwards 2.25s;
animation: flower-6 10s forwards 2.25s;
}
.rose:nth-child(2) .pedal:nth-child(6):before {
background: #d90000;
}
.rose:nth-child(2) .pedal:nth-child(7) {
-webkit-animation: flower-7 10s forwards 2.25s;
animation: flower-7 10s forwards 2.25s;
}
.rose:nth-child(2) .pedal:nth-child(7):before {
background: #d80000;
}
.pedal:nth-child(3) {
-webkit-transform: translate(-50%, 0) rotateZ(154.28571deg) rotateX(-70deg) rotateY(8deg) scale(0);
transform: translate(-50%, 0) rotateZ(154.28571deg) rotateX(-70deg) rotateY(8deg) scale(0);
}
.rose:nth-child(3) .pedal:nth-child(1) {
-webkit-animation: flower-1 10s forwards 1.8s;
animation: flower-1 10s forwards 1.8s;
}
.rose:nth-child(3) .pedal:nth-child(1):before {
background: #9a0000;
}
.rose:nth-child(3) .pedal:nth-child(2) {
-webkit-animation: flower-2 10s forwards 1.8s;
animation: flower-2 10s forwards 1.8s;
}
.rose:nth-child(3) .pedal:nth-child(2):before {
background: #ea0000;
}
.rose:nth-child(3) .pedal:nth-child(3) {
-webkit-animation: flower-3 10s forwards 1.8s;
animation: flower-3 10s forwards 1.8s;
}
.rose:nth-child(3) .pedal:nth-child(3):before {
background: #c40000;
}
.rose:nth-child(3) .pedal:nth-child(4) {
-webkit-animation: flower-4 10s forwards 1.8s;
animation: flower-4 10s forwards 1.8s;
}
.rose:nth-child(3) .pedal:nth-child(4):before {
background: #ef0000;
}
.rose:nth-child(3) .pedal:nth-child(5) {
-webkit-animation: flower-5 10s forwards 1.8s;
animation: flower-5 10s forwards 1.8s;
}
.rose:nth-child(3) .pedal:nth-child(5):before {
background: #cd0000;
}
.rose:nth-child(3) .pedal:nth-child(6) {
-webkit-animation: flower-6 10s forwards 1.8s;
animation: flower-6 10s forwards 1.8s;
}
.rose:nth-child(3) .pedal:nth-child(6):before {
background: #a90000;
}
.rose:nth-child(3) .pedal:nth-child(7) {
-webkit-animation: flower-7 10s forwards 1.8s;
animation: flower-7 10s forwards 1.8s;
}
.rose:nth-child(3) .pedal:nth-child(7):before {
background: #ad0000;
}
.pedal:nth-child(4) {
-webkit-transform: translate(-50%, 0) rotateZ(205.71429deg) rotateX(-70deg) rotateY(8deg) scale(0);
transform: translate(-50%, 0) rotateZ(205.71429deg) rotateX(-70deg) rotateY(8deg) scale(0);
}
.rose:nth-child(4) .pedal:nth-child(1) {
-webkit-animation: flower-1 10s forwards 1.35s;
animation: flower-1 10s forwards 1.35s;
}
.rose:nth-child(4) .pedal:nth-child(1):before {
background: #fb0000;
}
.rose:nth-child(4) .pedal:nth-child(2) {
-webkit-animation: flower-2 10s forwards 1.35s;
animation: flower-2 10s forwards 1.35s;
}
.rose:nth-child(4) .pedal:nth-child(2):before {
background: #bf0000;
}
.rose:nth-child(4) .pedal:nth-child(3) {
-webkit-animation: flower-3 10s forwards 1.35s;
animation: flower-3 10s forwards 1.35s;
}
.rose:nth-child(4) .pedal:nth-child(3):before {
background: #f00000;
}
.rose:nth-child(4) .pedal:nth-child(4) {
-webkit-animation: flower-4 10s forwards 1.35s;
animation: flower-4 10s forwards 1.35s;
}
.rose:nth-child(4) .pedal:nth-child(4):before {
background: #b10000;
}
.rose:nth-child(4) .pedal:nth-child(5) {
-webkit-animation: flower-5 10s forwards 1.35s;
animation: flower-5 10s forwards 1.35s;
}
.rose:nth-child(4) .pedal:nth-child(5):before {
background: #e60000;
}
.rose:nth-child(4) .pedal:nth-child(6) {
-webkit-animation: flower-6 10s forwards 1.35s;
animation: flower-6 10s forwards 1.35s;
}
.rose:nth-child(4) .pedal:nth-child(6):before {
background: #d10000;
}
.rose:nth-child(4) .pedal:nth-child(7) {
-webkit-animation: flower-7 10s forwards 1.35s;
animation: flower-7 10s forwards 1.35s;
}
.rose:nth-child(4) .pedal:nth-child(7):before {
background: #c40000;
}
.pedal:nth-child(5) {
-webkit-transform: translate(-50%, 0) rotateZ(257.14286deg) rotateX(-70deg) rotateY(8deg) scale(0);
transform: translate(-50%, 0) rotateZ(257.14286deg) rotateX(-70deg) rotateY(8deg) scale(0);
}
.rose:nth-child(5) .pedal:nth-child(1) {
-webkit-animation: flower-1 10s forwards 0.9s;
animation: flower-1 10s forwards 0.9s;
}
.rose:nth-child(5) .pedal:nth-child(1):before {
background: #e40000;
}
.rose:nth-child(5) .pedal:nth-child(2) {
-webkit-animation: flower-2 10s forwards 0.9s;
animation: flower-2 10s forwards 0.9s;
}
.rose:nth-child(5) .pedal:nth-child(2):before {
background: #cd0000;
}
.rose:nth-child(5) .pedal:nth-child(3) {
-webkit-animation: flower-3 10s forwards 0.9s;
animation: flower-3 10s forwards 0.9s;
}
.rose:nth-child(5) .pedal:nth-child(3):before {
background: #ef0000;
}
.rose:nth-child(5) .pedal:nth-child(4) {
-webkit-animation: flower-4 10s forwards 0.9s;
animation: flower-4 10s forwards 0.9s;
}
.rose:nth-child(5) .pedal:nth-child(4):before {
background: #c20000;
}
.rose:nth-child(5) .pedal:nth-child(5) {
-webkit-animation: flower-5 10s forwards 0.9s;
animation: flower-5 10s forwards 0.9s;
}
.rose:nth-child(5) .pedal:nth-child(5):before {
background: #d20000;
}
.rose:nth-child(5) .pedal:nth-child(6) {
-webkit-animation: flower-6 10s forwards 0.9s;
animation: flower-6 10s forwards 0.9s;
}
.rose:nth-child(5) .pedal:nth-child(6):before {
background: #b20000;
}
.rose:nth-child(5) .pedal:nth-child(7) {
-webkit-animation: flower-7 10s forwards 0.9s;
animation: flower-7 10s forwards 0.9s;
}
.rose:nth-child(5) .pedal:nth-child(7):before {
background: #e40000;
}
.pedal:nth-child(6) {
-webkit-transform: translate(-50%, 0) rotateZ(308.57143deg) rotateX(-70deg) rotateY(8deg) scale(0);
transform: translate(-50%, 0) rotateZ(308.57143deg) rotateX(-70deg) rotateY(8deg) scale(0);
}
.rose:nth-child(6) .pedal:nth-child(1) {
-webkit-animation: flower-1 10s forwards 0.45s;
animation: flower-1 10s forwards 0.45s;
}
.rose:nth-child(6) .pedal:nth-child(1):before {
background: #d20000;
}
.rose:nth-child(6) .pedal:nth-child(2) {
-webkit-animation: flower-2 10s forwards 0.45s;
animation: flower-2 10s forwards 0.45s;
}
.rose:nth-child(6) .pedal:nth-child(2):before {
background: #ab0000;
}
.rose:nth-child(6) .pedal:nth-child(3) {
-webkit-animation: flower-3 10s forwards 0.45s;
animation: flower-3 10s forwards 0.45s;
}
.rose:nth-child(6) .pedal:nth-child(3):before {
background: #e50000;
}
.rose:nth-child(6) .pedal:nth-child(4) {
-webkit-animation: flower-4 10s forwards 0.45s;
animation: flower-4 10s forwards 0.45s;
}
.rose:nth-child(6) .pedal:nth-child(4):before {
background: #f50000;
}
.rose:nth-child(6) .pedal:nth-child(5) {
-webkit-animation: flower-5 10s forwards 0.45s;
animation: flower-5 10s forwards 0.45s;
}
.rose:nth-child(6) .pedal:nth-child(5):before {
background: #960000;
}
.rose:nth-child(6) .pedal:nth-child(6) {
-webkit-animation: flower-6 10s forwards 0.45s;
animation: flower-6 10s forwards 0.45s;
}
.rose:nth-child(6) .pedal:nth-child(6):before {
background: #a60000;
}
.rose:nth-child(6) .pedal:nth-child(7) {
-webkit-animation: flower-7 10s forwards 0.45s;
animation: flower-7 10s forwards 0.45s;
}
.rose:nth-child(6) .pedal:nth-child(7):before {
background: #e80000;
}
.pedal:nth-child(7) {
-webkit-transform: translate(-50%, 0) rotateZ(360deg) rotateX(-70deg) rotateY(8deg) scale(0);
transform: translate(-50%, 0) rotateZ(360deg) rotateX(-70deg) rotateY(8deg) scale(0);
}
.rose:nth-child(7) .pedal:nth-child(1) {
-webkit-animation: flower-1 10s forwards 0s;
animation: flower-1 10s forwards 0s;
}
.rose:nth-child(7) .pedal:nth-child(1):before {
background: #f70000;
}
.rose:nth-child(7) .pedal:nth-child(2) {
-webkit-animation: flower-2 10s forwards 0s;
animation: flower-2 10s forwards 0s;
}
.rose:nth-child(7) .pedal:nth-child(2):before {
background: #dc0000;
}
.rose:nth-child(7) .pedal:nth-child(3) {
-webkit-animation: flower-3 10s forwards 0s;
animation: flower-3 10s forwards 0s;
}
.rose:nth-child(7) .pedal:nth-child(3):before {
background: #de0000;
}
.rose:nth-child(7) .pedal:nth-child(4) {
-webkit-animation: flower-4 10s forwards 0s;
animation: flower-4 10s forwards 0s;
}
.rose:nth-child(7) .pedal:nth-child(4):before {
background: #f30000;
}
.rose:nth-child(7) .pedal:nth-child(5) {
-webkit-animation: flower-5 10s forwards 0s;
animation: flower-5 10s forwards 0s;
}
.rose:nth-child(7) .pedal:nth-child(5):before {
background: #cd0000;
}
.rose:nth-child(7) .pedal:nth-child(6) {
-webkit-animation: flower-6 10s forwards 0s;
animation: flower-6 10s forwards 0s;
}
.rose:nth-child(7) .pedal:nth-child(6):before {
background: #920000;
}
.rose:nth-child(7) .pedal:nth-child(7) {
-webkit-animation: flower-7 10s forwards 0s;
animation: flower-7 10s forwards 0s;
}
.rose:nth-child(7) .pedal:nth-child(7):before {
background: #ce0000;
}
@-webkit-keyframes flower-1 {
100% {
-webkit-transform: translate(-50%, 0) rotateZ(51.42857deg) rotateX(0) rotateY(8deg) scale(1);
transform: translate(-50%, 0) rotateZ(51.42857deg) rotateX(0) rotateY(8deg) scale(1);
}
}
@keyframes flower-1 {
100% {
-webkit-transform: translate(-50%, 0) rotateZ(51.42857deg) rotateX(0) rotateY(8deg) scale(1);
transform: translate(-50%, 0) rotateZ(51.42857deg) rotateX(0) rotateY(8deg) scale(1);
}
}
@-webkit-keyframes flower-2 {
100% {
-webkit-transform: translate(-50%, 0) rotateZ(102.85714deg) rotateX(0) rotateY(8deg) scale(1);
transform: translate(-50%, 0) rotateZ(102.85714deg) rotateX(0) rotateY(8deg) scale(1);
}
}
@keyframes flower-2 {
100% {
-webkit-transform: translate(-50%, 0) rotateZ(102.85714deg) rotateX(0) rotateY(8deg) scale(1);
transform: translate(-50%, 0) rotateZ(102.85714deg) rotateX(0) rotateY(8deg) scale(1);
}
}
@-webkit-keyframes flower-3 {
100% {
-webkit-transform: translate(-50%, 0) rotateZ(154.28571deg) rotateX(0) rotateY(8deg) scale(1);
transform: translate(-50%, 0) rotateZ(154.28571deg) rotateX(0) rotateY(8deg) scale(1);
}
}
@keyframes flower-3 {
100% {
-webkit-transform: translate(-50%, 0) rotateZ(154.28571deg) rotateX(0) rotateY(8deg) scale(1);
transform: translate(-50%, 0) rotateZ(154.28571deg) rotateX(0) rotateY(8deg) scale(1);
}
}
@-webkit-keyframes flower-4 {
100% {
-webkit-transform: translate(-50%, 0) rotateZ(205.71429deg) rotateX(0) rotateY(8deg) scale(1);
transform: translate(-50%, 0) rotateZ(205.71429deg) rotateX(0) rotateY(8deg) scale(1);
}
}
@keyframes flower-4 {
100% {
-webkit-transform: translate(-50%, 0) rotateZ(205.71429deg) rotateX(0) rotateY(8deg) scale(1);
transform: translate(-50%, 0) rotateZ(205.71429deg) rotateX(0) rotateY(8deg) scale(1);
}
}
@-webkit-keyframes flower-5 {
100% {
-webkit-transform: translate(-50%, 0) rotateZ(257.14286deg) rotateX(0) rotateY(8deg) scale(1);
transform: translate(-50%, 0) rotateZ(257.14286deg) rotateX(0) rotateY(8deg) scale(1);
}
}
@keyframes flower-5 {
100% {
-webkit-transform: translate(-50%, 0) rotateZ(257.14286deg) rotateX(0) rotateY(8deg) scale(1);
transform: translate(-50%, 0) rotateZ(257.14286deg) rotateX(0) rotateY(8deg) scale(1);
}
}
@-webkit-keyframes flower-6 {
100% {
-webkit-transform: translate(-50%, 0) rotateZ(308.57143deg) rotateX(0) rotateY(8deg) scale(1);
transform: translate(-50%, 0) rotateZ(308.57143deg) rotateX(0) rotateY(8deg) scale(1);
}
}
@keyframes flower-6 {
100% {
-webkit-transform: translate(-50%, 0) rotateZ(308.57143deg) rotateX(0) rotateY(8deg) scale(1);
transform: translate(-50%, 0) rotateZ(308.57143deg) rotateX(0) rotateY(8deg) scale(1);
}
}
@-webkit-keyframes flower-7 {
100% {
-webkit-transform: translate(-50%, 0) rotateZ(360deg) rotateX(0) rotateY(8deg) scale(1);
transform: translate(-50%, 0) rotateZ(360deg) rotateX(0) rotateY(8deg) scale(1);
}
}
@keyframes flower-7 {
100% {
-webkit-transform: translate(-50%, 0) rotateZ(360deg) rotateX(0) rotateY(8deg) scale(1);
transform: translate(-50%, 0) rotateZ(360deg) rotateX(0) rotateY(8deg) scale(1);
}
}
/* ================
// Bursts
// ============= */
.bubbles {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
pointer-events: none;
}
.bubble {
position: absolute;
z-index: 200;
border-radius: 50%;
}
.bubble:nth-child(1) {
top: 78%;
left: 24%;
height: 5vmin;
width: 5vmin;
-webkit-animation: love-burst 3s infinite 0s;
animation: love-burst 3s infinite 0s;
box-shadow: inset 0 0 0 2.5vmin #fff;
-webkit-transform: translate(0, 0.95em) scale(0);
transform: translate(0, 0.95em) scale(0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
.bubble:nth-child(2) {
top: 86%;
left: 53%;
height: 6vmin;
width: 6vmin;
-webkit-animation: love-burst 3s infinite 0.15s;
animation: love-burst 3s infinite 0.15s;
box-shadow: inset 0 0 0 3vmin #fff;
-webkit-transform: translate(0, 0.7em) scale(0);
transform: translate(0, 0.7em) scale(0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
.bubble:nth-child(3) {
top: 64%;
left: 2%;
height: 19vmin;
width: 19vmin;
-webkit-animation: love-burst 3s infinite 0.3s;
animation: love-burst 3s infinite 0.3s;
box-shadow: inset 0 0 0 9.5vmin #fff;
-webkit-transform: translate(0, 0.75em) scale(0);
transform: translate(0, 0.75em) scale(0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
.bubble:nth-child(4) {
top: 87%;
left: 41%;
height: 6vmin;
width: 6vmin;
-webkit-animation: love-burst 3s infinite 0.45s;
animation: love-burst 3s infinite 0.45s;
box-shadow: inset 0 0 0 3vmin #fff;
-webkit-transform: translate(0, 0.7em) scale(0);
transform: translate(0, 0.7em) scale(0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
.bubble:nth-child(5) {
top: 19%;
left: 88%;
height: 17vm.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0