仿網易‘垃圾箱’動畫效果，仿網易垃圾箱動畫
一說到動畫，大家會說到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圖片點擊下載
點擊動畫裡面不需要的那個小視窗，點擊垃圾箱就可以
現在網易郵箱的垃圾箱功可以去什地方了
收件匣，草稿箱下面有個其他檔案夾，在那裡
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
