css实现水波纹
携手创作,共同成长!这是我参与「掘金日新计划 · 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实现水波纹的更多相关文章
- css 实现水波纹,波浪动画效果
<div class="wave"> 水波纹效果 <div class="wave1"></div> <div cla ...
- css实现水波纹效果
1. HTML 代码: <div class="example"> <div class="dot"></div> < ...
- 44、css实现水波纹效果
<div class="container"> <div class="wave"><span>50%</span&g ...
- CSS 按钮水波纹特效
/* 按钮反馈之波纹 */ .ripple { position: relative; /* overflow:hidden */ 打开注释及效果不扩散在外 } .ripple:focus{ out ...
- CSS 冲击波(水波纹)效果
<span style="font-size:18px;"><!DOCTYPE html> <html> <head> <me ...
- css 滚动视差 之 水波纹效果
核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上. 我们来看个例子: htm ...
- jquery ripples水波纹效果( 涟漪效果)
这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇 ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- HTML5 Canvas水波纹动画特效
HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...
- WebGL——水波纹特效
大家好,今天我ccentry要做一个水波纹特效,我们来看看水波纹特效的做法.首先我们来看一下水波纹特效的效果是怎么样的,请看下图. 我们要做的就是类似这种纹理特效,那么我们来看看是如何制作的吧.首先鲫 ...
随机推荐
- css预处理器scss/sass语法以及使用
scss scss在css基础语法上面增加了变量 (variables).嵌套 (nested rules).混合 (mixins).导入 (inline imports) 等高级功能,使用scss可 ...
- Java程序员用代码,计算最大公约数和最小公倍数
作者:小傅哥 博客:https://bugstack.cn 源码:https://github.com/fuzhengwei/java-algorithms 沉淀.分享.成长,让自己和他人都能有所收获 ...
- DVWA靶场实战(十)——XSS(DOM)
DVWA靶场实战(十) 五.XSS(DOM): 1.漏洞原理: XSS全称为Cross Site Scripting,由于和层叠样式表(Cascading Style Sheets,CSS)重名,所以 ...
- 12月13日内容总结——路由分发、名称空间、虚拟环境、视图层三板斧、JsonResponse对象、request对象获取文件、视图层FBV与CBV的源码剖析、模版层简介
目录 一.路由分发 二.名称空间 方式1:名称空间 方式2:别名不冲突即可 三.虚拟环境 pycharm创建虚拟环境 命令行的方式创建虚拟环境: 创建虚拟环境的命令 激活与关闭虚拟环境 四.视图层之必 ...
- KStudio-Java程序连接KingbaseES数据库异常
错误信息: --KStudio客户端工具错误信息 The conncetion attempt failed.Reason:connect time out --Java应用程序控制台日志 Cause ...
- 梳理selenium的鼠标方法
梳理selenium的鼠标方法 你需要有一定的selenium基础 基本用法 包导入 from selenium.webdriver import ActionChains 调用方式一:链式调用 ...
- 多线程之Semaphore登录限流示例
public static void main(String[] args) { //允许最大的登录数 int slots=10; ExecutorService executorService = ...
- ES字段类型
1 String ELasticsearch 5.X之后的字段类型不再支持string,由text和keyword取代,不做说明. 2 text和keyword 2.1 简介 ElasticSearc ...
- 2211-11Flask入门教程
本篇记录来自Flask入门教程 准备工作 在通过这本书学习 Flask 开发前,我假设你已经了解了 Python 和 HTML 的基础知识.如果还没有,那么可以先从下面这些在线资源入手: <使用 ...
- 安装、小demo、基本的步骤
FastAPI 有两个依赖支持: Starlette负责网络 Pydantic负责数据 安装: 安装命令 pip install fastapi FastAPI 还需要ASGI服务器,生产环境下可 ...