CSS3实现旋转陀螺及灯光文字阴影动画

旋转陀螺

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');
    });
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,262评论 4 61
  • 编辑设计是将版面内所有的信息进行编辑,对设计元素进行提炼、归纳、总结、放在它合适的位置。 要点:为设计对象建立一个...
    咖喱不爱吃素阅读 1,314评论 0 0
  • 情到岔路,一如“覆水难收”。再多缘由、借口,亦是画蛇之笔。不如你我坦然告别,走过往昔情爱繁花,来个潇洒转身,以此为...
    金泽香阅读 260评论 0 0
  • 我走在空荡的街上 没有鲜花,没有掌声 一汪清澈的水 把我照的破破烂烂 一只美丽的鸟 在我额头撒尿 我走在繁华的街上...
    小明会长阅读 174评论 4 7
  • 年年有鱼chapter2 除夕第一次听到除夕夜和鱼的奇谈,是在从迪拜飞往Y城的飞机上。四个小时前,廖嘉川被一阵剧烈...
    里琰阅读 702评论 0 0