纯css实现涟漪效果

<template><div id="app"><el-button type="primary" class="primary">按钮一 <span class="mask mask-1"></span></el-button><el-button type="success" class="success">按钮二<span class="mask mask-2"></span></el-button><el-button type="info" class="info">按钮三<span class="mask mask-3"></span></el-button><el-button type="warning" class="warning">按钮四<span class="mask mask-4"></span></el-button></div>
</template><script>
export default {name: "app",
};
</script><style>
#app {font-family: "Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
.el-button {position: relative;
}
/*定义一个遮罩层，这是实现的核心 */
.mask {position: absolute;display: block;/*在这里宽高的初始值没必要设置 */height: 100%;background-color: #fff;opacity: 1;
}
/*每个按钮不同的遮罩效果 */
.mask-1 {top: 0;right: 0;
}
.mask-2 {top: 0;left: 0;border-top-right-radius: 40px;
}
.mask-3 {left: 50%;top: 50%;width: 0;height: 0;border-radius: 50%;
}
.mask-4 {left: 0;bottom: 0;height: 0;width: 100%;opacity: 1;border-radius: 4px;
}
/**鼠标悬停按钮时触发动画 */
.primary:hover .mask {/* 动画名称 */animation-name: btn-animation-one;animation-duration: 1s;
}
.success:hover .mask {/* 动画名称 */animation-name: btn-animation-one;animation-duration: 1s;
}
.info:hover .mask {/* 动画名称 */animation-name: btn-animation-three;animation-duration: 1s;
}
.warning:hover .mask {/* 动画名称 */animation-name: btn-animation-four;animation-duration: 1s;
}/* 定义动画 */
@keyframes btn-animation-one {from {/*开始状态 */width: 0;opacity: 1;}to {/*结束状态 */width: 100%;opacity: 0;}
}
/* 该动画效果失败 */
@keyframes btn-animation-three {from { width: 1px;height: 1px;transform: scale(0);opacity: 1;}to { width: 1px;height: 1px;transform: scale(100);opacity: 0;}
}
@keyframes btn-animation-four {from {width: 100%;height: 0;opacity: 1;}to {height: 100%;width: 100%;opacity: 0;}
}
</style>

纯css实现涟漪效果相关推荐

纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
制作css开关,纯css实现开关效果
大家好,我又来了,这次给大家表演使用纯css实现开关效果首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则 ...
html实现开关,使用纯css实现开关效果
首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则关闭开关选中,则打开开关开始画出off.on状态的草图 ...
如何用纯 CSS 实现优惠券效果
背景本文来自CODE.FUN ,讲述如何用纯 CSS 实现优惠券效果的实践案例,分享给大家. 优惠券视觉效果上面是优惠券的视觉效果,本文分享如何使用纯 CSS 实现它的主要框架,希望对大家有 ...
纯CSS实现弹幕效果
纯CSS实现弹幕效果动画相关的属性和方法已经本部分的开头简单提过了,我们来看一下本次要实现的效果--弹幕- 当你在阅读.看视频的时候经常会遇见一段文件或者一张表情从页面划过,要实现一个完整的功能很复 ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
css中间镂空,怎么用纯CSS实现镂空效果
怎么用纯CSS实现镂空效果发布时间:2021-03-19 09:49:16 来源:亿速云阅读:99 作者:小新小编给大家分享一下怎么用纯CSS实现镂空效果,希望大家阅读完这篇文章之后都有所收获, ...
纯css实现信封效果
纯css实现信封效果 <body><div id="dialog"><div id="envelope"><div i ...
HTML中 css红绿黄灯,纯CSS实现红绿灯效果(面试常见)
先看题,别看答案试下吧 ~_~ 1.下面的代码输出的内容是什么? function O(name){ this.name=name||'world'; } O.prototype.hello=func ...

纯css实现涟漪效果

纯css实现涟漪效果相关推荐

最新文章

热门文章