纯css实现div背景色从左到右的刷动效果

动画主要靠这个部分实现

@keyframes LeftToRight {from {transform: scaleX(0);}to {transform: scaleX(1);}
}
//使用
{animation: LeftToRight 3s infinite;
}

具体代码如下

        <div class="text"><p>设备接入</p><div><img src="../../../assets/image/icon_equip.png" /><span class="number"><p class="unit">个</p><span class="num">12.8</span>万</span></div></div></el-button><style>.el-button {position: relative;width: 28%;height: 45%;padding: 0;background: rgba(255, 255, 255, 0.08);border-radius: 8px;border: 1px solid rgba(255, 255, 255, 0.16);color: #fff;margin: 2% 1.5% 0 1.5%;font-size: 12px;.text {width: 76%;font-size: 12px;color: #fff;text-align: left;position: absolute;z-index: 2;top: 12%;left: 10%;p {margin: 0 auto 30% 0;line-height: 20px;text-align: left;}.unit {text-align: right;margin-bottom: 12px;}.number {font-size: 12px;position: absolute;bottom: 2px;right: -2px;}.num {font-size: 15px;}img {height: 28px;}img.large {height: 34px;margin-bottom: -3px;}}
}.el-button::after {content: "";position: absolute;left: 0;top: 0;bottom: 0;right: 0;transition: 0.3s;opacity: 0.3;background: rgba(0, 0, 0, 0.8);transform-origin: left;animation: LeftToRight 3s infinite;}.el-button:hover::after {transform: scaleX(1);}
@keyframes LeftToRight {from {transform: scaleX(0);}to {transform: scaleX(1);}
}
</style>

纯css实现div背景色从左到右的刷动效果相关推荐

纯css在div上添加小三角
纯css在div上添加小三角有些项目中会遇到这样的需求,就是div容器上要突出来一个小三角,如下图虽然在功能上没啥意义,但是人家UI就是要这个小三角,你能怎么办,咱必须给他整出来! 我们用伪类和b ...
纯css实现div同行显示
纯css实现div同行,效果如下(由有10余年前台工作经验的工程师指导): 代码如下(可以直接用): <html> <head> <style type="te ...
纯css解决div隐藏浏览器原生滚动条，但保留鼠标滚动效果的问题
纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题参考文章: (1)纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题 (2)https://www.cnblogs.co ...
css 风琴,玩一下纯 CSS 折腾的一个叫什么手拉风琴的图片展示效果
原标题:玩一下纯 CSS 折腾的一个叫什么手拉风琴的图片展示效果好久没更新的公众号终于更新了,但没有太多内容,主要是也不知道写什么,更关键是已经很久没有写 CSS 的东西了,中午没吃到鸡,就一边观战 ...
CSS实现Div层背景半透明而内容不透明的效果
CSS实现Div层背景半透明而内容不透明的效果 2014年5月18日 MK 前端设计 0 阅读 2932次前几天有一个学弟问我,怎么样能实现Div层背景半透明而内容不透明的效果呢,他写的效果不管怎么 ...
强迫症晚期患者：纯CSS实现div高度自适应浏览器。
我记得在学了网页自适应的内容后,每次写网页,力求宽高自适应.最后还是有一些困惑:写一个div给样式.(给定背景色和字体色是为了便于我们观察.) width:100%;background:white: ...
html 悬浮在固定位置,纯CSS实现DIV悬浮(固定位置)
[推荐]2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8.360.FireFox.Chrome.Sa ...
纯css实现div中未知尺寸图片的垂直居中
1.淘宝的方法在曾经的"淘宝UED招聘"中有这样一道题目: "使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.&quo ...
纯CSS实现DIV悬浮(固定位置)
纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗等.效果如下: 实现代码: <!DOCTY ...

纯css实现div背景色从左到右的刷动效果

纯css实现div背景色从左到右的刷动效果相关推荐

最新文章

热门文章