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

作者: 林中欢歌要找笑语 | 来源:发表于2016-10-10 16:13 被阅读0次

CSS3实现旋转陀螺及灯光文字阴影动画
css图片的一些方法
第一篇
CSS 动画指南
08_dayCSS动画
jquery3d轮播插件
如何使用css3实现照片墙？
transfrom&transition&ani
过度动画
动画知识点

旋转陀螺

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');
    });
});

CSS3实现旋转陀螺及灯光文字阴影动画
旋转陀螺 html部分： css部分：灯光文字阴影动画 html部分： css部分： js部分:
css图片的一些方法
css3过度动画 css3圆角、阴影、透明度运动曲线图片文字遮罩变形元素旋转
第一篇
使用css实现旋转，缩放，阴影，动画的效果。
CSS 动画指南
CSS3动画（简单动画的实现，如旋转等）** 依靠CSS3中提出的三个属性：transition、transfor...
08_dayCSS动画
CSS3新增的功能有：过渡和动画，阴影和圆角 css3过渡动画： css3都有哪些新增的东西 : 过度，动画，阴影...
jquery3d轮播插件
jquery 旋转木马 banner切换 github源码下载地址实现原理利用 css3 来实现动画当切换下...
如何使用css3实现照片墙？
首先做出来的效果是怎么样的呢？主要使用css3来实现旋转、缩放、阴影、动画等。静态的效果是这样的。当鼠标移动到某...
transfrom&transition&ani
transform transform是才css3动画的主要部分，可以实现旋转、缩放、倾斜、移动等动画，主要用到的...
过度动画
css3过度动画 css3都有哪些新增的东西 : 过度，动画，阴影，圆角； transition ： width ...
动画知识点
css3过度动画 css3都有哪些新增的东西 : 过度，动画，阴影，圆角； transition ： width ...