过渡 transition

最新推荐文章于 2021-09-27 09:39:45 发布

Doigt_love

最新推荐文章于 2021-09-27 09:39:45 发布

阅读量529

点赞数

分类专栏： H5 文章标签： css3 过渡

本文链接：https://blog.csdn.net/Doigt_love/article/details/52260578

版权

H5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

过渡、动画和变换是CSS3中新添加的3个特性，通过JavaScript操作CSS3是直接由浏览器引擎处理的，虽然能节省开销，但是，会耗费大量的处理能力，把用户的电脑搞得越来越慢，最后死机。

过渡：

过渡就是网页上一个元素从一个状态慢慢变到另一个状态。比如：鼠标移动到关键字上，关键字变大，闪烁之类的，，，状态可以任意发挥了，所以，可以创造出很多炫彩的效果，期待吧。废话不多说，入正题咯

先看一个效果，我对文字和图片都做了过渡：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transition</title>
	<style type="text/css">
		#main{ 
		margin:0; padding: 0;
		background-color: #A19393;
		padding:0 auto;
		}
		.text{
			color: white;
			font-size: x-large ;
		}
		.text:hover{
			font-size: 30px;
			
			padding: 4px;
			background-color: #F5AD3D;
		}
		h2{
			text-align: center;
		}
		h2:hover{
			color;red;
			background-color: #F5AD3D;
			padding: 4px;
			/*border: thin solid black ;*/
		}
		img:hover {
			opacity: 0.5;
		}
		
	</style>
</head>
<body>
	<div id="main">
		<p>
			<h2 >分享健身成果,一起进步</h3>
		<span class="text">图片分享，见证每一个人的蜕变。结识同样热爱运动的朋友，让健身不再是孤独的坚持。</span>
		</p>

		<p class="image">
				<img src="E:\新建文件夹\images\f3.jpg" alt="骑单车">

		</p>

		<p>
			<span class="text">每一个脚印，都是对自己的肯定,你不孤单。</span>
		</p>
		
	</div>
</body>
</html>

主要是利用 :hover 选择器，给. text 类和img 加上当鼠标滑过的时候，文字放大，加上背景颜色，照片模糊。

欣赏了效果，但感觉美中不足的是，效果太突兀了有木有，但是通过设置transition的属性可以平缓的过渡了。

加上transition-delay transition-duration 等等之后，效果就不那么突兀，自然平缓的过渡到想要的结果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transition</title>
	<style type="text/css">
		#main{ 
		margin:0; padding: 0;
		background-color: #A19393;
		padding:0 auto;
		}
		.text{
			color: white;
			font-size: x-large ;
			tranasition-delay: 100ms;
			transition-duration: 250ms; 
		}
		.text:hover{
			font-size: 30px;
			
			padding: 4px;
			background-color: #F5AD3D;
			transition-delay: 100ms;   
			transition-property: font-size,padding,background-color;
			transition-duration: 500ms; 
			transition-timing-function: linear; 
		}
		h2{
			text-align: center;
			tranasition-delay: 100ms;
			transition-duration: 250ms; 
		}
		h2:hover{
			color:red;
			background-color: #F5AD3D;
			padding: 4px;
			/*border: thin solid black ;*/
			transition-delay: 100ms;
			transition-duration: 500ms;   
			transition-property: all;
			transition-timing-function: ease-in-out;
		}
		img{
			tranasition-delay: 100ms;
			transition-duration: 250ms; 
		}
		img:hover {
			opacity: 0.5;
			transition-delay: 100ms;
			transition-duration: 500ms;   
			transition-property: all;
		}

	</style>
</head>
<body>
	<div id="main">
		<p>
			<h2 >分享健身成果,一起进步</h3>
		<span class="text">图片分享，见证每一个人的蜕变。结识同样热爱运动的朋友，让健身不再是孤独的坚持。</span>
		</p>

		<p class="image">
				<img src="E:\新建文件夹\images\f3.jpg" alt="骑单车">

		</p>

		<p>
			<span class="text">每一个脚印，都是对自己的肯定,你不孤单。</span>
		</p>
		
	</div>
</body>
</html>

虽然改动不大，但是给用户的感觉绝对比不用好，还有，为了更加自然，鼠标移开之后，元素也得缓慢的变回去，所以得用反向过渡，如：

.text{
			color: white;
			font-size: x-large ;
			tranasition-delay: 100ms;/*反向过渡*/
			transition-duration: 250ms; 
		}

transiton-property 的意思是给什么属性应用过渡，比如给字体字号使用就写font-zize.背景颜色就使用 backgroundcolor.......，只需要写属性，或者简单一点，all 代表全部属性。

transition-timing-function 的意思是计算初始值和最终只之间的中间值，表示为4个点的三次贝塞尔曲线（贝塞尔曲线后面再写），不懂可以挨着试试，反正就5个。。

Doigt_love

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
过渡 transition

过渡、动画和变换是CSS3中新添加的3个特性，通过JavaScript操作CSS3是直接由浏览器引擎处理的，虽然能节省开销，但是，会耗费大量的处理能力，把用户的电脑搞得越来越慢，最后死机。过渡：过渡就是网页上一个元素从一个状态慢慢变到另一个状态。比如：鼠标移动到关键字上，关键字变大，闪烁之类的，，，状态可以任意发挥了，所以，可以创造出很多炫彩的效果，期待吧。废话不多说，入正题咯先看一个
复制链接

扫一扫

专栏目录