首页 > 代码库 > 仿网易‘垃圾箱’动画效果

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

2024-07-18 11:34:13   213人阅读

一说到动画，大家会说到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=http://www.mamicode.com/core/libs/jquery-1.8.3.js"></script>>
dustbin2.png图片点击下载


联系
我们