前言

刚过完年这段时间工作任务不是很多,趁这段时间整理一下京东后台能用的动画代码

首先看一下京东后台代码有什么规范

大致总结了以下规范:

  1. 不允许外链js和css
  2. 不允许写js片段
  3. css的命名标准为.userxxxxx
  4. position的值不能为fixed
  5. z-index的值不能大于等于7
  6. 图片不能超过800k

基本就是这样状况,所以要做效果的话难度不大,基本学过dw都可以愉快的玩耍哈。

下面展示一些简单效果及代码

正文


注意:如要应用到上下关系请自行添加z-index定义
----------分板块请添加display: block

以下代码均采用-webkit写法。

感谢

感谢以下在线项目


元素左右回转

<style type="text/css">
.userimg{
    -webkit-animation: zyhz 1.5s ease-in-out infinite alternate;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 100px;
    top: 100px;
}
@-webkit-keyframes zyhz{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(-360deg);}
}
</style>
<div class="userimg">
   <img src="https://slhyoo.com/usr/uploads/2019/08/3862681185.jpg" />
</div>

元素呼吸动态

<style type="text/css">
.userbanner{
    -webkit-animation: hx 3s ease-in-out infinite;
    position: absolute;
    left: 10px;
    top: 100px;
    height: 100px;
    width: 100px;
}
@-webkit-keyframes hx {  
       0%{transform: scale(1);}
       25%{transform: scale(1.1);}
       50%{transform: scale(1);}
       75%{transform: scale(1.1);}
}
</style>
<div class="userbanner">
   <img src="https://slhyoo.com/usr/uploads/2019/08/3862681185.jpg" />
</div>

元素匀速旋转

<style type="text/css">
.userimg3{
    -webkit-animation: zxz 3s  infinite linear;/*匀速 循环*/
    height: 100px;
    width: 100px;
    position: absolute;
    left: 100px;
    top: 100px;
}
@-webkit-keyframes zxz{
0%{ transform:rotate(0deg); }
100%{ transform:rotate(-360deg); }
}
</style>
<div class="userimg3">
   <img src="https://slhyoo.com/usr/uploads/2019/08/3862681185.jpg" />
</div>

元素渐隐动态

<style type="text/css">
.userimg1{
    -webkit-animation: jy 1.5s ease-in-out infinite alternate;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 100px;
    top: 100px;
}
@-webkit-keyframes jy{
        from{
        opacity: 0;    /*透明度*/
}
        to{
        opacity: 1;
}
}
</style>
<div class="userimg1">
   <img src="https://slhyoo.com/usr/uploads/2019/08/3862681185.jpg" />
</div>

元素缩放动态

<style type="text/css">
.userimg1{
    -webkit-animation: sf 1s ease-in-out infinite alternate;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 100px;
    top: 100px;
}
@-webkit-keyframes sf{
        from{
        transform: scale(0);  /*元素比例缩放*/
}
        to{
        transform: scale(1);
}
}
</style>
<div class="userimg1">
   <img src="https://slhyoo.com/usr/uploads/2019/08/3862681185.jpg" />
</div>

元素上下漂浮

<style type="text/css">
.userpf {
       margin: 100px;  /*边距*/
       position: relative;
       -webkit-animation: pf 1s infinite alternate;
        }    
@-webkit-keyframes pf {
          from {
             margin-top: 100px;
}
          to {
             margin-top: 70px;
}
}
</style> 
<div class="userpf"> 
   <img src="https://slhyoo.com/usr/uploads/2019/08/3862681185.jpg" /> 
</div>

元素左右遮罩

<style>
.userall{
    height:538px;
    display:block;
    }
.user_container{
    position:absolute;
    width:1920px;
    left:50%;
    margin-left:-960px;
    z-index:3;
    }
.user_container a{
    position:absolute;
    top:0;
    -webkit-transition:all 0.5s cubic-bezier(0.1, 0.2, 0.3, 0.5) 0s;
    background-repeat:no-repeat;
    }
.user_left{
    width:1920px;
    left:0;
    height:538px;background-position:100% 50%;
    }
.user_right{
    right:0;
    z-index:3;
    width:960px;
    height:538px;background-position:100% 50%;
    }
.user_container:hover .user_right{width:0;}
.user_container:hover .user_right:hover{width:1920px;}
.userui{
    width:72px;height:72px;
    -webkit-transition:all 0.5s cubic-bezier(0.1, 0.2, 0.3, 0.5) 0s;
    z-index:3;
    top:50%;
    margin-top:-36px;
    position:absolute;
    left:-36px;background-position:100% 50%;
    }
</style>
<div class="userall">
   <div class="user_container">
      <a class="user_left" href="#" target="_self" style="background-image:url(https://slhyoo.com/usr/uploads/2019/08/4051496455.jpg);"></a> 
      <a class="user_right" href="#" target="_self" style="background-image:url(https://slhyoo.com/usr/uploads/2019/08/661975462.jpg);">
         <span class="userui" style="background-image:url(//img10.360buyimg.com/imgzone/jfs/t4993/126/1173773411/5993/587e47cc/58eded8cN197d34bc.png);"></span>
      </a> 
   </div>
</div>

最后修改:2019 年 08 月 31 日 09 : 09 AM
如果觉得我的文章对你有用,请随意赞赏