<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS立方体加载动画</title>
<style>
body {
font-family: 'Roboto', sans-serif;
background-color:darkgray;
background-image: linear-gradient(335deg, #000 23px, transparent 23px),
linear-gradient(155deg, #000 23px, transparent 23px),
linear-gradient(335deg, #000 23px, transparent 23px),
linear-gradient(155deg, #000 23px, transparent 23px);
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin:270px auto;
width: 50%;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotateX(-37.5deg) rotateY(45deg);
transform: rotateX(-37.5deg) rotateY(45deg);
}
50% {
-webkit-transform: rotateX(-37.5deg) rotateY(405deg);
transform: rotateX(-37.5deg) rotateY(405deg);
}
100% {
-webkit-transform: rotateX(-37.5deg) rotateY(405deg);
transform: rotateX(-37.5deg) rotateY(405deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotateX(-37.5deg) rotateY(45deg);
transform: rotateX(-37.5deg) rotateY(45deg);
}
50% {
-webkit-transform: rotateX(-37.5deg) rotateY(405deg);
transform: rotateX(-37.5deg) rotateY(405deg);
}
100% {
-webkit-transform: rotateX(-37.5deg) rotateY(405deg);
transform: rotateX(-37.5deg) rotateY(405deg);
}
}
.cube, .cube * {
position: absolute;
width: 151px;
height: 151px;
}
.sides {
-webkit-animation: rotate 3s ease infinite;
animation: rotate 3s ease infinite;
-webkit-animation-delay: .8s;
animation-delay: .8s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-37.5deg) rotateY(45deg);
transform: rotateX(-37.5deg) rotateY(45deg);
}
.cube .sides * {
box-sizing: border-box;
}
.cube .sides .top {
-webkit-animation: top-animation 3s ease infinite;
animation: top-animation 3s ease infinite;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
-webkit-transform: rotateX(90deg) translateZ(150px);
transform: rotateX(90deg) translateZ(150px);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 40%,rgba(255,255,255,0.8));
}
@-webkit-keyframes top-animation {
0% {
opacity: 1;
-webkit-transform: rotateX(90deg) translateZ(150px);
transform: rotateX(90deg) translateZ(150px);
}
20% {
opacity: 1;
-webkit-transform: rotateX(90deg) translateZ(75px);
transform: rotateX(90deg) translateZ(75px);
}
70% {
opacity: 1;
-webkit-transform: rotateX(90deg) translateZ(75px);
transform: rotateX(90deg) translateZ(75px);
}
90% {
opacity: 1;
-webkit-transform: rotateX(90deg) translateZ(150px);
transform: rotateX(90deg) translateZ(150px);
}
100% {
opacity: 1;
-webkit-transform: rotateX(90deg) translateZ(150px);
transform: rotateX(90deg) translateZ(150px);
}
}
@keyframes top-animation {
0% {
opacity: 1;
-webkit-transform: rotateX(90deg) translateZ(150px);
transform: rotateX(90deg) translateZ(150px);
}
20% {
opacity: 1;
-webkit-transform: rotateX(90deg) translateZ(75px);
transform: rotateX(90deg) translateZ(75px);
}
70% {
opacity: 1;
-webkit-transform: rotateX(90deg) translateZ(75px);
transform: rotateX(90deg) translateZ(75px);
}
90% {
opacity: 1;
-webkit-transform: rotateX(90deg) translateZ(150px);
transform: rotateX(90deg) translateZ(150px);
}
100% {
opacity: 1;
-webkit-transform: rotateX(90deg) translateZ(150px);
transform: rotateX(90deg) translateZ(150px);
}
}
.cube .sides .bottom {
-webkit-animation: bottom-animation 3s ease infinite;
animation: bottom-animation 3s ease infinite;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
-webkit-transform: rotateX(-90deg) translateZ(150px);
transform: rotateX(-90deg) translateZ(150px);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 40%,rgba(255,255,255,0.8));
}
@-webkit-keyframes bottom-animation {
0% {
opacity: 1;
-webkit-transform: rotateX(-90deg) translateZ(150px);
transform: rotateX(-90deg) translateZ(150px);
}
20% {
opacity: 1;
-webkit-transform: rotateX(-90deg) translateZ(75px);
transform: rotateX(-90deg) translateZ(75px);
}
70% {
opacity: 1;
-webkit-transform: rotateX(-90deg) translateZ(75px);
transform: rotateX(-90deg) translateZ(75px);
}
90% {
opacity: 1;
-webkit-transform: rotateX(-90deg) translateZ(150px);
transform: rotateX(-90deg) translateZ(150px);
}
100% {
opacity: 1;
-webkit-transform: rotateX(-90deg) translateZ(150px);
transform: rotateX(-90deg) translateZ(150px);
}
}
@keyframes bottom-animation {
0% {
opacity: 1;
-webkit-transform: rotateX(-90deg) translateZ(150px);
transform: rotateX(-90deg) translateZ(150px);
}
20% {
opacity: 1;
-webkit-transform: rotateX(-90deg) translateZ(75px);
transform: rotateX(-90deg) translateZ(75px);
}
70% {
opacity: 1;
-webkit-transform: rotateX(-90deg) translateZ(75px);
transform: rotateX(-90deg) translateZ(75px);
}
90% {
opacity: 1;
-webkit-transform: rotateX(-90deg) translateZ(150px);
transform: rotateX(-90deg) translateZ(150px);
}
100% {
opacity: 1;
-webkit-transform: rotateX(-90deg) translateZ(150px);
transform: rotateX(-90deg) translateZ(150px);
}
}
.cube .sides .front {
-webkit-animation: front-animation 3s ease infinite;
animation: front-animation 3s ease infinite;
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
-webkit-transform: rotateY(0deg) translateZ(150px);
transform: rotateY(0deg) translateZ(150px);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 30%,rgba(255,255,255,0.8));
}
@-webkit-keyframes front-animation {
0% {
opacity: 1;
-webkit-transform: rotateY(0deg) translateZ(150px);
transform: rotateY(0deg) translateZ(150px);
}
20% {
opacity: 1;
-webkit-transform: rotateY(0deg) translateZ(75px);
transform: rotateY(0deg) translateZ(75px);
}
70% {
opacity: 1;
-webkit-transform: rotateY(0deg) translateZ(75px);
transform: rotateY(0deg) translateZ(75px);
}
90% {
opacity: 1;
-webkit-transform: rotateY(0deg) translateZ(150px);
transform: rotateY(0deg) translateZ(150px);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0deg) translateZ(150px);
transform: rotateY(0deg) translateZ(150px);
}
}
@keyframes front-animation {
0% {
opacity: 1;
-webkit-transform: rotateY(0deg) translateZ(150px);
transform: rotateY(0deg) translateZ(150px);
}
20% {
opacity: 1;
-webkit-transform: rotateY(0deg) translateZ(75px);
transform: rotateY(0deg) translateZ(75px);
}
70% {
opacity: 1;
-webkit-transform: rotateY(0deg) translateZ(75px);
transform: rotateY(0deg) translateZ(75px);
}
90% {
opacity: 1;
-webkit-transform: rotateY(0deg) translateZ(150px);
transform: rotateY(0deg) translateZ(150px);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0deg) translateZ(150px);
transform: rotateY(0deg) translateZ(150px);
}
}
.cube .sides .back {
-webkit-animation: back-animation 3s ease infinite;
animation: back-animation 3s ease infinite;
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
-webkit-transform: rotateY(-180deg) translateZ(150px);
transform: rotateY(-180deg) translateZ(150px);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 30%,rgba(255,255,255,0.8));
}
@-webkit-keyframes back-animation {
0% {
opacity: 1;
-webkit-transform: rotateY(-180deg) translateZ(150px);
transform: rotateY(-180deg) translateZ(150px);
}
20% {
opacity: 1;
-webkit-transform: rotateY(-180deg) translateZ(75px);
transform: rotateY(-180deg) translateZ(75px);
}
70% {
opacity: 1;
-webkit-transform: rotateY(-180deg) translateZ(75px);
transform: rotateY(-180deg) translateZ(75px);
}
90% {
opacity: 1;
-webkit-transform: rotateY(-180deg) translateZ(150px);
transform: rotateY(-180deg) translateZ(150px);
}
100% {
opacity: 1;
-webkit-transform: rotateY(-180deg) translateZ(150px);
transform: rotateY(-180deg) translateZ(150px);
}
}
@keyframes back-animation {
0% {
opacity: 1;
-webkit-transform: rotateY(-180deg) translateZ(150px);
transform: rotateY(-180deg) translateZ(150px);
}
20% {
opacity: 1;
-webkit-transform: rotateY(-180deg) translateZ(75px);
transform: rotateY(-180deg) translateZ(75px);
}
70% {
opacity: 1;
-webkit-transform: rotateY(-180deg) translateZ(75px);
transform: rotateY(-180deg) translateZ(75px);
}
90% {
opacity: 1;
-webkit-transform: rotateY(-180deg) translateZ(150px);
transform: rotateY(-180deg) translateZ(150px);
}
100% {
opacity: 1;
-webkit-transform: rotateY(-180deg) translateZ(150px);
transform: rotateY(-180deg) translateZ(150px);
}
}
.cube .sides .left {
-webkit-animation: left-animation 3s ease infinite;
animation: left-animation 3s ease infinite;
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
-webkit-transform: rotateY(-90deg) translateZ(150px);
transform: rotateY(-90deg) translateZ(150px);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 30%,rgba(255,255,255,0.8));
}
@-webkit-keyframes left-animation {
0% {
opacity: 1;
-webkit-transform: rotateY(-90deg) translateZ(150px);
transform: rotateY(-90deg) translateZ(150px);
}
20% {
opacity: 1;
-webkit-transform: rotateY(-90deg) translateZ(75px);
transform: rotateY(-90deg) translateZ(75px);
}
70% {
opacity: 1;
-webkit-transform: rotateY(-90deg) translateZ(75px);
transform: rotateY(-90deg) translateZ(75px);
}
90% {
opacity: 1;
-webkit-transform: rotateY(-90deg) translateZ(150px);
transform: rotateY(-90deg) translateZ(150px);
}
100% {
opacity: 1;
-webkit-transform: rotateY(-90deg) translateZ(150px);
transform: rotateY(-90deg) translateZ(150px);
}
}
@keyframes left-animation {
0% {
opacity: 1;
-webkit-transform: rotateY(-90deg) translateZ(150px);
transform: rotateY(-90deg) translateZ(150px);
}
20% {
opacity: 1;
-webkit-transform: rotateY(-90deg) translateZ(75px);
transform: rotateY(-90deg) translateZ(75px);
}
70% {
opacity: 1;
-webkit-transform: rotateY(-90deg) translateZ(75px);
transform: rotateY(-90deg) translateZ(75px);
}
90% {
opacity: 1;
-webkit-transform: rotateY(-90deg) translateZ(150px);
transform: rotateY(-90deg) translateZ(150px);
}
100% {
opacity: 1;
-webkit-transform: rotateY(-90deg) translateZ(150px);
transform: rotateY(-90deg) translateZ(150px);
}
}
.cube .sides .right {
-webkit-animation: right-animation 3s ease infinite;
animation: right-animation 3s ease infinite;
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
-webkit-transform: rotateY(90deg) translateZ(150px);
transform: rotateY(90deg) translateZ(150px);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 30%,rgba(255,255,255,0.8));
}
@-webkit-keyframes right-animation {
0% {
opacity: 1;
-webkit-transform: rotateY(90deg) translateZ(150px);
transform: rotateY(90deg) translateZ(150px);
}
20% {
opacity: 1;
-webkit-transform: rotateY(90deg) translateZ(75px);
transform: rotateY(90deg) translateZ(75px);
}
70% {
opacity: 1;
-webkit-transform: rotateY(90deg) translateZ(75px);
transform: rotateY(90deg) translateZ(75px);
}
90% {
opacity: 1;
-webkit-transform: rotateY(90deg) translateZ(150px);
transform: rotateY(90deg) translateZ(150px);
}
100% {
opacity: 1;
-webkit-transform: rotateY(90deg) translateZ(150px);
transform: rotateY(90deg) translateZ(150px);
}
}
@keyframes right-animation {
0% {
opacity: 1;
-webkit-transform: rotateY(90deg) translateZ(150px);
transform: rotateY(90deg) translateZ(150px);
}
20% {
opacity: 1;
-webkit-transform: rotateY(90deg) translateZ(75px);
transform: rotateY(90deg) translateZ(75px);
}
70% {
opacity: 1;
-webkit-transform: rotateY(90deg) translateZ(75px);
transform: rotateY(90deg) translateZ(75px);
}
90% {
opacity: 1;
-webkit-transform: rotateY(90deg) translateZ(150px);
transform: rotateY(90deg) translateZ(150px);
}
100% {
opacity: 1;
-webkit-transform: rotateY(90deg) translateZ(150px);
transform: rotateY(90deg) translateZ(150px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="cube">
<div class="sides">
<div class="top">
<img src="img/1.jpg" />
</div>
<div class="right">
<img src="img/2.jpg" />
</div>
<div class="bottom">
<img src="img/3.jpg" />
</div>
<div class="left"><img src="img/4.jpg" /></div>
<div class="front"><img src="img/5.jpg" /></div>
<div class="back"><img src="img/6.jpg" /></div>
</div>
</div>
<!-- <div class="text">立方体</div>-->
</div>
</body>
</html>
效果演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>萤火虫</title>
<style>
body{
background: black;
width: 100%;
height: 100%;
overflow: hidden;
}
#wrap{
width:140px;
height: 200px;
margin: 20% auto 0;
position: relative;
top:-100px;
transform-style:preserve-3d;
transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
}
#wrap ul li{
list-style: none;
position: absolute;
top: 0;left: 0;
height: 180px;
width: 120px;
border-radius: 3px;
box-shadow:0 0 10px #fff;
background-size: 100%;
transform:rotateY(0deg) translateZ(0px);
-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);
}
#wrap p{
width: 1200px;
height: 1200px;
position: absolute;
top:100%;left: 50%;
border-radius: 100%;
background:-webkit-radial-gradient(45deg,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));
transform:rotateX(90deg);}
}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
var oL = $('#wrap ul li').size();
var Deg = 360/oL;
var xDeg = 0,yDeg = -10,xs = 0,ys = 0,p=null;
for (var i=oL-1;i>=0;i--)
{
$('#wrap ul li').eq(i).css({
transition:"1s "+(oL-i)*0.15+"s transform,.5s "+(1+oL*0.15)+"s opacity",
'transform':'rotateY('+Deg*i+'deg) translateZ(350px)'
});
}
$(document).mousedown(function(e){
clearInterval(p);
var x1 = e.clientX;
var y1 = e.clientY;
$(this).bind('mousemove',function(e){
xs = e.clientX - x1;
ys = e.clientY - y1;
x1 = e.clientX;
y1 = e.clientY;
xDeg += xs*0.3;
yDeg -= ys*0.1;
console.log( xs )
$('#wrap').css('transform',"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");
});
}).mouseup(function(){
$(this).unbind('mousemove');
p = setInterval(function(){
if(Math.abs(xs)<0.5&&Math.abs(ys)<0.5){clearInterval(p)};
xs = xs*0.95;
ys = ys*0.95
xDeg += xs*0.3;
yDeg -= ys*0.1;
$('#wrap').css('transform',"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");
console.log(xs+','+ys);
},30);
});
});
</script>
</head>
<body>
<div id="wrap">
<ul>
<li style="background-image: url(img/1.jpg);"></li>
<li style="background-image: url(img/2.jpg);"></li>
<li style="background-image: url(img/3.jpg);"></li>
<li style="background-image: url(img/4.jpg);"></li>
<li style="background-image: url(img/5.jpg);"></li>
<li style="background-image: url(img/6.jpg);"></li>
<li style="background-image: url(img/7.jpg);"></li>
<li style="background-image: url(img/8.jpg);"></li>
<li style="background-image: url(img/9.jpg);"></li>
<li style="background-image: url(img/10.jpg);"></li>
</ul>
<p></p>
</div>
</body>
</html>
效果演示2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D魔方动画 </title>
<style>
html{
background:cornsilk;
height: 100%;
}
.wrap{
position: relative;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
margin: auto;
}
.cube{
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
-webkit-animation: rotate 20s infinite;
animation-timing-function: linear;
}
@-webkit-keyframes rotate{
from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
transition: all .4s;
}
.pic{
width: 200px;
height: 200px;
}
.cube .out_front{
transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{
transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{
transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{
transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{
transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{
transform: rotateX(-90deg) translateZ(100px);
}
.cube span{
display: bloack;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
.cube .in_pic{
width: 100px;
height: 100px;
}
.cube .in_front{
transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{
transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{
transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{
transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
transform: rotateX(-90deg) translateZ(50px);
}
.cube:hover .out_front{
transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{
transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{
transform: rotateX(-90deg) translateZ(200px);
}
</style>
</head>
<body>
<!---->
<div class="wrap">
<!-- -->
<div class="cube">
<!--前面图片 -->
<div class="out_front">
<img src="img/1.jpg" class="pic"/>
</div>
<!--后面图片 -->
<div class="out_back">
<img src="img/2.jpg" class="pic"/>
</div>
<!--左图片 -->
<div class="out_left">
<img src="img/3.jpg" class="pic"/>
</div>
<div class="out_right">
<img src="img/4.jpg" class="pic"/>
</div>
<div class="out_top">
<img src="img/5.jpg" class="pic"/>
</div>
<div class="out_bottom">
<img src="img/6.jpg" class="pic"/>
</div>
<!--小正方体 -->
<span class="in_front">
<img src="img/7.jpg" class="in_pic" />
</span>
<span class="in_back">
<img src="img/8.jpg" class="in_pic" />
</span>
<span class="in_left">
<img src="img/9.jpg" class="in_pic" />
</span>
<span class="in_right">
<img src="img/10.jpg" class="in_pic" />
</span>
<span class="in_top">
<img src="img/1.jpg" class="in_pic" />
</span>
<span class="in_bottom">
<img src="img/2.jpg" class="in_pic" />
</span>
</div>
</div>
</body>
</html>
效果演示3