炫酷 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
依序出现
.w0{
z-index: 2;
background-size: auto 106%;
animation: w 1s forwards;
} .w1{
z-index: 3;
background-size: auto 102%;
animation: w 1s .2s forwards;
} .w2{
z-index: 4;
background-size: auto 104%;
animation: w 1s .4s forwards;
} .w3{
z-index: 5;
background-size: auto 101%;
animation: w 1s .5s forwards;
} .w4{
z-index: 6;
background-size: auto 102%;
animation: w 1s .8s forwards;
} .w5{
z-index: 7;
background-size: auto 100%;
animation: w 1s 1s forwards;
}
(三)动画效果
通过@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;
}
}
(四)最终效果
炫酷 css实现水波纹的更多相关文章
- css 实现水波纹,波浪动画效果
<div class="wave"> 水波纹效果 <div class="wave1"></div> <div cla ...
- 炫酷 CSS 背景效果的 10 个代码片段
在现代网页设计中,大背景图设计非常流行.随着高清(现在是4K)显示器的出现,越来越多的网页设计师使用大背景图来填充屏幕. 因为这样可以造成很大的视觉冲击力,并有助于更好的传递所要表现的内容. 但是,如 ...
- 炫酷CSS
<!DOCTYPE html><!--To change this license header, choose License Headers in Project Propert ...
- 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 ...
- 三角函数之美-水波纹载入LoadingView
一.前言 学习是要总结的.近期几天学习了画图相关的,可是使用的机会较少,如今又快要遗忘了,这次看了水波纹的绘制.认为十分有意思,还是 把实现的方法记录下来.技术无他,为手熟尔.还是要多练习,空淡误国, ...
- 纯CSS炫酷的3D旋转
<html><head><meta charset="utf-8"><title>纯CSS炫酷的3D旋转</title> ...
- css 滚动视差 之 水波纹效果
核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上. 我们来看个例子: htm ...
随机推荐
- java RSA加密
参考了下面这个博主的文章,很有收获,简单处理后记录一下 RSA加密.解密.签名.验签的原理及方法 - PC君 - 博客园 工具类自带生成秘钥的方法,也可以用第三方工具生成秘钥 package com. ...
- pycharm下载安装与基本配置
pycharm下载安装与基本配置 1.简介 PyCharm是一种Python IDE(Integrated Development Environment,集成开发环境),带有一整套可以帮助用户在使用 ...
- 痞子衡嵌入式:盘点国内Cortex-M内核MCU厂商高主频产品(2023)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是国内Cortex-M内核MCU厂商高主频产品. 在 2021 年初痞子衡写了篇 <盘点国内Cortex-M内核MCU厂商高性能产品 ...
- 把KMP算法嚼碎了喂给你吃!(C++)
相信不少人在学数据结构的时候都被KMP算法搞的迷迷糊糊的,原理看的似懂非懂,代码写不出来,或者写出来了也不知道为什么就可以这么写.本文力求尽可能通俗详细的讲解KMP算法,让你不再受到KMP算法的困扰. ...
- Ubuntu 22.04 安装搜狗输入法
下载搜狗输入法 下载地址https://shurufa.sogou.com/linux 也可以命令下载 wget https://ime.sogouimecdn.com/202212182151/3b ...
- 代码小DEMO随笔---不经过后端接口,JS上传文件读取文件,展示到页面提供下载功能
如果文件不大的话,我们可以不经过后端的接口,直接进行文件保存与展示下载~~ 目前,IE8.Firfox.Chrome.Opera浏览器都支持这种小文件嵌入. 好处:节省了一个HTTP 请求. 坏处:就 ...
- .NET周报 【2月第1期 2023-02-04】
国内文章 .NET 入门到高级路线 https://www.cnblogs.com/hejiale010426/archive/2023/02/01/17083913.html 笔者介绍了.NET入门 ...
- Ubuntu下安装cURL库用于libcurl开发
http://archive.ubuntu.com/ubuntu/pool/main/c/curl/curl_7.22.0.orig.tar.gz 不要问我为什么,根据cURL主页的下载向导给的就是这 ...
- 在Flask中构建API接口的相关概念
在Flask中构建API接口的相关概念 重定向行为 斜杠 以下两个路由的不同之处在于是否使用尾部的斜杠. 第一个路由的URL尾部有一个斜杠,看起来就像一个文件夹,访问一个没有斜杠结尾的URL时,Fla ...
- Redis-05持久化
1 Redis持久化 RDB(Redis DataBase) AOF(Append Only File) 2 RBD 2.1 基本说明 在指定的时间间隔内将内存中的数据集快照写入磁盘文件,它恢复时将快 ...