<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 CSS3鼠标响应三叶指尖陀螺玩具动画</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Unica+One");
.back {
background: #150d2d;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
}
.text {
font-family: 'Unica One', sans-serif;
color: #a3395f;
font-size: 30px;
position: fixed;
width: 100%;
text-align: center;
top: 50%;
margin: 175px 0 0;
}
.corners {
-webkit-animation: test 5s ease infinte;
animation: test 5s ease infinte;
}
.spinner {
width: 300px;
height: 300px;
position: fixed;
left: 50%;
top: 50%;
box-sizing: border-box;
margin: -150px;
cursor: pointer;
-webkit-transform: rotateZ(-90deg);
transform: rotateZ(-90deg);
}
.spinner.clicked {
-webkit-animation: rotate 6s cubic-bezier(0.1, -0.29, 0, 1) 1;
animation: rotate 6s cubic-bezier(0.1, -0.29, 0, 1) 1;
}
.spinner.clicked div:nth-child(n+2):after {
-webkit-animation: blur 6s cubic-bezier(0.1, -0.29, 0, 1) 1;
animation: blur 6s cubic-bezier(0.1, -0.29, 0, 1) 1;
}
.spinner.clicked div:nth-child(n+2):before {
-webkit-animation: blur_corners 6s cubic-bezier(0.1, -0.29, 0, 1) 1;
animation: blur_corners 6s cubic-bezier(0.1, -0.29, 0, 1) 1;
}
.spinner div:nth-child(1) {
position: absolute;
width: 60%;
height: 60%;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: #ff6666;
border-radius: 100%;
box-shadow: inset 0 0 0 55px #a3395f;
}
.spinner div:nth-child(n+2) {
background: none;
position: absolute;
width: 50%;
height: 25%;
left: 50%;
top: 37.5%;
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotateZ(0);
transform: rotateZ(0);
}
.spinner div:nth-child(n+2):before {
content: '';
width: 60%;
height: 120%;
position: absolute;
right: 0;
top: -10%;
background: #150d2d;
box-shadow: inset 0 0 0 20px #ff6666, inset 0 0 0 30px #a3395f;
border-radius: 100%;
}
.spinner div:nth-child(n+2):after {
content: '';
width: 80%;
height: 160%;
position: absolute;
left: -5.5%;
z-index: 10;
top: 90%;
background: #150d2d;
border-radius: 100%;
}
.spinner div:nth-child(3) {
-webkit-transform: rotateZ(120deg);
transform: rotateZ(120deg);
}
.spinner div:nth-child(4) {
-webkit-transform: rotateZ(-120deg);
transform: rotateZ(-120deg);
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotateZ(3510deg);
transform: rotateZ(3510deg);
}
}
@keyframes rotate {
100% {
-webkit-transform: rotateZ(3510deg);
transform: rotateZ(3510deg);
}
}
@-webkit-keyframes blur {
4% {
-webkit-filter: none;
filter: none;
}
5% {
-webkit-filter: url("#main");
filter: url("#main");
}
35% {
-webkit-filter: url("#main");
filter: url("#main");
}
36% {
-webkit-filter: none;
filter: none;
}
}
@keyframes blur {
4% {
-webkit-filter: none;
filter: none;
}
5% {
-webkit-filter: url("#main");
filter: url("#main");
}
35% {
-webkit-filter: url("#main");
filter: url("#main");
}
36% {
-webkit-filter: none;
filter: none;
}
}
@-webkit-keyframes blur_corners {
4% {
-webkit-filter: none;
filter: none;
}
5% {
-webkit-filter: url("#corners");
filter: url("#corners");
}
35% {
-webkit-filter: url("#corners");
filter: url("#corners");
}
36% {
-webkit-filter: none;
filter: none;
}
}
@keyframes blur_corners {
4% {
-webkit-filter: none;
filter: none;
}
5% {
-webkit-filter: url("#corners");
filter: url("#corners");
}
35% {
-webkit-filter: url("#corners");
filter: url("#corners");
}
36% {
-webkit-filter: none;
filter: none;
}
}
</style>
</head>
<body>
<div class="back"></div>
<div class="spinner">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="corners" style="display: none;">
<defs>
<filter id="corners">
<feGaussianBlur in="SourceGraphic" stdDeviation="0,7" />
</filter>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="main" style="display: none;">
<defs>
<filter id="main">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
</svg>
<div class="text">Click me!</div>
<script src='js/jquery-1.11.1.min.js'></script>
<script>
$(".spinner").click(function() {
$(this).removeClass('clicked');
setTimeout(function() {
$(".spinner").addClass('clicked');
}, 10);
});
</script>
</body>
</html>