图片旋转之二-transition动画

只支持-webkit-内核的浏览器的CSS代码......

.pic{
display:block; width:256px; margin:60px 0 0; padding:10px 10px 15px; text-align:center; background:white; border:1px solid #bfbfbf;
-webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg);
-webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
-webkit-transition:all 0.5s ease-in;/*********这个是关键代码*********************/
}
.pic:hover,.pic:focus,.pic:active{
border-color:#9a9a9a; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg);
}

其中-webkit-transition:all 0.5s ease-in;参数的解释：

transiton属性有这几个值：
transition-property :* //指定过渡的性质，比如transition-property:backgrond 就是只指定backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

linear //线性过度
ease-in //由慢到快
ease-out //由快到慢
ease-in-out //由慢到快在到慢

效果观看“鑫空间”的http://www.zhangxinxu.com/study/200912/CSS3-transform-example3.html

其中图片读取用了JS：

<style type="text/css">
.box{width:960px; height:450px; margin:60px auto 0; font-size:0.75em; position:relative;}
.pic{display:block; padding:10px 10px 15px; text-align:center; background:white; border:1px solid #bfbfbf; -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -webkit-transition:all 0.5s ease-in; position:absolute; z-index:1;}
.pic img{display:block; margin-bottom:10px; border:0;}
.pic:hover,.pic:focus,.pic:active{border-color:#9a9a9a; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg); z-index:2;}
.pic1{bottom: 10px; right: 365px; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); transform: rotate(10deg);}
.pic2{top: 50px; right: 20px; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); transform: rotate(-4deg);}
......
</style>
<div class="box">
<script type="text/javascript">
var box = document.getElementById("box");
var pics = "";
for(var i=1; i<=15; i+=1){
var random_width = 100+ 106*Math.random();
pics += '<a href="#" class="pic pic'+i+'"><img style="min-height:75px;" width="'+random_width+'" src="http://image.zhangxinxu.com/image/study/s/s256/mm'+i+'.jpg" />美女'+i+'</a>';
}
box.innerHTML = pics;
</script>
</div>

图片旋转之二-transition动画相关推荐

IE下及标准浏览器下的图片旋转（二）—— Canvas（1）
文章过长,一篇无法保存. IE下及标准浏览器下的图片旋转(一)--滤镜,CSS3 3. canvas canvas 是html5中的新标签,使用canvas之前我们先看下它的定义:<canvas ...
IE下及标准浏览器下的图片旋转（二）—— Canvas（2）
文章过长,一篇无法保存 IE下及标准浏览器下的图片旋转(二)-- Canvas(1) 同样,作为最后,我们使用使用jquery也为canvas写个旋转demo: javascript: $(funct ...
CSS 实现图片旋转和水波纹动画效果
CSS 实现图片旋转和水波纹动画效果背景通过 CSS 动画实现图片旋转和水波纹动画效果,并做成 Vue 组件,方便以后复用. 代码 <template><view class=& ...
如何用CSS动画特效让图片旋转起来
杜老师逆战班学员 2020.02.22 我们通常浏览网页,基本上看过去都是呈现着各种文字加图片的2D效果信息,作为一名前端开发工程师非常重要的工作就是要让用户看到网页时有眼前一亮.耳目一新的感觉,用户 ...
qt 实现以图片为中心让它旋转_QT图片旋转动画
自己开发了一个股票智能分析软件,功能很强大,需要的点击下面的链接获取: https://www.cnblogs.com/bclshuai/p/11380657.html 1.1 QT图片旋转动画 1. ...
android imageview图片旋转动画,Android 安卓动画属性动画 - 旋转动画
引入属性动画的出现,弥补了补间动画的不足之处,补间动画,只是改变了表面上的东西,但是其中属性并未改变,而属性动画相反,改变了表面上的东西,并且也更改了其属性. 类:ObjectAnimator 用于 ...
android让图片旋转动画,利用RotateAnimation旋转图片的问题 - 移动平台 / Android
利用RotateAnimation旋转一个图片,当动画停止时,如何让被旋转的图片保持旋转结束时的状态,而不是回到初始图片状态. 更详细一点说就是,我有一张图片,利用RotateAnimation旋转, ...
css3 图片旋转360度动画
html <div class="n_animation_picture"><img class="n_picture_adm" src=&q ...
css3动画图片旋转绕轴,css3图片旋转如何实现？css3实现图片旋转动画效果的方法...
在网页中,我们经常可以看到一张图片在旋转,这样的图片旋转是怎么来实现的呢?本篇文章就来为你介绍一下关于css3实现图片旋转动画效果的方法. 实现css3中图片的旋转可以使用可以使用 -webkit-a ...

图片旋转之二-transition动画

图片旋转之二-transition动画相关推荐

最新文章

热门文章