css3之水波效果
这些效果可谓多种多样,当然用canvas、svg也都能实现奈何对这些有不熟悉(尴尬),不过咱们用css来写貌似也没想象中的那么难吧。
一 悬浮球水波效果
效果图
css
.container {
width: 100px;
height: 100px;
border-radius: %;
border: 3px solid #e787e7;
background: #ffffff;
position: absolute;
top: %;
left: %;
transform: translate(-%, -%);
padding: 5px; overflow: hidden;
}
.wave {
position: relative;
width: 100px;
height: 100px;
background-image: linear-gradient(-180deg, #3b7bdb %, #4d6fdf %);
border-radius: %;
}
.wave-mask {
position: absolute;
width: 200px;
height: 200px;
top: ;
left: %;
border-radius: %;
background-color: rgba(, , , 0.9);
transform: translate(-%, -%) rotate();
animation: toRotate 10s linear -5s infinite;
z-index: ; background-color: rgba(, , , 0.9);
}
@keyframes toRotate {
% {
transform: translate(-%, -%) rotate(180deg);
}
% {
transform: translate(-%, -%) rotate(360deg);
}
}
样式不多,加入了css3动画
html
<body>
<div class="container">
<div class="wave"></div>
<div class="wave-mask"></div>
</div>
</body>
dom元素只有3个div,内容不是很复杂,想必看一下都有所了解吧
拓展
这种效果也可作为 一个 动态的进度条,这样是不是感觉很酷炫呢,下面就不放code了,补一个语言提示,我们发现在dom里蒙层节点
.wave-mask(div)的top值,可以尝试一下动态的控制(top)值,在观察一下水波球的变化,这一步不用写代码在控制台就可以实现,好了现在你也可以去尝试了
css3之水波效果的更多相关文章
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- css3的transition效果和transfor效果
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css3幻灯片换位效果
<title>css3幻灯片换位效果</title> <style type="text/css"> .flowGallery {width: ...
- iOS 水波效果
将水波效果放在子视图上,主控制器只负责加载 #import "WaveProgress.h" @interface WaveProgress () @property (nonat ...
- 第八十节,CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 ...
- html+css3实现长方体效果
网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看. 2017-07-25 21:30:23 h ...
- Css3实现波浪效果3-静态波纹
一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...
- canvas三角函数模拟水波效果
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- Unity3D Shader水波效果
水波效果 Shader "Custom/WaterWave" { Properties { _MainTex ("Base (RGB)", 2D) = &quo ...
随机推荐
- 【python爬虫】cookie & session
一.什么是cookie? cookie是指网站为了鉴别用户身份,进行会话跟踪而存储在客户端本地的数据. 二.什么是session? 本来的含义是指有始有终的一些列动作,而在web中,session对象 ...
- CF1253E Antenna Coverage(DP)
本题难点在正确性证明. 令 \(f_i\) 表示 \([1,i]\) 被全部覆盖的最小花费.答案为 \(f_m\). 首先发现,添加一个区间 \([0,0]\) 不会影响答案.所以 \(f_i\) 的 ...
- php逻辑运算符 异或
- Windows安装与配置—MongoDB
1,下载安装 打开下载链接:http://dl.mongodb.org/dl/win32/x86_64,选择后缀是2008plus-ssl-3.6.15.zip的版本,32位和64位通用. 2,安装配 ...
- SqlServer,Oracle,db2,MySql查询表索引
SqlServer1. 查询表索引 SELECT 索引名称=a.name ,表名=c.name ,索引字段名=d.name ,索引字段位置=d.colid ,c.status FROM sysinde ...
- hibernate手动设置的id无效的原因与解决方法
在使用Hibernate的过程中,发现手动设置的id(主键)无效,Hibernate仍然会在保存(调用Hibernate提供的merge()方法)的时候自动生成一个随机的id. 经过调试发现问题出在了 ...
- eclipse强行停止buliding workspace
使用Eclipse的过程中可能会遇到buliding workspace卡在一半走不动的情况. 出现这个情况往往是因为Eclipse太调皮了,需要拉出去打屁股,打一顿就好了. 开玩笑的,事实上出现这个 ...
- Java 8,Jenkins,Jacoco和Sonar进行持续集成
技术环境 在以安全与质量为主要驱动力的项目中,CI至关重要. 因此,我从我的团队开始进行"概念验证",以表明以下技术已准备好协同工作: Java 8, NetBeans 8.0 & ...
- RaiseException函数逆向
书中内容: 代码逆向: 存在一个疑问:为什么在ExceptionAddress本来是错误产生代码的地址,但这里给存入一个_RaiseException的偏移地址. 答案在下个函数中:rtlRaiseE ...
- 玩下PHP的分词,最近有这个需求
找了个地方 下载代码 我是在这里下载的 https://www.jb51.net/codes/65593.html 1 下载完毕后 打开是这样的文件 2 先把代码集成到thinkphp3.2.3里 ...