水滴特效

本案例选自，B站-码小渣

特效展示

案例包括

water.html
water.css

代码

界面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="water.js"></script><link rel="stylesheet" href="water.css">
</head><body><div class="container"><div class="circle"><div class="wave"></div></div></div>
</body></html>

css样式

* {margin: 0;padding: 0;
}
body {height: 100vh;background: linear-gradient(rgb(95, 95, 250) 10%,rgb(3, 3, 110)); /*线性渐变色*/
}/* 提取公共代码 */
.circle,
.wave {width: 200px;height: 200px;border-radius: 50%;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}
/* 水滴 */
.circle {border: 3px solid darkturquoise;padding: 10px;
}
/* 水波 */
.wave {background: darkturquoise;overflow: hidden; /*隐藏超出部分*/
}.wave:after {content: "";width: 300px;height: 300px;background: rgba(255, 255, 255, 0.8);position: absolute;left: 50%;top: 0;transform: translate(-50%, -60%);border-radius: 40%;animation: wave 5s linear infinite; /*绑定动画 5s 匀速*/
}.wave::before {content: "waterball";position: absolute;left: 50%;top: 0;color: darkturquoise;z-index: 99;transform: translate(-50%, 30px);text-transform: uppercase;
}/* animation动画 */
@keyframes wave {100% {transform: translate(-50%, -60%) rotate(360deg); /*位置不动，360度旋转*/}
}

水滴特效（HTML + CSS）相关推荐

纯HTML、CSS写一个简单的水滴特效，水滴里面可加图标
CSS写水滴特效,里面可加图标代码如下(示例): HTML部分 <!DOCTYPE html> <html lang="en"> <head> ...
可以用php做出一个圆锥吗,用H5制作水滴特效教程
给大家带来用H5制作H5制作水滴特效教程,怎么用H5制作特效?H5制作水滴特效的流程,H5制作水滴特效的注意事项有哪些,一起来看一下. 利用canvas 画布制作逼真的水滴特效 /* NOTE: Th ...
前端入门（雷云特效，css）
(推荐个别人写的css特效网站CSS3的奇思妙想,感觉有好多蛮好玩的功能,这个特效是在里面偏下面一点的位置) (最好还是看一下动画的演示效果,直接复制粘贴就行了) 实现原理其实很简单,三个部分,云层, ...
web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
小方块上升组成背景特效 html+css+js
一.先看效果: 1024程序员节发篇文章拿个个徽章,嘿嘿 (^▽ ^ ) . 二.详细实现(后面有完整代码): 1.先定义html标签,.container就是底层大盒子,.item就是一个小方块,后 ...
文字折叠特效 html+css
效果: 实现: 1. 定义标签: <h1>aurora</h1> 2. 设置文字基本样式: h1{text-transform: uppercase;letter-spacin ...
SVG绘制文字特效 html+css
效果(源码在最后): 实现: 定义基本标签,main是底层盒子,text是文本,SVG标签用法看这里: <main><svg width="500" height ...
DNA旋转特效 html+css
效果: 实现: 1. 首先讲css的var()函数 * : 定义: 随着sass,less预编译的流行,css也随即推出了变量定义var函数.var()函数,就如同sass和less等预编译软件一样, ...
HTML5期末大作业：动漫网站设计——斗破苍穹动漫(6页)带轮播特效 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品
HTML5期末大作业:动漫网站设计--斗破苍穹动漫(6页)带轮播特效 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品大学生毕设网页 ...

水滴特效（HTML + CSS）

水滴特效

特效展示

案例包括

代码

水滴特效（HTML + CSS）相关推荐

最新文章

热门文章