html图片水波浪,css 实现水波纹，波浪动画效果

水波纹效果

css

.wave{

position: relative;

border: 1px solid silver;

width: 100px;

height: 100px;

border-radius: 50%;

line-height: 50px;

margin: 0 auto;

font-size: 14px;

text-align: center;

overflow: hidden;

animation: water-wave linear infinite;

}

.wave1{

position: absolute;

top: 40%;

left: -25%;

background: #33cfff;

opacity: .7;

width: 200%;

height: 200%;

border-radius: 40%;

animation: inherit;

animation-duration: 5s;

}

.wave2{

position: absolute;

top: 40%;

left: -35%;

background: #0eaffe;

opacity: .7;

width: 200%;

height: 200%;

border-radius: 35%;

animation: inherit;

animation-duration: 7s;

}

.wave3{

position: absolute;

top: 50%;

left: -35%;

background: #0f7ea4;

opacity: .3;

width: 200%;

height: 200%;

border-radius: 33%;

animation: inherit;

animation-duration: 11s;

}

@keyframes water-wave{

0% {transform: rotate(0deg);}

100% {transform: rotate(360deg);}

}

效果图

来源：https://www.cnblogs.com/yhhBKY/p/11934949.html

html图片水波浪,css 实现水波纹，波浪动画效果相关推荐

【每日一练】68—CSS实现一组渐变按钮动画效果
在之前,我们也练习过一些按钮动画的效果,今天我们再来练习一组CSS实现的按钮动画效果,下面是今天练习的最终效果: 接下来,我们再来看一下这个案例的源码. HTML代码: <!doctype ht ...
c语言实现小球抛物线动画,CSS实现小球抛物线运动的动画效果（代码）
本篇文章给大家带来的内容是关于CSS实现小球抛物线运动的动画效果 (代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一个物体实现抛物线运动,物理上是将物体分为水平运动(匀速) ...
纯CSS制作3D旋转风车动画效果
效果图展示 HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...
【每日一练】138—CSS实现炫酷背景动画效果
以下是今天练习的最终效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta na ...
css 毛玻璃_CSS实现雨滴动画效果
今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. 其实就是给一张图片,做了个模糊化的效果,看起来像毛玻璃的效果一滴雨雨滴的效果就很巧 ...
基于css简易实现头像更换动画效果
目录需求描述思路模拟效果预览具体实现真实场景展示已经好久没有写博客了,今天写个简单的小需求功能实现回归一下学习之路. 需求描述个人主页头像实现更换图像动画效果思路基于两个div块通 ...
html 载入中,用纯CSS实现加载中动画效果
今天要介绍的是用简单的CSS--只用CSS,不用Gif--制作"加载中-"动画效果.先看看效果: 上面的这个加载中效果,以前是用gif动图实现的,但随着CSS的进步,CSS动画功能 ...
沙漏PHP代码,如何使用纯CSS实现一个沙漏的动画效果
本篇文章给大家带来的内容是关于如何使用css实现监控网络连接状态的页面 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com/c ...
02 css实现文字下划线动画效果
实现文字下划线从中间向两端延伸的动画效果,主要是通过css的transform和transition属性来实现,下面直接粘贴代码和效果图: <!DOCTYPE html> <html ...
【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程网页开发中常见的样式与特效，收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYP ...

html图片水波浪,css 实现水波纹，波浪动画效果

html图片水波浪,css 实现水波纹，波浪动画效果相关推荐

最新文章

热门文章