css3 transition 实例及分析图片hover出现文字 sidebar平滑过渡(动画系列3）

本文链接：https://blog.youkuaiyun.com/kongbingyan/article/details/51064867

本文深入探讨CSS3的transition属性，通过实例分析了transition在div和div:hover上的不同应用，解释了为何在某些情况下高度变化可能不会产生过渡效果，并展示了图片颜色转换和平滑sidebar过渡等应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span style="background-color: rgb(255, 0, 0);"><span style="font-size:24px;">一、</span></span>

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 transition-property属性</title>
    <style type="text/css">
        div
        {
            display:inline-block;
            width:100px;
            height:50px;
            background-color:#14C7F3;
            
        }
        div:hover
        {
            height:100px;
            transition-property:height;
            transition-duration:0.5s ;
            transition-timing-function:linear;
            transition-delay:0;
        }
    </style>
</head>
<body>
    <div></div>
</body></html>

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 transition-property属性</title>
    <style type="text/css">
        div
        {
            display:inline-block;
            width:100px;
            height:50px;
            background-color:#14C7F3;
	        transition-property:height;
            transition-duration:0.5s ;
            transition-timing-function:linear;
            transition-delay:0;          
        }
        div:hover
        {
            height:100px;
                    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

这两者的区别是一个transition写在了div里，一个写在了div:hover里，这两者的区别是，第1个是鼠标移上去，移开都有过渡效果；第2个只有鼠标移上去有过渡效果，鼠标移开时没有过渡，而是直接变化，所以一般transition是写在元素中，而不是元素的伪类里。二、

 
 <!DOCTYPE html>

 
 <html xmlns=
 "http://www.w3.org/1999/xhtml"
 >

 
 <head>

 
     
 <title>CSS
 3
 实现鼠标移上去显示全部内容</title>

 
     
 <style type=
 "text/css"
 >

 
         
 #container

{

 
             
 text-
 overflow
 :ellipsis;

 
             
 overflow
 :
 hidden
 ;

 
             
 white-space
 :
 nowrap
 ;

 
             
 border
 :
 1px
 solid
 gray
 ;

 
             
 width
 :
 300px
 ;

 
             
 padding
 :
 20px
 ;

 
             
 color
 :raba(
 0
 ,
 0
 ,
 0
 ,
 0.7
 );

 
             
 cursor
 :
 pointer
 ;

}

 
         
 #container:hover

{

 
             
 white-space
 :
 normal
 ;

 
             
 height
 :
 148px
 ;

 
             
 background-color
 :
 #F2F9F9
 ;

 
             
 transition-property:background-color,height;

 
             
 transition-duration:
 0.2
 s ;

 
             
 transition-timing-function:linear;

}

 
     
 </style>

 
 </head>

 
 <body>

 
     
 <div id=
 "container"
 >这里事实上height元素的高并没有过渡，而是直接变化，应该是div里并没有设置高度，事实上在div里加了height后，height也平滑过渡了
 。</div>

 
 </body>

 
 </html>

这里事实上height元素的高并没有过渡，而是直接变化，应该是div里并没有设置高度，事实上在div里加了height后，height也平滑过渡了

三、

 
 <!DOCTYPE html>

 
 <html xmlns=
 "http://www.w3.org/1999/xhtml"
 >

 
 <head>

 
     
 <title>CSS
 3
 过渡</title>

 
     
 <style type=
 "text/css"
 >

div

{

 
             
 display
 :inline-
 block
 ;

 
             
 width
 :
 100px
 ;

 
             
 height
 :
 100px
 ;

 
             
 border-radius:
 0
 ;

 
             
 background-color
 :
 #14C7F3
 ;

 
             
 transition-property:border-radius;

 
             
 transition-duration:
 0.5
 s;

 
             
 transition-timing-function:linear;

 
             
 transition-delay:
 0
 ;

}

 
         
 div:hover

{

 
             
 border-radius:
 50px
 ;

}

 
     
 </style>

 
 </head>

 
 <body>

 
     
 <div></div>

 
 </body>

 
 </html>

这个例子是把方形渐变成了圆形，当鼠标移动到div元素上面时，div元素圆角半径在0.5秒内从0过渡到50px

四、

 
  <!DOCTYPE html>
 
  <html xmlns=
  "http://www.w3.org/1999/xhtml"
  >
 
  <head>
 
  <title>CSS
  3
  实现图片文字介绍滑动展示效果</title>
 
  <style type=
  "text/css"
  >
 
  #info
 
  {
 
  width
  :
  760px
  ;
 
  margin
  :
  0
  auto
  ;
 
  }
 
  /*定义外层样式*/
 
  .wrap
 
  {
 
  width
  :
  220px
  ;
 
  height
  :
  330px
  ;
 
  float
  :
  left
  ;
 
  position:relative;
 
              overflow:hidden;
 
  font-family
  :arial, sans-serif; 
 
  }
 
  .wrap img 
 
  {
 
  border
  :
  0
  ;
 
  width
  :
  220px
  ;
 
  height
  :
  330px
  ;
 
  }
 
  .wrap p 
 
  {
 
  display
  :
  block
  ;
 
              width:220px;
 
              height:330px;
 
  position:absolute;
 
              left:0;
 
              top:300px;
 
              background-color:rgba(0,0,0,0.3);/*使用CSS3 RGBA颜色值*/
 
  font-size
  :
  12px
  ;
 
  color
  :
  #FFFFFF
  ;
 
  padding
  :
  0
  ;
 
  margin
  :
  0
  ;
 
  line-height
  :
  16px
  ;
 
  transition:
  all
  0.6
  s ease-in-out;
  /*定义CSS3过渡效果,all表示过渡属性针对所有值有变化的CSS属性*/
 
  }
 
  .wrap p b 
 
  {
 
  display
  :
  block
  ;
 
  font-size
  :
  22px
  ;
 
  color
  :
  #fc0
  ;
 
  text-align
  :
  center
  ;
 
  margin
  :
  0
  ;
 
  padding
  :
  0
  ;
 
  line-height
  :
  30px
  ;
 
  }
 
  .wrap p span 
 
  {
 
  display
  :
  block
  ;
 
  padding
  :
  10px
  ;
 
  line-height
  :
  20px
  ;
 
  }
 
  .wrap:hoverp {
  top
  :
  0
  ;}
 
  </style>
 
  </head>
 
  <body>
 
  <div id=
  "info"
  >
 
  <div class=
  "wrap"
  >
 
  <img src=
  "#"
  alt=
  ""
  >
 
  <p>
 
  <b>Red Eye Frog</b>
 
  <span>
  昨夜一梦，你经过这里，情境忽明忽暗，我从你的怀抱里挣脱，没有抽出一点点丝来。我向桑叶靠拢，把一片春光拢在怀里，滚圆的身躯，坐卧在春天的一个角落，待阳光慢慢靠近，在一段柔波里，细细地浣纱。梦里，我唤你亲，一层一层地剥开，一片一片地浸润，感知你内心的独白
  </span>
 
  </p>
 
  </div>
 
  <div class=
  "wrap"
  >
 
  <img src=
  "#"
  alt=
  ""
  >
 
  <p>
 
  <b>Emperor Penguin</b>
 
  <span>
  你未曾给过我抵达你心底的机会，即使我再奋不顾身的追逐，也无法跃进你的世界。不是蝴蝶飞不过沧海，而是沧海的那端，从未有过等待。我在凌氏基层实习初次遇见凌玺御，他当时身着浅蓝牛仔裤纯白T恤神色淡然的从我身边擦肩而过时，我那么清晰的感受到了
  </span>
 
  </p>
 
  </div>
 
  <div class=
  "wrap"
  >
 
  <img src=
  "#"
  alt=
  ""
  >
 
  <p>
 
  <b>Pelicans</b>
 
  <span>
  阳光斑驳了影子在天空中我用手指描绘你的名字海棠树下花落肩头数不清缠绵的记忆且不说忘川河畔千百世为你独开的彼岸亦不说奈何桥边日夜空守你不变的容颜恍惚、迷离~流年在我指尖绕成红线在云霞的彼端折一只千纸鹤放在风中放掉我的过去还有那绿荫下白衣少年
  </span>
 
  </p>
 
  </div>
 
  </div>
 
  </body>
 
  </html>

这是图片文字介绍滑动效果，它的原理是<p>top为300px,<span>里的文字介绍就会看不到;然后

.wrap:hover p {top:0;}，文字介绍就会出现了，这里成功的关键就是position，overflow用的好。过程用了过渡。

五、

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3实现图片文字介绍滑动展示效果</title>
    <style type="text/css">
        #info
        { 
            width:760px; 
            margin:0 auto;
        }
        /*定义外层样式*/
        .wrap 
        {
            width:220px; 
            height:330px; 
            float:left;
            position:relative; 
            overflow:hidden; 
            font-family:arial, sans-serif; 
        }
        .wrap img 
        {
            border:0;
            width:220px;
            height:330px; 
        }
        .wrap p 
        {
            display:block; 
            width:220px; 
            height:30px; 
            position:absolute; 
            left:0; 
            top:330px; 
            background-color:rgba(0,0,0,0.3);/*使用CSS3 RGBA颜色值*/
            font-size:12px; 
            color:#FFFFFF; 
            padding:0; 
            margin:0; 
            line-height:16px;
            transition: all 0.3s ease-in-out;/*定义CSS3过渡效果,all表示过渡属性针对所有值有变化的CSS属性*/
        }
        .wrap p b 
        {
            display:block; 
            font-size:22px; 
            color:#fc0; 
            text-align:center;
            margin:0; 
            padding:0; 
            line-height:30px;
         }
       
        .wrap:hover p {top:300px;}
    </style>
</head>
<body>
	<div id="info">
		<div class="wrap">
			<img src="#" alt="">
			<p>
				<b>Red Eye Frog</b>
	
			</p>
		</div>
		<div class="wrap">
			<img src="#" alt="">
			<p>
				<b>Emperor Penguin</b>
	
			</p>
		</div>
		<div class="wrap">
			<img src="#" alt="">
			<p>
				<b>Pelicans</b>
	
			</p>
		</div>
    </div>
</body>
</html>

模仿了第五个

六、

<!DOCTYPE html>
<html>
<meta charset="utf-8">  
<head>
<style> 
*{margin:0;padding:0;}
p
{	
	width:100px;
	height:100px;
	position:absolute;
	top:30px;
	background-color: rgba(255,255,255,0.5);
transform:translate(-100px);
-moz-transform:translate(-100px); /* Firefox 4 */
-webkit-transform:translate(-100px); /* Safari and Chrome */
-o-transform:translate(-100px); /* Opera */</span>
transition:all 2s;
-moz-transition:all 2s; /* Firefox 4 */
-webkit-transition:all 2s; /* Safari and Chrome */
-o-transition:all 2s; /* Opera */
}
img 
        {
            border:0;
            width:600px;
            height:300px; 
        }
div
{
width:100px;
height:100px;
background:red;

}
div:hover p
{

<span style="color:#ff0000;">transform:translate(0px);
-moz-transform:translate(0px); /* Firefox 4 */
-webkit-transform:translate(0px); /* Safari and Chrome */
-o-transform:translate(0px); /* Opera */</span>
}
</style>
</head>
<body>
<div><img src="bg_3.jpg"><p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p></div>
</body>
</html>

这是transform的变化引起的好玩的效果，文字从无到有，从左边缘滑到图片上，很不错的效果。

七、图片的由灰色变成彩色

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">	
	 *{
            margin:0;
            padding:0;
            list-style: none;
        }
        body{}
        #container{
            width:1000px;height:400px;
            margin:20px auto;    
        }
       a img{
        	-webkit-filter:grayscale(80%);
        	
   
    -webkit-transition:-webkit-filter 1s ease-in-out;  
        }
        a:hover img{
        	-webkit-filter:grayscale(0);
        }
</style>
<body>
	<div id="container">
		<a href="#"><img src="bg_1.jpg"></a>
		<a href="#"><img src="bg_2.jpg"></a>
		<a href="#"><img src="bg_3.jpg"></a>
		<a href="#"><img src="bg_4.jpg"></a>
		<a href="#"><img src="bg_5.jpg"></a>
	</div>
</body>
</html>

用到了滤镜filter,改变其灰度值

八、sidebar

<span style="background-color: rgb(255, 255, 204);"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	*{
	margin:0px;
	padding: 0px;
	font-family: '微软雅黑',Roboto
}

#header{
	position: absolute;
	display: block;
	width: 100%;
	height:10%;
	top:0px; 
	box-shadow: 0px 2px 4px #aaa;
	overflow: hidden;
}
#header #hamburger-icon,#more-icon{
	cursor: pointer;
	margin-top: 1.6%;
}
#header #hamburger-icon{
	float: left;
	margin-left: 30px;

}
#header #more-icon{
	float: right;
	margin-right: 30px;
}

#title{
	width:100%;
	height: 60px;
	margin-top: 0px;
	background-color:#5CC595;
	box-shadow: 0px 2px 4px #aaa;
}
#title h2{
	line-height: 60px;
	color: #fff;
	text-align: center;
}
#title button{
	position: absolute;
	top:80%;
	left:37.5%;
	background-color: #5CC595;
	width:25%;
	height:30px;
	border: 0px;
	border-radius: 5px;
	box-shadow: 0px 2px 4px #aaa;
	text-align: center;
	color: #fff;
	font-size: 18px;
	line-height: 21px;
	cursor: pointer;
}

#pageBody{
	position: absolute;
	width: 100%;
	height: 90%;
	top:10%;

}

#sidebar{
	position: absolute;
	width: 20%;
	height: 100%;
	left: 0;
	box-shadow: 2px 2px 4px #aaa;
	-moz-transition: width 0.5s; /* Firefox 4 */
	-webkit-transition: width 0.5s; /* Safari 和 Chrome */
	-o-transition: width 0.5s; /* Opera */
}

#content{
	position: absolute;
	width: 80%;
	height: 90%;
	top:10%;
	right: 0;
	-moz-transition: width 0.5s; /* Firefox 4 */
	-webkit-transition: width 0.5s; /* Safari 和 Chrome */
	-o-transition: width 0.5s; /* Opera */
}
</style>
<body>
	<div id="container">
		<div id="header"><img οnclick="change()" src="./images/hamburger.png" alt="" id="hamburger-icon"><img src="./images/more.png" alt="" id="more-icon"></div>
		<div id="pageBody">
			<div id="sidebar">
				<div id="title">
					<h2>Title</h2>
					<button>more</button>
				</div>
			</div>
			<div id="content">
			</div>
		</div>
	</div>
	<script>
		function change(){
			var sidebar=document.getElementById('sidebar');
			var content=document.getElementById('content');
			width_sidebar=sidebar.style.width ||sidebar.offsetWidth || sidebar.clientWidth;
			if(width_sidebar!='0px'){
			sidebar.style.width='0';
			content.style.width='100%';
			}
			else{
			sidebar.style.width='20%';
			content.style.width='80%';	
			}
		};
	</script>
</body>
</html></span>

这是sidebar平滑过渡效果，他们的状态改变不是用伪类hover,而是使用了js事件改变宽度，值得学习