css3 transition属性实现三角形

最新推荐文章于 2022-08-19 17:18:10 发布

xiongdaandxiaomi

最新推荐文章于 2022-08-19 17:18:10 发布

阅读量1.3k

点赞数

分类专栏： CSS 文章标签： css3 transition 三角形

本文链接：https://blog.csdn.net/xiongdaandxiaomi/article/details/95482884

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值，增强用户体验。
transition主要包含四个属性值
1、变化的属性：transition-property

transition-property : none | all | [][’,’]* ;
transition-property是用来指定当元素其中一个属性改变时执行transition效果，其中none没有属性改变；all所有属性都改变，它也是默认值；

2、动画时间：transition-duration

transition-duration : [,time]*;
transition-duration是动画执行的时间，单位为s（秒），比如0.1秒可以写成“0.1s”或者“.1s”，它可以作用于任何元素，包括:before和:after伪元素。

3、动画执行的方式：transition-timing-function

transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out;
ease：逐渐慢下来；linear：匀速；ease-in：由慢到快；ease-out：由快到慢；ease-in-out：先慢到快再到慢。

4、动画延迟：transition-delay

transition-delay : [,time]* ;
transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition动画效果，取值同transition-duration。

在这里插入图片描述
全等三角形，鼠标浮上旋转180度

//css
<style type="text/css">
	div{
		width: 0px;
		height: 0px;
		border: 30px solid white;
		border-bottom: none;
		border-top-color:blue;
		transition:all 1s ease 0s;
	}
	div:hover{
		transform:rotate(180deg);
	}
	</style>

//html
<body>
	<div></div>
</body>

xiongdaandxiaomi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 transition属性实现三角形

css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值，增强用户体验。transition主要包含四个属性值1、变化的属性：transition-propertytransition-property : none | all | [][’,’]* ;...
复制链接

扫一扫