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 ...
随机推荐
- python基础之函数重点
函数的返回值 现在有一个需求,比较两个人的月薪,然后想获取月薪较大人的年薪. 如果需要在程序中拿到函数的处理结果做进一步的处理,则需要函数必须要有返回值. 需要注意的是: return是一个函数结束的 ...
- cookies , sessionStorage 及 localStorage 的初步的区别
cookies 保存在浏览器中,关闭浏览器后再次打开,任然存在,当然可能存在一定的有效期.(仅限存在同一台电脑,同一个浏览器中) Session依赖Cookie!! sessionStorage ...
- ESP8266 SDK开发: 开发环境搭建
前言 这节安装下编程软件, 可以去官网下载, https://wiki.ai-thinker.com/ai_ide_install 也可以安装我提供的(我使用的为官方以前版本) 建议安装我提供的,有问 ...
- OpenResty: 反向代理
打开文件 注:我配置的是 443 <--> 8083 以下域名根据自己的修改 请自行重启,测试.
- Python、Spyder的环境搭建
有什么不对欢迎大家指出,一起交流啊,只针对Windows!!!!(苹果买不起...)Python安装的话2.7版本和3.6版本都可以,虽然2.7比较全面,但还是建议安装3.6,这里以3.6为例进行介绍 ...
- Java 解压 zip 文件
代码如下 package test_java; import java.io.File; import java.io.FileOutputStream; import java.io.IOExcep ...
- eclipse Referenced file contains errors (http://www.springframework.org/schema/context/spring-context-3.0.xsd)
1.情景展示 spring配置文件报错信息如下: Referenced file contains errors (http://www.springframework.org/schema/ ...
- ASP.NET 网站迁移 HTTP 错误 500.22 - Internal Server Error 检测到在集成的托管管道模式下不适用
前提:今天要做网站迁移,把A服务器上的网站迁移到B服务器上,A服务器当时的环境是.NET 4.0 ,而B服务器是.NET2.0,A服务器IIS为6.0,B服务器IIS版本为7.0 第一步,先在B服务 ...
- stacking method house price in kaggle top10%
整合几部分代码的汇总 隐藏代码片段 导入python数据和可视化包 导入统计相关的工具 导入回归相关的算法 导入数据预处理相关的方法 导入模型调参相关的包 读取数据 特征工程 缺失值 类别特征处理-l ...
- 20190802_Nginx基础
20190802_Nginx基础 文章主要内容: 关于中间件比较通俗易懂的解释 Nginx简述 Nginx环境配置以及安装 Nginx的目录和配置语法 Nginx日志_log_format Nginx ...