学习web前端之css第七天

ysn121101

于 2019-08-13 19:36:37 发布

阅读量104

点赞数

分类专栏： css 文章标签：过渡变形

本文链接：https://blog.csdn.net/ysn121101/article/details/99460461

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

过渡

过渡transition和动画animation区别

transition必须要触发，一般用 :hover
transition不需要设置关键帧
简单的过渡效果使用transition，复杂的动画使用animation

用法

transition-property ------指定过渡的属性

transition-property:width; --------可以指定一个属性
transition-property:width,background;------可以指定多个属性
transition-property:all;------可以指定所有属性

transition-duration -------过渡持续的时间

transition-duration :1s;
transition-duration :1ms;

transition-timing-function -------过渡的时间曲线
transition-delay-------过渡延迟

transition-delay :1s;
transition-delay :1ms;

transition-------速写

transition:property duration timing delay;
例如：
transition: margin-right 2s ease-in-out .5s;

牛刀小试

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画</title>
	<style>
		.box {
			width: 300px;
			height: 200px;
			font-size: 0;
			border: 1px solid red;
			overflow: hidden;
			transition-property: border;
			transition-duration: 2s;
		}
		.box:hover{
			border: 10px solid teal;
		}	
		img {
			width: 100%;
            height: 100%;
			transition-property: transform;
			transition-duration: 3s;
			transition-timing-function: linear;
		}	
		.box:hover > img{
			transform: scale(2);
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="./image/suidao.jpg" alt="">
	</div>
</body>
</html>

效果展示

在这里插入图片描述

变形

语法

div{
   transform :xxx;   //用来指定一个变形函数对元素执行变形操作
   transform-origin:center;  //用于指定一个元素变形的原点
}

用法

transform:

scale(2)-------变大2倍
skewX(45deg)--------向x轴方向倾斜45度
skewY(45deg)-------向y轴方向倾斜45度
skew(45deg)---------默认x轴方向倾斜45度
rotate(45deg) 旋转
rotateX(45deg)------以x轴旋转45度
rotateY(45deg)-------以y轴旋转45度
rotateZ(45deg)-------以z轴正旋转45度
rotateZ(-45deg)------以z轴倒转45度
translateX(200px)-------以x轴方向向右移动200px
translateY(300px)-------以y轴方向向下移动300px
translate(200px,300px)-----向右移动200px,向下移动300px

思维导图

在这里插入图片描述

ysn121101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习web前端之css第七天

过渡过渡transition和动画animation区别transition必须要触发，一般用 :hovertransition不需要设置关键帧简单的过渡效果使用transition，复杂的动画使用animation用法transition-property ------指定过渡的属性transition-property:width; --------可以指定一个属性t...
复制链接

扫一扫

专栏目录