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要做一个水波纹特效,我们来看看水波纹特效的做法.首先我们来看一下水波纹特效的效果是怎么样的,请看下图. 我们要做的就是类似这种纹理特效,那么我们来看看是如何制作的吧.首先鲫 ...
随机推荐
- (7)go-micro微服务zap日志配置
目录 一 Zap日志介绍 二 Zap日志安装 三 Zap日志初始化 四 Zap日志重写方法 五 Zap日志使用 六 最后 一 Zap日志介绍 Zap是在 Go 中实现超快.结构化.分级的日志记录. Z ...
- 企业应用架构研究系列十三:整合EFCore&Dapper 通用ORM框架EFDapper
EntityFrameworkCore是微软官网提供的ORM框架,是轻量化.可扩展.开源和跨平台的数据访问技术框架,但是在.Net 开发圈的评论却褒贬不一.很多人认为EFCore 执行的效能比较差,很 ...
- vue打包---放到服务器下(一个服务器多个项目需要配置路径),以及哈希模式和历史模式的不同配置方法
哈希模式,好用,不需要服务器配合分配路径指向,自己单机就可以打开了 接下来上代码截图 接下来开始截图 历史模式 历史模式需要后端支持 打包后自己直接点击是打不开的 截图如下
- Java 进阶P-8.9+P-8.10
文件流 File Input Stream File Output Stream 对文件作读写操作 实际工程中已经较少使用 更常用的是以在内存数据或通信数据上建立的流,如数据库的二进制数据读写或网络端 ...
- QGraphicsView, QGraphicsObject ,QQGraphicsSvgItem 图片接收鼠标事件 拖拉 收放
由于项目要求,需要加载svg格式图片和pixmap图片,并根据指定坐标在图上进行勾画,并且对相应位置接收鼠标事件. -继承QGraphicsObject,实现加载pixmap的项 myimageite ...
- springcloud-gateway整合jwt+jcasbin实现权限控制
jcasbin简介: jcasbin 是一个用 Java 语言打造的轻量级开源访问控制框架https://github.com/casbin/jcasbin,是casbin的Java语言版本.目前在 ...
- 11月9日内容总结——单例模式的多种实现方式、pickle序列号模块和选课系统
目录 一.单例模式实现的多种方式 方式一:使用类 方法二:使用metaclass方式(自定义元类) 方法三:自定义双下new 方法四:基于模块的单例模式 二.pickle序列化模块 优势: 缺陷: 方 ...
- Python源文件的编码
Python源文件的编码 入门教程->2.2.1 源文件的字符编码 参考官网:https://docs.python.org/zh-cn/3.9/tutorial/interpreter.htm ...
- C#IIS上传文件大小设置问题:maxRequestLength、maxAllowedContentLength
system.web节点下的 maxRequestLength属性来指定最大上传文件的size,默认值是4M <system.web> <httpRuntime maxRequest ...
- P32_全局配置 - tabBar
什么是 tabBar tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换.小程序中通常将其分为: 底部 tabBar 顶部 tabBar 注意:tabBar中只能配置最少 2 个.最多 ...