css实现鼠标移上缩小字间距-trasition

 小明课堂网   2020-11-20 13:32   28 人阅读  0 条评论
<!DOCTYPE html> 
<html> 
<head>     
<meta charset="UTF-8">     
<title>过渡</title>     
<style>         
  body{ 
  background-color: #00CCFF; 
        }      
  p{  text-align: center;
     letter-spacing: 50px;
     font-size: 50px;
       color: rgba(255,255,255,0.5);  
       transition: all 5s ease; 
    }        
  p:hover{  
   text-align: center;            
    font-size: 50px;             
    letter-spacing: 0;             
    color: white;         
    }     
</style> 
</head> 
<body>     
<p>4亿网友共同信赖</p> 
</body> 
</html>

主要用到的是这两个属性 letter-spacing(字符间距)transition,可参考网站 www.hshdlq.cn

letter-spacing
transition: all 5s ease;


本文地址:https://studyseo.top/post/95.html
版权声明:本文为原创文章,版权归 小明课堂网 所有,欢迎分享本文,转载请保留出处!

 发表评论


表情

还没有留言,还不快点抢沙发?