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

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

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

    旋转陀螺

    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实现旋转陀螺及灯光文字阴影动画

          本文链接：https://www.haomeiwen.com/subject/hdcvyttx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|CSS3实现旋转陀螺及灯光文字阴影动画|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！