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

最新推荐文章于 2022-08-12 23:10:39 发布

懒虫一个V

最新推荐文章于 2022-08-12 23:10:39 发布

阅读量3.1k

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/spy19881201/article/details/38688213

版权

Javascript 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

一说到动画，大家会说到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图片点击下载