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

最新推荐文章于 2022-09-06 08:00:38 发布

jiushiguangwufa

最新推荐文章于 2022-09-06 08:00:38 发布

阅读量3.7k

点赞数

分类专栏：前端CSS3 JS 文章标签： css3 transition 实例及分

本文链接：https://blog.csdn.net/kongbingyan/article/details/51064867

版权

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

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

<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> 

最低0.47元/天解锁文章

jiushiguangwufa

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

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