css实现水波纹

简介: 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;
}
复制代码

(四)最终效果

image.png

图片实现水波纹

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

<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;
    }
}

(四)最终效果

image.png

最后分享 程序员 面试题库

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

地址:前端面试题库

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

地址:前端技术导航大全

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

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

相关文章
|
前端开发
CSS 水波纹对号,错号
CSS 水波纹对号,错号
96 1
|
前端开发
前端知识笔记(三十一)———css实现水波纹效果(水球图)
前端知识笔记(三十一)———css实现水波纹效果(水球图)
645 0
|
4月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
4月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
4月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
4月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
4月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
4月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 7
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改