CSS3-变形、过渡、动画

最新推荐文章于 2024-08-30 14:36:30 发布

caicsama

最新推荐文章于 2024-08-30 14:36:30 发布

阅读量160

点赞数

分类专栏： CSS 文章标签： css3

原文链接：https://www.runoob.com/css3/css3-3dtransforms.html

版权

CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

参考：https://www.runoob.com/css3/css3-3dtransforms.html

transform-变形

transform函数	描述
translate ()	平移，transalteX() translateY() translateZ() translate3d()
scale()	缩放，scaleX() scaleY() scaleZ() scale3d()
rotate()	旋转，rotateX() rotateY() rotateZ() rotate3d()
skew()	倾斜角度，skewX() skewY()

注：3d的参数的设置不一样

transition-过渡（组合属性）

transition子属性	描述
transition-property	属性名
transition-duration	过渡时间
transition-timeing-function	动画播放速度曲线
transition-delay	过渡开始之前的延迟时间

必须指定：属性、持续时间

需要触发条件：

<div class="touch"></div>

CSS+伪元素

.touch{
	bckground-color:red;
	width:100px;
	height:100px;
	/**宽度变化 高度变化 变形的时候各持续2s**/
	transition:width 2s,height 2s,transform 2s;
}
.touch:hover{
	width:200px;
	height:200px;
	transform:rotate(180deg);
}

CSS media query

@media (max-width:750px){
	.touch{
		transform:rotate(180deg);
	}
}

javascript触发

<script>
	var touch=document.getElementsByClassName('touch');
	touch.style.transition='rotate(30deg)';
</script>

动画（组合属性）
1.描述动画样式

animation子属性	描述
animation-name	动画名称，@keyframes定义的内容
animation-duration	动画持续时间
animation-timing-function	动画函数，默认ease、ease-in、ease-out等
animation-delay	动画延迟时间
animation-iteration-count	循环次数,infinite无数次
animation-delay	动画延迟时间
animation-direction	动画播放方向
animation-fill-mode	动画开始/完成前的模式 /状态
animation-play-state	动画播放的状态暂停（paused）/运行(running)

2.@keyframes创建动画中间环节
描述中间环节，from到to（0%到100%）

.touch{
	animation:myanimation 1s infinite;
}
@keyframes myanimation{
	from{
		transform:translateX(100);
	}
	50%{
		transform:scaleX(0.5);
	}
	to{
		transform:rotate(180deg);
	}
}

备注：组合属性定义没有顺序,font组合属性有顺序：font-style，font-variant，font-weight ，font-size ，line-height ，font-family