携手创作,共同成长!这是我参与「掘金日新计划 · 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. css预处理器scss/sass语法以及使用

    scss scss在css基础语法上面增加了变量 (variables).嵌套 (nested rules).混合 (mixins).导入 (inline imports) 等高级功能,使用scss可 ...

  2. Java程序员用代码,计算最大公约数和最小公倍数

    作者:小傅哥 博客:https://bugstack.cn 源码:https://github.com/fuzhengwei/java-algorithms 沉淀.分享.成长,让自己和他人都能有所收获 ...

  3. DVWA靶场实战(十)——XSS(DOM)

    DVWA靶场实战(十) 五.XSS(DOM): 1.漏洞原理: XSS全称为Cross Site Scripting,由于和层叠样式表(Cascading Style Sheets,CSS)重名,所以 ...

  4. 12月13日内容总结——路由分发、名称空间、虚拟环境、视图层三板斧、JsonResponse对象、request对象获取文件、视图层FBV与CBV的源码剖析、模版层简介

    目录 一.路由分发 二.名称空间 方式1:名称空间 方式2:别名不冲突即可 三.虚拟环境 pycharm创建虚拟环境 命令行的方式创建虚拟环境: 创建虚拟环境的命令 激活与关闭虚拟环境 四.视图层之必 ...

  5. KStudio-Java程序连接KingbaseES数据库异常

    错误信息: --KStudio客户端工具错误信息 The conncetion attempt failed.Reason:connect time out --Java应用程序控制台日志 Cause ...

  6. 梳理selenium的鼠标方法

    梳理selenium的鼠标方法 你需要有一定的selenium基础 基本用法 包导入  from selenium.webdriver import ActionChains 调用方式一:链式调用   ...

  7. 多线程之Semaphore登录限流示例

    public static void main(String[] args) { //允许最大的登录数 int slots=10; ExecutorService executorService = ...

  8. ES字段类型

    1 String ELasticsearch 5.X之后的字段类型不再支持string,由text和keyword取代,不做说明. 2 text和keyword 2.1 简介 ElasticSearc ...

  9. 2211-11Flask入门教程

    本篇记录来自Flask入门教程 准备工作 在通过这本书学习 Flask 开发前,我假设你已经了解了 Python 和 HTML 的基础知识.如果还没有,那么可以先从下面这些在线资源入手: <使用 ...

  10. 安装、小demo、基本的步骤

    FastAPI 有两个依赖支持: Starlette负责网络 ​ Pydantic负责数据 安装: 安装命令 pip install fastapi FastAPI 还需要ASGI服务器,生产环境下可 ...