css图片放大缩小动画

大得369

已于 2023-04-10 07:10:37 修改

阅读量7k

点赞数 4

分类专栏： css 文章标签： css 动画前端

于 2022-08-06 18:50:58 首次发布

本文链接：https://blog.csdn.net/qq_34631220/article/details/126199425

版权

css 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

.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轴成为一条线*/