44、css实现水波纹效果
<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实现水波纹效果的更多相关文章
- css实现水波纹效果
1. HTML 代码: <div class="example"> <div class="dot"></div> < ...
- CSS 冲击波(水波纹)效果
<span style="font-size:18px;"><!DOCTYPE html> <html> <head> <me ...
- css 滚动视差 之 水波纹效果
核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上. 我们来看个例子: htm ...
- css 实现水波纹,波浪动画效果
<div class="wave"> 水波纹效果 <div class="wave1"></div> <div cla ...
- jquery ripples水波纹效果( 涟漪效果)
这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇 ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- 兼容Android的水波纹效果
Android的水波纹效果只有高版本才有,我们希望自己的应用在低版本用低版本的阴影,高版本用水波纹,这怎么做呢?其实,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的se ...
- android自定义控件(4)-自定义水波纹效果
一.实现单击出现水波纹单圈效果: 照例来说,还是一个自定义控件,观察这个效果,发现应该需要重写onTouchEvent和onDraw方法,通过在onTouchEvent中获取触摸的坐标,然后以这个坐标 ...
- 自定义view实现水波纹效果
水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...
随机推荐
- linux服务器NAT后无法在内网通过外部IP访问内部服务的问题
场景一: 将外网访问192.168.100.10的80端口转发到192.168.75.5:8000端口. # iptables -t nat -A PREROUTING -d 192.168.100. ...
- 红黑树与AVL树比较
链接地址:https://blog.csdn.net/zhangkunrun/article/details/38336543 B树相对于红黑树的区别 在大规模数据存储的时候,红黑树往往出现由于树的深 ...
- offsetWidth的bug
#div1{width:200px;border:1px solid red;} 这个时候如果用 offsetWidth 提取 #div1 的宽 得到的值是 202: 也就是说 offsetWidt ...
- Python基础之while和for
实现ATM的输入密码重新输入的功能 while True: user_db = 'nick' pwd_db = '123' inp_user = input('username: ') inp_pwd ...
- ActiveMQ消息可靠性-持久性
三个方面保证消息的可靠性 1.消息的持久 2.事物 3.签收 一:PERSISTENT:持久性 参数说明:1.持久 2.非持久 Java里面设置持久化和非持久 持久: 将持久性设置为持久 宕机 ...
- JQuery校验时间大小
常用于按时间条件(起始日-截止日)查询时,进行校验 function checkDate(){ var startTime = $('#startTime').val(); var endTime = ...
- linux网络编程之用socket实现简单客户端和服务端的通信(基于UDP)
单客户端和服务端的通信(基于UDP) 代码 服务端代码socket3.c #include<sys/types.h> #include<sys/socket.h> #inc ...
- 使用canvas实现图片预览、缩放(压缩)以及生成文件下载
参考 https://www.runoob.com/html/html5-canvas.html https://www.cnblogs.com/yuanzhiguo/p/8288822.html h ...
- Affy包 estrogen包
下载安装 if (!requireNamespace("BiocManager", quietly = TRUE)) install.packages("BiocMana ...
- Gamma阶段事后分析
设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件要解决的是安卓游戏的自动化异常检测问题,定义的足够清楚,对于典型用户的描述和典型场景的描述也足 ...