旋转陀螺
html部分：
<div class="wrap">
<div class="tuoluo">
<div class="tuoluo-top">
<div class="top-piece"></div>
<div class="top-piece"></div>
<div class="top-piece"></div>
<div class="top-piece"></div>
<div class="top-piece"></div>
<div class="top-piece"></div>
</div>
<div class="tuoluo-bottom">
<div class="bottom-piece"></div>
<div class="bottom-piece"></div>
<div class="bottom-piece"></div>
<div class="bottom-piece"></div>
<div class="bottom-piece"></div>
<div class="bottom-piece"></div>
</div>
</div>
</div>
css部分：
<style>
body{margin: 0;}
.wrap{
width: 100px;
height: 400px;
margin: 0 auto;
text-align: center; }
.tuoluo{
width: 100px;
height: 200px;
-webkit-animation:tuoluo 2s linear infinite;
-o-animation:tuoluo 2s linear infinite;
animation:tuoluo 2s linear infinite;
transform-style: preserve-3d; }
.tuoluo-top,.tuoluo-bottom{
width:100px;
height: 200px;
margin-bottom: -20px; }
.tuoluo-top .top-piece{
position: absolute;
width: 0px;
height: 0px;
border-style: solid;
border-color: rgba(1,0,0,0);
border-width: 0px 50px 180px 50px;
border-bottom-color: rgba(65,25,44,.2);
transform-origin: center bottom; }
.tuoluo-bottom .bottom-piece{
position: absolute;
width: 0px;
height: 0px;
border-style: solid;
border-color: rgba(1,0,0,0);
border-width: 180px 50px 0px 50px;
border-top-color: rgba(255,0,44,.2);
transform-origin: center top; }
.tuoluo-top .top-piece:nth-of-type(1){
-webkit-transform: rotateY(0deg) translateZ(88px) rotateX(30deg);
-moz-transform:rotateY(0deg) translateZ(88px) rotateX(30deg);
-ms-transform: rotateY(0deg) translateZ(88px) rotateX(30deg);
-o-transform: rotateY(0deg) translateZ(88px) rotateX(30deg);
transform:rotateY(0deg) translateZ(88px) rotateX(30deg);}
.tuoluo-top .top-piece:nth-of-type(2){
-webkit-transform: rotateY(180deg) translateZ(88px) rotateX(30deg);
-moz-transform:rotateY(180deg) translateZ(88px) rotateX(30deg);
-ms-transform: rotateY(180deg) translateZ(88px) rotateX(30deg);
-o-transform: rotateY(180deg) translateZ(88px) rotateX(30deg);
transform: rotateY(180deg) translateZ(88px) rotateX(30deg);}
.tuoluo-top .top-piece:nth-of-type(3){
-webkit-transform: rotateY(60deg) translateZ(88px) rotateX(30deg);
-moz-transform: rotateY(60deg) translateZ(88px) rotateX(30deg);
-ms-transform: rotateY(60deg) translateZ(88px) rotateX(30deg);
-o-transform: rotateY(60deg) translateZ(88px) rotateX(30deg);
transform: rotateY(60deg) translateZ(88px) rotateX(30deg);}
.tuoluo-top .top-piece:nth-of-type(4){
-webkit-transform: rotateY(120deg) translateZ(88px) rotateX(30deg);
-moz-transform: rotateY(120deg) translateZ(88px) rotateX(30deg);
-ms-transform: rotateY(120deg) translateZ(88px) rotateX(30deg);
-o-transform: rotateY(120deg) translateZ(88px) rotateX(30deg);
transform: rotateY(120deg) translateZ(88px) rotateX(30deg);}
.tuoluo-top .top-piece:nth-of-type(5){
-webkit-transform:rotateY(240deg) translateZ(88px) rotateX(30deg);
-moz-transform: rotateY(240deg) translateZ(88px) rotateX(30deg);
-ms-transform: rotateY(240deg) translateZ(88px) rotateX(30deg);
-o-transform: rotateY(240deg) translateZ(88px) rotateX(30deg);
transform: rotateY(240deg) translateZ(88px) rotateX(30deg);}
.tuoluo-top .top-piece:nth-of-type(6){
-webkit-transform: rotateY(300deg) translateZ(88px) rotateX(30deg);
-moz-transform: rotateY(300deg) translateZ(88px) rotateX(30deg);
-ms-transform: rotateY(300deg) translateZ(88px) rotateX(30deg);
-o-transform: rotateY(300deg) translateZ(88px) rotateX(30deg);
transform: rotateY(300deg) translateZ(88px) rotateX(30deg);}
.tuoluo-bottom .bottom-piece:nth-of-type(1){
-webkit-transform: rotateY(0deg) translateZ(88px) rotateX(30deg);
-moz-transform:rotateY(0deg) translateZ(88px) rotateX(30deg);
-ms-transform: rotateY(0deg) translateZ(88px) rotateX(30deg);
-o-transform: rotateY(0deg) translateZ(88px) rotateX(30deg);
transform:rotateY(0deg) translateZ(88px) rotateX(-30deg);}
.tuoluo-bottom .bottom-piece:nth-of-type(2){
-webkit-transform: rotateY(180deg) translateZ(88px) rotateX(30deg);
-moz-transform:rotateY(180deg) translateZ(88px) rotateX(30deg);
-ms-transform: rotateY(180deg) translateZ(88px) rotateX(30deg);
-o-transform: rotateY(180deg) translateZ(88px) rotateX(30deg);
transform: rotateY(180deg) translateZ(88px) rotateX(-30deg);}
.tuoluo-bottom .bottom-piece:nth-of-type(3){
-webkit-transform: rotateY(60deg) translateZ(88px) rotateX(30deg);
-moz-transform: rotateY(60deg) translateZ(88px) rotateX(30deg);
-ms-transform: rotateY(60deg) translateZ(88px) rotateX(30deg);
-o-transform: rotateY(60deg) translateZ(88px) rotateX(30deg);
transform: rotateY(60deg) translateZ(88px) rotateX(-30deg);}
.tuoluo-bottom .bottom-piece:nth-of-type(4){
-webkit-transform: rotateY(120deg) translateZ(88px) rotateX(30deg);
-moz-transform: rotateY(120deg) translateZ(88px) rotateX(30deg);
-ms-transform: rotateY(120deg) translateZ(88px) rotateX(30deg);
-o-transform: rotateY(120deg) translateZ(88px) rotateX(30deg);
transform: rotateY(120deg) translateZ(88px) rotateX(-30deg);}
.tuoluo-bottom .bottom-piece:nth-of-type(5){
-webkit-transform:rotateY(240deg) translateZ(88px) rotateX(30deg);
-moz-transform: rotateY(240deg) translateZ(88px) rotateX(30deg);
-ms-transform: rotateY(240deg) translateZ(88px) rotateX(30deg);
-o-transform: rotateY(240deg) translateZ(88px) rotateX(30deg);
transform: rotateY(240deg) translateZ(88px) rotateX(-30deg);}
.tuoluo-bottom .bottom-piece:nth-of-type(6){
-webkit-transform: rotateY(300deg) translateZ(88px) rotateX(30deg);
-moz-transform: rotateY(300deg) translateZ(88px) rotateX(30deg);
-ms-transform: rotateY(300deg) translateZ(88px) rotateX(30deg);
-o-transform: rotateY(300deg) translateZ(88px) rotateX(30deg);
transform: rotateY(300deg) translateZ(88px) rotateX(-30deg);}
@keyframes tuoluo {
0%{transform: rotateY(0deg) rotateX(0deg);}
50%{transform: rotateY(-180deg) rotateX(-18deg);}
100%{transform: rotateY(-360deg) rotateX(0deg);}
}
</style>
灯光文字阴影动画
html部分：
<div class="container">
<div class="light"></div>
<p>LUCKY</p>
</div>
css部分：
<style>
.container{
position: relative;
width: 500px;
height: 400px;
margin: 0 auto;
text-align: center;
border: 2px solid black;
overflow: hidden;
}
.container:after{
width: 500px;
height: 180px;
background-color: #999;
content: '';
position: absolute;
left: 0;
bottom: 0;
}
.container p{
width: 100%;
font-size: 5.0em;
font-family: Arial;
position: absolute;
margin-top: 148px;
color: #999;
text-shadow:5px -5px 5px #000;
}
.light{
width: 100%;
height: 100%;
background-image: url(light.png);
background-position: center center;
position: absolute;
z-index: 1;
top: 0;
}
</style>
js部分:
$(document).ready(function(){
$('.container').on('mousemove',function(e){
console.log('x:' + e.offsetX + 'y:' + e.offsetY);
var lightX = e.offsetX - 600,lightY = e.offsetY - 450,textX = -e.offsetX + 250,textY = -e.offsetY + 200;
$('.light').css('background-position', lightX +'px ' + lightY + 'px');
$('p').css('text-shadow', textX +'px ' + textY + 'px 5px #000');
});
});
