背景颜色的动态变化-css_css背景24小时变化-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37174835/article/details/100603112

使用CSS过渡改变div或按钮等的背景颜色变化
大概的效果如下图：
鼠标一移动到这个方块，上层蓝色（?）会从左到右逐渐覆盖，下层是个透明的绿色（?）背景颜色
hello world则一直显示在最上层
在这里插入图片描述
在这我使用了after，before伪类，过渡做了一个简单的效果，还有如果要单独设置父属性的透明度，而不影响子属性的透明度我们可以使用
background: rgba(0,0,0,0.5)
代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .div_1{
				background-color: rgba(153,50,204,0.3);
				top: 200px;
				left: 500px;
                position: relative;
                width: 200px;
				height: 50px;
                text-align: center;
				line-height: 50px;
            }
			.div_1::before{
				content: "hello world";
				text-align: center;
				line-height: 50px;
				top: 0;
				left: 0;
				position: absolute;
				width: 200px;
				height: 50px;
				z-index: 2;
			}
            .div_1::after {
				z-index: 1;
				content: "";
				top: 0;
				left: 0;
                position: absolute;
                width: 0px;
                height: 50px;
				background-color: aquamarine;
				transition-property: width;
				transition-duration: 1s;
            }      
            .div_1:hover::after{
                width: 200px;
            }
			body{
				background-image: url("63936223_p99.png");
			}
        </style>
    </head>
    <body>
        <div class="div_1">
			
		</div>
    </body>
</html>