本文主要是介绍仿网易‘垃圾箱’动画效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一说到动画，大家会说到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图片点击下载
这篇关于仿网易‘垃圾箱’动画效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
