<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. python基础之函数重点

    函数的返回值 现在有一个需求,比较两个人的月薪,然后想获取月薪较大人的年薪. 如果需要在程序中拿到函数的处理结果做进一步的处理,则需要函数必须要有返回值. 需要注意的是: return是一个函数结束的 ...

  2. cookies , sessionStorage 及 localStorage 的初步的区别

    cookies  保存在浏览器中,关闭浏览器后再次打开,任然存在,当然可能存在一定的有效期.(仅限存在同一台电脑,同一个浏览器中)  Session依赖Cookie!! sessionStorage  ...

  3. ESP8266 SDK开发: 开发环境搭建

    前言 这节安装下编程软件, 可以去官网下载, https://wiki.ai-thinker.com/ai_ide_install 也可以安装我提供的(我使用的为官方以前版本) 建议安装我提供的,有问 ...

  4. OpenResty: 反向代理

    打开文件 注:我配置的是 443  <--> 8083 以下域名根据自己的修改 请自行重启,测试.

  5. Python、Spyder的环境搭建

    有什么不对欢迎大家指出,一起交流啊,只针对Windows!!!!(苹果买不起...)Python安装的话2.7版本和3.6版本都可以,虽然2.7比较全面,但还是建议安装3.6,这里以3.6为例进行介绍 ...

  6. Java 解压 zip 文件

    代码如下 package test_java; import java.io.File; import java.io.FileOutputStream; import java.io.IOExcep ...

  7. 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/ ...

  8. 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服务 ...

  9. stacking method house price in kaggle top10%

    整合几部分代码的汇总 隐藏代码片段 导入python数据和可视化包 导入统计相关的工具 导入回归相关的算法 导入数据预处理相关的方法 导入模型调参相关的包 读取数据 特征工程 缺失值 类别特征处理-l ...

  10. 20190802_Nginx基础

    20190802_Nginx基础 文章主要内容: 关于中间件比较通俗易懂的解释 Nginx简述 Nginx环境配置以及安装 Nginx的目录和配置语法 Nginx日志_log_format Nginx ...