一说到动画，大家会说到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图片点击下载
时间： 2024-12-17 00:07:31