实现一个div的背景颜色从左到右慢慢出现

怎样实现一个div的背景颜色从左到右慢慢出现？

在这里为大家介绍伪类 :after

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.btn button {position: relative;}.btn button::after {content: '';position: absolute;left: 0;top: 0;bottom: 0;right: 0;transition: .3s;opacity: .3;background: #000;transform-origin: left;transform: scaleX(0);}.btn button:hover::after {transform: scaleX(1);}.btn button{background-color: red;width: 200px;height: 40px;border: none;outline: none;cursor: pointer;color: white;}</style>
</head>
<body><div class="btn"><button>按钮</button>
</div>
</html>

实现一个div的背景颜色从左到右慢慢出现相关推荐

文字颜色由左到右逐渐变色，简单做法
文字颜色由左到右逐渐变色 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术:DW,HTML,c ...
jQuery获取div的背景颜色 How to get background color of div?
直接代码: <script type="text/javascript"> $(document).ready(function(){$("div" ...
CSS -- 实现DIV层背景颜色渐变（兼容IE 火狐谷歌浏览器）
CSS -- 实现DIV层背景颜色渐变 (兼容IE 火狐谷歌浏览器) FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType= ...
JS页面四个颜色不同的div,鼠标进入哪个div,页面背景颜色变成该div的颜色。
1.JS页面四个颜色不同的div,鼠标进入哪个div,页面背景颜色变成该div的颜色. <style>.colorChange {width: 100px;height: 100px;di ...
php如何在添加div的背景颜色_css3颜色渐变：css3如何实现背景颜色渐变？
为了开发网页的美观,css3背景颜色渐变是经常会用到的,那么,css3背景颜色渐变如何设置呢?本篇文章我们就来介绍关于css颜色渐变背景的设置方法. 我们要知道的是css3渐变有两种类型:css3线性 ...
dw改透明度_div 背景透明度如何设置一个div的背景透明度
本节向大家爱描述一下如何设置DIV背景颜色透明度,opacityOpacity设置或检索透明渐变的开始透明度,Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明.S ...
用一个div绘制背景流动网格特效
文章目录如何利用css绘制水平垂直直线组成网格如何形成流动网格效果如何平面流动网格图看起来像个背景效果完整代码如何利用css绘制水平垂直直线组成网格利用css3llinear-gradie ...
如何让div靠右_一个DIV里，一边靠左，一边靠右，怎么实现？
展开全部通过定位实现:position. 定义和用法:position 属性规定元素的定位类型.32313133353236313431303231363533e58685e5aeb93133336 ...
VS的使用设置一个护眼背景颜色
第一步打开我们的Visual Stduio,在工具中,找到"选项",点击进入第二步找到"字体和颜色",点击第三步找到项背景,"自定义&quo ...

实现一个div的背景颜色从左到右慢慢出现

怎样实现一个div的背景颜色从左到右慢慢出现？

实现一个div的背景颜色从左到右慢慢出现相关推荐

最新文章

热门文章