爱心css特效,CSS3 SVG点击爱心散开动画特效

* {

margin:0;

padding:0;

box-sizing:border-box;

position:relative;

}

svg.like {

position:fixed;

z-index:10;

top:calc(50vh - 160px);

left:calc(50vw - 160px);

border-radius:100%;

-webkit-transform:scale(0.3);

transform:scale(0.3);

-webkit-transform-origin:50% 50%;

transform-origin:50% 50%;

box-shadow:0 0 250px rgba(0,0,0,0.4);

background:#212121;

cursor:pointer;

}

svg.fly {

position:fixed;

top:calc(50vh - 55px);

left:calc(50vw - 55px);

fill:#18FFFF;

}

svg.h {

position:fixed;

z-index:8;

top:calc(50vh - 20px);

left:calc(50vw - 20px);

fill:#fbff00;

}

svg.h.h-5,svg.h.h-6,svg.h.h-7,svg.h.h-8 {

fill:#00ffb8;

}

div.dot {

width:12px;

height:12px;

background:white;

position:fixed;

z-index:9;

border-radius:100%;

top:calc(50vh - 6px);

left:calc(50vw - 6px);

}

div.dot:before {

content:"";

width:8px;

height:8px;

border-radius:100%;

top:-20px;

left:2px;

position:absolute;

background:white;

}

div.dot:after {

content:"";

width:11px;

height:11px;

border-radius:100%;

top:-160px;

left:2px;

position:absolute;

background:white;

display:none;

}

body {

background-image:linear-gradient(-10deg,#7028e4 0%,#e5b2ca 100%);

width:100vw;

height:100vh;

}

body.liked svg.like {

-webkit-animation:blink 1s forwards;

animation:blink 1s forwards;

}

body.liked svg.fly.fly-1 {

-webkit-animation:fly-1 1s 0.1s;

animation:fly-1 1s 0.1s;

}

body.liked svg.fly.fly-2 {

-webkit-animation:fly-2 1s 0.1s;

animation:fly-2 1s 0.1s;

}

body.liked svg.h {

transition:margin cubic-bezier(0.165,0.84,0.44,1) 1.4s,fill 0.2s 1s,opacity 0.2s 1.2s,-webkit-transform 0.2s 1s;

transition:margin cubic-bezier(0.165,0.84,0.44,1) 1.4s,transform 0.2s 1s,fill 0.2s 1s,opacity 0.2s 1.2s;

transition:margin cubic-bezier(0.165,0.84,0.44,1) 1.4s,transform 0.2s 1s,fill 0.2s 1s,opacity 0.2s 1.2s,-webkit-transform 0.2s 1s;

opacity:0;

}

body.liked svg.h.h-5,body.liked svg.h.h-6,body.liked svg.h.h-7,body.liked svg.h.h-8 {

-webkit-transform:scale(1.5);

transform:scale(1.5);

fill:white;

}

body.liked svg.h.h-1 {

margin-top:-200px;

}

body.liked svg.h.h-2 {

margin-left:200px;

}

body.liked svg.h.h-3 {

margin-top:200px;

}

body.liked svg.h.h-4 {

margin-left:-200px;

}

body.liked svg.h.h-5 {

margin-top:-140px;

margin-left:140px;

}

body.liked svg.h.h-6 {

margin-top:140px;

margin-left:140px;

}

body.liked svg.h.h-7 {

margin-top:-140px;

margin-left:-140px;

}

body.liked svg.h.h-8 {

margin-top:140px;

margin-left:-140px;

}

body.liked div.dot {

opacity:0;

-webkit-transform:translateY(-100px);

transform:translateY(-100px);

background:#00e5ff;

transition:opacity 0.5s 1s,background 0.1s 0.2s,-webkit-transform 1s;

transition:transform 1s,opacity 0.5s 1s,background 0.1s 0.2s;

transition:transform 1s,opacity 0.5s 1s,background 0.1s 0.2s,-webkit-transform 1s;

}

body.liked div.dot:after {

display:block;

}

body.liked div.dot.dot-2 {

-webkit-transform:rotate(45deg) translateY(-100px);

transform:rotate(45deg) translateY(-100px);

}

body.liked div.dot.dot-3 {

-webkit-transform:rotate(90deg) translateY(-100px);

transform:rotate(90deg) translateY(-100px);

}

body.liked div.dot.dot-4 {

-webkit-transform:rotate(135deg) translateY(-100px);

transform:rotate(135deg) translateY(-100px);

}

body.liked div.dot.dot-5 {

-webkit-transform:rotate(180deg) translateY(-100px);

transform:rotate(180deg) translateY(-100px);

}

body.liked div.dot.dot-6 {

-webkit-transform:rotate(225deg) translateY(-100px);

transform:rotate(225deg) translateY(-100px);

}

body.liked div.dot.dot-7 {

-webkit-transform:rotate(270deg) translateY(-100px);

transform:rotate(270deg) translateY(-100px);

}

body.liked div.dot.dot-8 {

-webkit-transform:rotate(305deg) translateY(-100px);

transform:rotate(305deg) translateY(-100px);

}

@-webkit-keyframes blink {

10% {

-webkit-transform:scale(0.42);

transform:scale(0.42);

background:#8815b7;

}

100% {

background:#e01f4f;

}

}@keyframes blink {

10% {

-webkit-transform:scale(0.42);

transform:scale(0.42);

background:#8815b7;

}

100% {

background:#e01f4f;

}

}@-webkit-keyframes fly-1 {

25% {

margin:-100px 0 0 100px;

}

75% {

margin:100px 0 0 -100px;

z-index:5;

}

100% {

z-index:11;

}

}@keyframes fly-1 {

25% {

margin:-100px 0 0 100px;

}

75% {

margin:100px 0 0 -100px;

z-index:5;

}

100% {

z-index:11;

}

}@-webkit-keyframes fly-2 {

25% {

margin:-100px 0 0 -100px;

}

75% {

margin:100px 0 0 100px;

z-index:5;

}

100% {

z-index:11;

}

}@keyframes fly-2 {

25% {

margin:-100px 0 0 -100px;

}

75% {

margin:100px 0 0 100px;

z-index:5;

}

100% {

z-index:11;

}

}