css基础总结-2

最新推荐文章于 2024-02-11 21:06:24 发布

琦遇前端ing~

最新推荐文章于 2024-02-11 21:06:24 发布

阅读量131

点赞数

分类专栏：前端学习文章标签： css3 css

本文链接：https://blog.csdn.net/qq_42760119/article/details/107219075

版权

本文总结了CSS3中的过渡和转换特性，包括transition属性的四个部分：duration、timing-function、delay和property，以及2D和3D转换的多个方法如perspective、rotateX、rotateY、rotateZ和transform-style。通过实例展示了3D立方体旋转效果和选项框与label的联动应用。

摘要由CSDN通过智能技术生成

一、过渡

过渡属性：transition

transiton主要用来设置四个过渡属性，分别为：

transition-property：规定设置过渡效果的css属性的名称

transition-duration：规定完成过渡效果需要的时间

transition-timing-function：规定速度效果的速度曲线

属性值：

ease：（默认值），速度为从慢到快再到慢

linear：速度为线性速度

ease-in：从慢到快的过程

ease-out：从快到慢的过程

cubic-bezier()：通过设置贝塞尔曲线数值或直接在浏览器调节获取贝塞尔曲线，自定义速度变化趋势

transition-delay：规定过渡效果何时开始

实例如下:

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 100px;
				height: 100px;
				background: skyblue;
				
				/*过渡效果*/
				transition:width 2s;
				
				/*规定设置过渡效果的属性*/
				transition-property: width;
				/*设置过渡的时间*/
				transition-duration:2s;
				/*设置整个过渡变化的速度*/
				transition-timing-function

最低0.47元/天解锁文章

琦遇前端ing~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础总结-2

一、过渡过渡属性：transitiontransiton主要用来设置四个过渡属性，分别为：transition-property：规定设置过渡效果的css属性的名称transition-duration：规定完成过渡效果需要的时间transition-timing-function：规定速度效果的速度曲线属性值： ease：（默认值），速度为从慢到快再到慢 linear：速度为线性速度 ease-in：从慢到快的过程 ease-out：从快到慢的过程 cubic
复制链接

扫一扫

专栏目录