背景颜色的动态变化-css

最新推荐文章于 2024-08-31 09:27:14 发布

时夜

最新推荐文章于 2024-08-31 09:27:14 发布

阅读量2.5k

点赞数 3

分类专栏： html+css+js

本文链接：https://blog.csdn.net/qq_37174835/article/details/100603112

版权

html+css+js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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