<div class="container">
<div class="wave"><span>50%</span></div>
</div>
        <style type="text/css">
.container {
position: absolute;
width: 100px;
height: 100px;
padding: 5px;
border: 5px solid rgb(118, 218, 255);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
overflow: hidden;
} .wave {
position: relative;
width: 100px;
height: 100px;
background-color: rgb(118, 218, 255);
border-radius: 50%;
}
.wave::before,.wave::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
top:;
left: 50%;
background-color: rgba(255, 255, 255, .4);
border-radius: 45%;
transform: translate(-50%, -70%) rotate(0);
animation: rotate 6s linear infinite;
z-index:;
}
.wave::after {
border-radius: 47%;
background-color: rgba(255, 255, 255, .9);
transform: translate(-50%, -70%) rotate(0);
animation: rotate 10s linear -5s infinite;
z-index:;
}
@keyframes rotate {
50% {
transform: translate(-50%, -73%) rotate(180deg);
}
100% {
transform: translate(-50%, -70%) rotate(360deg);
}
}
span{
color: #76DAFF;
font-weight: bold;
font-size: 25px;
z-index:;
position: absolute;
left: 25px;
top: 25px;
}
</style>

效果图:

44、css实现水波纹效果的更多相关文章

  1. css实现水波纹效果

    1. HTML 代码: <div class="example"> <div class="dot"></div> < ...

  2. CSS 冲击波(水波纹)效果

    <span style="font-size:18px;"><!DOCTYPE html> <html> <head> <me ...

  3. css 滚动视差 之 水波纹效果

    核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上. 我们来看个例子: htm ...

  4. css 实现水波纹,波浪动画效果

    <div class="wave"> 水波纹效果 <div class="wave1"></div> <div cla ...

  5. jquery ripples水波纹效果( 涟漪效果)

    这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇 ...

  6. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  7. 兼容Android的水波纹效果

    Android的水波纹效果只有高版本才有,我们希望自己的应用在低版本用低版本的阴影,高版本用水波纹,这怎么做呢?其实,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的se ...

  8. android自定义控件(4)-自定义水波纹效果

    一.实现单击出现水波纹单圈效果: 照例来说,还是一个自定义控件,观察这个效果,发现应该需要重写onTouchEvent和onDraw方法,通过在onTouchEvent中获取触摸的坐标,然后以这个坐标 ...

  9. 自定义view实现水波纹效果

    水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...

随机推荐

  1. linux服务器NAT后无法在内网通过外部IP访问内部服务的问题

    场景一: 将外网访问192.168.100.10的80端口转发到192.168.75.5:8000端口. # iptables -t nat -A PREROUTING -d 192.168.100. ...

  2. 红黑树与AVL树比较

    链接地址:https://blog.csdn.net/zhangkunrun/article/details/38336543 B树相对于红黑树的区别 在大规模数据存储的时候,红黑树往往出现由于树的深 ...

  3. offsetWidth的bug

    #div1{width:200px;border:1px solid red;} 这个时候如果用 offsetWidth 提取 #div1 的宽  得到的值是 202: 也就是说 offsetWidt ...

  4. Python基础之while和for

    实现ATM的输入密码重新输入的功能 while True: user_db = 'nick' pwd_db = '123' inp_user = input('username: ') inp_pwd ...

  5. ActiveMQ消息可靠性-持久性

    三个方面保证消息的可靠性 1.消息的持久 2.事物 3.签收 一:PERSISTENT:持久性   参数说明:1.持久   2.非持久 Java里面设置持久化和非持久 持久: 将持久性设置为持久 宕机 ...

  6. JQuery校验时间大小

    常用于按时间条件(起始日-截止日)查询时,进行校验 function checkDate(){ var startTime = $('#startTime').val(); var endTime = ...

  7. linux网络编程之用socket实现简单客户端和服务端的通信(基于UDP)

    单客户端和服务端的通信(基于UDP)   代码 服务端代码socket3.c #include<sys/types.h> #include<sys/socket.h> #inc ...

  8. 使用canvas实现图片预览、缩放(压缩)以及生成文件下载

    参考 https://www.runoob.com/html/html5-canvas.html https://www.cnblogs.com/yuanzhiguo/p/8288822.html h ...

  9. Affy包 estrogen包

    下载安装 if (!requireNamespace("BiocManager", quietly = TRUE)) install.packages("BiocMana ...

  10. Gamma阶段事后分析

    设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件要解决的是安卓游戏的自动化异常检测问题,定义的足够清楚,对于典型用户的描述和典型场景的描述也足 ...