CSS过渡、2D转换和动画

*南汐*

已于 2022-06-27 21:48:33 修改

阅读量218

点赞数

文章标签：大数据 html 前端 css css3

于 2022-06-27 21:21:03 首次发布

本文链接：https://blog.csdn.net/m0_52217105/article/details/125490474

版权

思维导图：

一、css过渡

1、过渡的定义

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果，即CSS 过渡允许您在给定的时间内平滑地改变属性值。

2、语法规则

选择器{

                 transition:property duration timing-function delay

           }

tansition属性用于实现简单的动画效果；

transition属性是一个复合属性，主要包含property、duration、timing-function、delay等子属性。

实例：实现的效果是当鼠标悬停在50*50的正方形块上时方块变大，光标移开逐渐变回原始样式。


div {
/*100px * 100px 的红色 <div> 元素。 <div> 元素还为 width 属性和height属性指定了过渡效果，持续时间为 2 秒和4秒*/
	    width: 50px;
		height: 50px;
		background: red;
		transition: width 2s, height 4s;
	}
			
div:hover {
            /*为 width 属性和height属性指定一个鼠标悬停在 <div> 元素上时的新值*/
			 width:  250px;
			 height: 250px;
		  }

3、transiton常用子属性

属性	描述
transition	简写属性，用于将四个过渡属性设置为单一属性。
transition-delay	规定过渡效果的延迟（以秒计）。
transition-duration	规定过渡效果要持续多少秒或毫秒。
transition-property	规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function	规定过渡效果的速度曲线。