仿网易‘垃圾箱’动画效果

来源：互联网发布：php上传图片到mysql 编辑：程序博客网时间：2024/06/02 15:50

一说到动画，大家会说到CSS3动画，确实，本文带来一片简单的仿网易‘垃圾箱’动画效果，涉及到的知识点是transform、transition

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform: none|transform-functions;

transition 属性是一个简写属性，用于设置四个过渡属性。

transition: property duration timing-function delay;

首先描述下预期效果：鼠标移到操纵条目，显示垃圾箱，鼠标移到垃圾箱时，垃圾箱盖自动打开。

效果很简单，但是用起来很贴心，是不是很有喜感？哈哈！

原理：对‘垃圾箱盖’，在hover时，利用transform属性顺时针旋转25度，同时利用transition应用在transform属性上即可实现动画！

完整代码：

<!DOCTYPE html><html><head>  <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>  <title>垃圾箱动画</title>  <script type="text/javascript" src="../../core/libs/jquery-1.8.3.js"></script>  <style type="text/css">    .div1 {      zoom: 1;      outline: 0;      height: 28px;      width: 200px;      line-height: 28px;      margin-right: 1px;      white-space: nowrap;      position: absolute;      left: 10px;      top: 10px;      vertical-align: middle;      background-image: url(./img/dustbin2.png);      background-repeat: no-repeat;      background-position: 0 -450px;      color: white;    }    .dustbin {      width: 10px;      height: 11px;      position: absolute;    }    .bb {      background-image: url(./img/dustbin2.png);      background-repeat: no-repeat;    }    .rightCtrl {      display: none;      position: absolute;      top: 8px;      right: 20px;      width: 10px;      height: 11px;    }    /**垃圾桶 盖头*/    .sr1 {      background-position: 0 -320px;      width: 10px;      height: 3px;      position: absolute;      top: 0;      left: 0;      border: 0 !important;    }      /**垃圾桶 身*/    .rw1 {      background-position: 0 -323px;      width: 10px;      height: 8px;      position: absolute;      top: 3px;      left: 0;      border: 0 !important;    }    .sr1 {      -webkit-transform-origin: right bottom;      -webkit-transition: -webkit-transform 150ms ease-in-out;      -moz-transform-origin: right bottom;      -moz-transition: -moz-transform 150ms ease-in-out;      -o-transform-origin: right bottom;      -o-transition: -o-transform 150ms ease-in-out;      -ms-transform-origin: right bottom;      -ms-transition: -ms-transform 150ms ease-in-out;      transform-origin: right bottom;      transition: transform 150ms ease-in-out    }    .dustbin:hover .sr1 {      background-position: 0 -352px;      -webkit-transform: rotate(25deg);      -moz-transform: rotate(25deg);      -o-transform: rotate(25deg);      -ms-transform: rotate(25deg);      transform: rotate(25deg);    }    .dustbin:hover .rw1 {      background-position: 0 -355px    }  </style></head><body><div class="div1">  广告邮件  <span class="rightCtrl">    <a href="#" class="dustbin">      <b class="bb sr1"></b>      <b class="bb rw1"></b>    </a>  </span></div><script type="text/javascript">  $(function () {    $('.div1').hover(function () {      console.log('div1 hover in');      $('.rightCtrl', '.div1').css('display', 'block');    }, function () {      console.log('div1 hover out');      $('.rightCtrl', '.div1').css('display', 'none');    });  });</script></body></html>

dustbin2.png图片点击下载

1 0