css3实现动态水波纹

看的一个专栏前端每日实战的文章，大家可以去看看。

下面是看了大神写的之后，自己写了一遍；

先上效果图：

html代码：

<div class="content"><p>美味虾尾</p><span class="wave"></span><span class="wave"></span><span class="wave"></span></div>

css代码：

.content {width: 300px;height: 300px;box-shadow: 0px 5px 10px 0px rgb(177, 174, 174);background-color: rgb(243, 225, 202);background-image: linear-gradient(rgb(250, 203, 203) 60%,rgba(22, 21, 21, 0.8));overflow: hidden;position: relative;}.content p {color: rgb(252, 247, 247);font-size: 30px;text-align: center;line-height: 150px;position: relative;z-index: 99999;font-weight: bold;font-family: serif;}.wave {position: absolute;width: 550px;height: 550px;top: -300px;left: -100px;background-color: rgba(111, 194, 243, 0.3);border-radius: 38%;animation: drift 5s linear infinite;}.wave:nth-of-type(1) {animation-duration: 5s;}.wave:nth-of-type(2) {animation-duration: 7s;}.wave:nth-of-type(3) {animation-duration: 10s;}@keyframes drift {from {transform: rotate(360deg);}}

css3实现动态水波纹相关推荐

（加入显示电量功能）模仿魅族、华为、小米电池续航管理软件，动态水波纹滚动的圆形小球View
一,效果图: 图一为所做项目效果展示图: 图二为单独这个View的效果图: 二,使用方法: 1,由于是自定义的View,所以需要在attrs.xml里加入如下属性定义: <?xml versio ...
OpenGL ES 实现动态（水波纹）涟漪效果
该原创文章首发于微信公众号:字节流动水波纹效果原理最近一个做视频滤镜的朋友,让我给他做一个动态水波纹效果,具体就是:点击屏幕上的某一位置,然后波纹以该位置为中心向周围扩散.接到这个需求,一开始就尝 ...
震惊！原来Android OpenGL ES可以这样用，实现（水波纹）涟漪效果超惊艳！
用几行代码实现惊艳的特效. 作者:字节流动链接:https://juejin.im/post/5ed9c9445188254344768bd6 水波纹效果原理最近一个做视频滤镜的朋友,让我给他做一 ...
Android 之自定义view实现水波纹效果
在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果,兴致高昂的来找你,看了之后目的很明确,当然就是希望你能给她: 在这样的关键时候,身子板就一定得硬了, ...
自定义view实现水波纹效果
水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...
QT实现动态的wave水波纹
QT实现动态的wave水波纹项目简介项目技术项目展示主要源码片段解析获取完整项目源码传送门项目简介使用前端和几何着色器的QML应用程序. Wave演示了使用尖端和几何着色器. 项目技术 ...
css 波纹扩散_html5 +css3 点击后水波纹扩散效果兼容移动端
html5+ js +css3 点击后水波纹扩散效果兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
html移动端语音波纹,html5 +css3 点击后水波纹扩散效果兼容移动端
html5+ js +css3 点击后水波纹扩散效果兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
android水波效果,android动态壁纸中的水波纹效果
[实例简介] android动态壁纸中的水波纹效果,采用opengl中的shader实现 [实例截图] [核心代码] @Override public String getVertexShader() ...

css3实现动态水波纹

css3实现动态水波纹相关推荐

最新文章

热门文章