css图片放大缩小动画

.dade_sf{animation-name: scaleDraw; /*关键帧名称*/animation-timing-function: ease-in-out; /*动画的速度曲线*/animation-iteration-count: infinite; /*动画播放的次数*/animation-duration: 2s; /*动画所花费的时间*/}@keyframes scaleDraw {/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/0% {transform: scale(1); /*开始为原始大小*/}25% {transform: scale(1.05); /*放大1.1倍*/}50% {transform: scale(1);}75% {transform: scale(1.05);}

移动
transform:translateX(100px)    /*向右边移动100px*/
transform:translateX(-100px)    /*向左边移动100px*/transform:translateY(100px)     /*向下边移动100px*/
transform:translateY(-100px)       /*向上边移动100px*/transform:translate(100px,-100px)     /*向右上角移动100px*/
transform:translate(-100px,100px)       /*向左下角移动100px*/

旋转
transform:rotate(50deg);    /*设置为平面旋转（二维旋转）50度*/transform:rotateX(360deg)   /*以X轴为旋转中心旋转360度（三维旋转）*/transform:rotateY(180deg)   /*以Y轴为旋转中心旋转180度（三维旋转）*/transform:rotateZ(90deg)    /*以Z轴为旋转中心旋转90度（三维旋转）效果和rotate一样*/transform:rotateX(45deg)rotateY(45deg)rotateZ(45deg)    /*向X、Y、Z方向各偏45度*/transform:scale(0.5) rotateY(45deg) rotateZ(45deg);    /*缩小0.5倍，并且旋转Y和Z轴45度*/

大小
tranform:scale(0.5)     /*整体缩小到原来的一半*/
tranform:scale(2)       /*整体放大到原来的一半*/tranform:scaleX(0.5)     /*宽缩小到原来的一半*/
tranform:scaleX(2)       /*宽放大到原来的一半*/tranform:scaleY(0.5)     /*高缩小到原来的一半*/
tranform:scaleY(2)     /*高放大到原来的一半*//*好像看不出变化*/
tranform:scaleZ(0.5)
tranform:scaleZ(2)

倾斜属性
transform:skew(30deg,45deg)  /*向x轴偏移3度，向y轴偏移45度*/
transform:skewX(45deg);     /*向X轴倾斜45度角，向左边倾斜45度*/
transform:skewY(90deg);      /*向Y轴倾斜90度角,相对于是靠右倾斜，直到于y轴成为一条线*/

css图片放大缩小动画相关推荐

js 图片放大缩小（动画效果）
本文实现鼠标滑过图片事件,鼠标滑到图片上则图片逐渐放大,鼠标划走图片逐渐缩小到原大小.下面分析整个过程: 图片逐渐放大缩小怎么实现? 1.用css设置图片的宽和高的不同值可以实现大小不同的图片,那么通 ...
iphone iPhone开发中如何将制作图片放大缩小代码实现案例
1:原文摘自:http://mobile.51cto.com/iphone-285108.htm iPhone开发中如何将制作图片放大缩小案例是本文要介绍的内容,主要是来学习iphone开发中动画的制 ...
点击图片放大缩小功能
1.点击图片放大缩小的思路图片部分: <table><div><img style="width:62px;height:83px;display:block ...
imageView图片放大缩小及旋转
imageView图片放大缩小及旋转一.简介二.方法 1)设置图片放大缩小效果第一步:将<ImageView>标签中的android:scaleType设置为"fitCen ...
图片放大缩小效果，支持鼠标滑轮
图片放大缩小效果效果在附件里,麻烦下载来看吧 <html> <head><title>Simple jsp page</title><link ...
css3 图片放大缩小闪烁效果
直接把图片替换就可以了,我的图片是透明的,所以body设置为黑色的,不不要可以去掉 <!doctype html> <html lang="en"> < ...
vue项目一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
图片放大缩小旋转左移右移镜像倒影android
图片放大缩小旋转左移右移镜像倒影 demo: TestImage 1. 将 meinv.jpg 图片拷贝到以下目录TestImage\app\src\main\res\mipmap-hdpi 1.An ...
html如何控制图片自动放缩,如何用js控制图片放大缩小
js控制图片放大缩小的效果,可以通过JavaScript的width和height属性来实现.其属性可以实现按比例放大和缩小图像尺寸的功能. 在前面的文章中,也为大家介绍了JS获取图片当前宽高和JS获 ...

css图片放大缩小动画

css图片放大缩小动画相关推荐

最新文章

热门文章