CSS控制按钮渐变过渡效果(鼠标移入移出)

HTML代码

<!doctype html>
<head>
  <title>hover按钮过渡效果</title>
</head>
<body>
  <a href="#" id="example">&nbsp;&nbsp;&nbsp;&nbsp;</a>
</body>

CSS代码

#example {
    
    
            text-align: center;
            color: White;
            background: #4490f7;
            text-decoration: none;
            padding: 10px 95px;
            border-radius: 5px;
            opacity: 0.6;	//主要代码
            transition: opacity 1s;	//主要代码
        }

#example:hover {
    
    
            opacity: 1;		//主要代码
            /* transition-property: opacity;
            transition-duration: 1.5s; */

        }
实现原理:先将按钮的透明度设为0.6(opacity: 0.6;),鼠标划过时(hover),按钮的透明度变为1(opacity: 1;)。transition: opacity 1s;控制过渡属性为透明度(opacity),持续1s。
动图演示:

在这里插入图片描述

Demo链接:http://129.204.144.144/Demo/hover%E6%8C%89%E9%92%AE%E8%BF%87%E6%B8%A1%E6%95%88%E6%9E%9C.html

猜你喜欢

转载自blog.csdn.net/weixin_43757001/article/details/97390359