携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第23天,点击查看活动详情 ui设计的元素有时候需要有一些动画效果,可以直接用css动画来实现。

实现一个中心圆向四周有水波纹的效果

利用定位添加多个圆,给他们加上动画,使得依次从小变大,这样就形成了逐渐外扩的动画效果

(一)中间圆

绘制中间的圆

.logo {
width: 80px;
height: 80px;
background: #7EC4FC;
color: #fff;
text-align: center;
line-height: 80px;
border-radius: 50%;
position: absolute;
top: 310px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 9;
}
复制代码

(二)水波纹最大的圆

绘制水波纹最大可扩大的圆的大小

.animate-wave {
width: 500px;
height: 500px;
position: absolute;
top: 100px;
left: 0;
right: 0;
margin: 0 auto;
background: #C3E4FF;
border-radius: 50%;
}
复制代码

要实现4个个依次扩大的水波纹效果

<div class="animate-wave">
<div class="w1"></div>
<div class="w2"></div>
<div class="w3"></div>
<div class="w4"></div>
</div>
复制代码

(三)水波纹动画

设置动画,0%的时候是宽高为0,逐渐增大,100%时候增大到最大,依次添加动画延迟,这样就有水波纹的效果了

@-webkit-keyframes opac {
from {
opacity: 1;
width: 0;
height: 0;
top: 50%;
left: 50%;
} to {
opacity: 0;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
} .animate-wave * {
background: #C3E4FF;
position: absolute;
border-radius: 50%;
animation: opac 4s infinite;
} .animate-wave .w2 {
animation-delay: 1s;
} .animate-wave .w3 {
animation-delay: 2s;
} .animate-wave .w4 {
animation-delay: 3s;
}
复制代码

(四)最终效果

图片实现水波纹

观察这个效果,是有从中间逐渐向外扩的效果 定义水波纹标签

<div class="w w5"></div>
<div class="w w4"></div>
<div class="w w3"></div>
<div class="w w2"></div>
<div class="w w1"></div>
<div class="w w0"></div>
复制代码

(一)初始圆

.w{
position: absolute;
top: calc((100% - 50px)/2);
left: calc((100% - 50px)/2);
width: 50px;
height: 50px;
border-radius: 500px;
background: url('../img/2.jpg') fixed center center;
}
复制代码

效果

(二)水波纹

div盒子的class设置为“w0-5”,给它样式设置设置图像的z-index属性;再给background-size属性指定背景图像的大小;动画animation绑定到一个<div>元素,只要把六个div叠在一起,搭配CSS的animation,就可以让六个div依序出现

(三)动画效果

通过@keyframes规则,创建动画是通过逐步改变0%是开头动画,100%是当动画完成

@keyframes w{
0%{
top: calc((100% - 50px)/2);
left: calc((100% - 50px)/2);
width: 50px;
height: 50px;
} 100%{
top: calc((100% - 500px)/2);
left: calc((100% - 500px)/2);
width: 500px;
height: 500px;
}
}

(四)最终效果

最后分享 程序员 面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

2、前端技术导航大全      推荐:★★★★★

地址:前端技术导航大全

3、开发者颜色值转换工具   推荐:★★★★★

地址 :开发者颜色值转换工具

css实现水波纹的更多相关文章

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

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

  2. css实现水波纹效果

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

  3. 44、css实现水波纹效果

    <div class="container"> <div class="wave"><span>50%</span&g ...

  4. CSS 按钮水波纹特效

    /* 按钮反馈之波纹 */ .ripple { position: relative; /* overflow:hidden */  打开注释及效果不扩散在外 } .ripple:focus{ out ...

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

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

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

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

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

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

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

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

  9. HTML5 Canvas水波纹动画特效

    HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...

  10. WebGL——水波纹特效

    大家好,今天我ccentry要做一个水波纹特效,我们来看看水波纹特效的做法.首先我们来看一下水波纹特效的效果是怎么样的,请看下图. 我们要做的就是类似这种纹理特效,那么我们来看看是如何制作的吧.首先鲫 ...

随机推荐

  1. (7)go-micro微服务zap日志配置

    目录 一 Zap日志介绍 二 Zap日志安装 三 Zap日志初始化 四 Zap日志重写方法 五 Zap日志使用 六 最后 一 Zap日志介绍 Zap是在 Go 中实现超快.结构化.分级的日志记录. Z ...

  2. 企业应用架构研究系列十三:整合EFCore&Dapper 通用ORM框架EFDapper

    EntityFrameworkCore是微软官网提供的ORM框架,是轻量化.可扩展.开源和跨平台的数据访问技术框架,但是在.Net 开发圈的评论却褒贬不一.很多人认为EFCore 执行的效能比较差,很 ...

  3. vue打包---放到服务器下(一个服务器多个项目需要配置路径),以及哈希模式和历史模式的不同配置方法

    哈希模式,好用,不需要服务器配合分配路径指向,自己单机就可以打开了 接下来上代码截图 接下来开始截图 历史模式 历史模式需要后端支持 打包后自己直接点击是打不开的 截图如下

  4. Java 进阶P-8.9+P-8.10

    文件流 File Input Stream File Output Stream 对文件作读写操作 实际工程中已经较少使用 更常用的是以在内存数据或通信数据上建立的流,如数据库的二进制数据读写或网络端 ...

  5. QGraphicsView, QGraphicsObject ,QQGraphicsSvgItem 图片接收鼠标事件 拖拉 收放

    由于项目要求,需要加载svg格式图片和pixmap图片,并根据指定坐标在图上进行勾画,并且对相应位置接收鼠标事件. -继承QGraphicsObject,实现加载pixmap的项 myimageite ...

  6. springcloud-gateway整合jwt+jcasbin实现权限控制

    jcasbin简介: jcasbin 是一个用 Java 语言打造的轻量级开源访问控制框架https://github.com/casbin/jcasbin,是casbin的Java语言版本.目前在 ...

  7. 11月9日内容总结——单例模式的多种实现方式、pickle序列号模块和选课系统

    目录 一.单例模式实现的多种方式 方式一:使用类 方法二:使用metaclass方式(自定义元类) 方法三:自定义双下new 方法四:基于模块的单例模式 二.pickle序列化模块 优势: 缺陷: 方 ...

  8. Python源文件的编码

    Python源文件的编码 入门教程->2.2.1 源文件的字符编码 参考官网:https://docs.python.org/zh-cn/3.9/tutorial/interpreter.htm ...

  9. C#IIS上传文件大小设置问题:maxRequestLength、maxAllowedContentLength

    system.web节点下的 maxRequestLength属性来指定最大上传文件的size,默认值是4M <system.web> <httpRuntime maxRequest ...

  10. P32_全局配置 - tabBar

    什么是 tabBar tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换.小程序中通常将其分为: 底部 tabBar 顶部 tabBar 注意:tabBar中只能配置最少 2 个.最多 ...