html点击出现水滴样式,CSS水滴

最新推荐文章于 2023-10-31 10:19:27 发布
最新推荐文章于 2023-10-31 10:19:27 发布
阅读量542 收藏
点赞数
文章标签： html点击出现水滴样式

css

html, body {

margin: 0;

height: 100%;

overflow: hidden;

}

.paper {

top: 0;

left: 0;

width: 100%;

height: 100%;

position: absolute;

}

.paper::before {

content: '';

top: 0;

left: 0;

width: 100%;

height: 100%;

position: absolute;

filter: url(#paper);

}

.paper::after {

content: '';

top: 0;

left: 0;

width: 100%;

height: 100%;

position: absolute;

background-image: linear-gradient(190deg, rgba(201, 201, 201, 0.1), rgba(85, 85, 85, 0.4));

}

.dropplets {

top: 0;

left: 0;

width: 100%;

height: 100%;

transform: rotateZ(8deg);

}

.dropplet {

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

position: absolute;

}

.dropplet:nth-child(1) {

top: calc(50% - 130px);

left: calc(50% + 110px);

}

.dropplet:nth-child(1)::after {

content: '';

top: -25px;

left: -55px;

position: absolute;

width: 80px;

height: 75px;

border-radius: 50% 50% 50% 50% / 50% 50% 45% 45%;

background-image: radial-gradient(ellipse at center, white 40%, transparent 60%);

background-size: 10px 6px;

background-position: 60% 25%;

background-repeat: no-repeat;

box-shadow: inset 14px 0px 5px -10px rgba(0, 0, 0, 0.2), inset 13px 0px 2px -10px rgba(0, 0, 0, 0.2), inset 0px -3px 5px 0px rgba(250, 241, 220, 0.5), inset 0px -20px 10px 1px rgba(255, 255, 255, 0.3), inset -20px 10px 5px -20px rgba(0, 0, 0, 0.3), inset -20px 15px 10px -20px rgba(0, 0, 0, 0.2), inset 0px 20px 30px -5px rgba(0, 0, 0, 0.3), 0px 2px 1px -1px rgba(245, 227, 183, 0.8), -16px 13px 5px -20px black, 17px 13px 5px -20px black, 15px 19px 5px -20px black, -2px 34px 1px -30px rgba(0, 0, 0, 0.4), -2px 35px 3px -30px rgba(255, 255, 255, 0.3), -1px 16px 3px -5px rgba(0, 0, 0, 0.5), -1px 21px 3px -5px rgba(0, 0, 0, 0.4), 1px -1px 5px 0px rgba(50, 50, 50, 0.5);

}

.dropplet:nth-child(1)::before {

content: '';

top: -25px;

left: -55px;

position: absolute;

width: 80px;

height: 75px;

border-radius: 50% 50% 50% 50% / 50% 50% 45% 45%;

background-color: red;

filter: url(#water);

}

.dropplet:nth-child(2)::after {

content: '';

top: -25px;

left: -55px;

position: absolute;

width: 100px;

height: 80px;

border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;

background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, white 10%, white 40%, transparent 60%);

background-size: 12px 8px;

background-position: 60% 25%;

background-repeat: no-repeat;

box-shadow: inset 0px 1px 10px 0px rgba(0, 0, 0, 0.2), inset 14px 5px 2px -10px rgba(169, 168, 168, 0.7), inset 0px -3px 5px 0px rgba(250, 241, 220, 0.1), inset 0px -5px 20px 1px rgba(255, 255, 255, 0.1), inset -3px 3px 2px 0px rgba(169, 168, 168, 0.5), inset -23px 7px 2px -20px rgba(169, 168, 168, 0.3), inset -20px 15px 10px -20px rgba(0, 0, 0, 0.3), inset 0px 2px 1px 0px rgba(58, 2, 2, 0.3), inset 0px 30px 30px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px -1px rgba(245, 227, 183, 0.6), 0px 4px 2px -1px rgba(131, 131, 131, 0.5), -20px -4px 5px -20px #666666, -22px 8px 5px -20px #666666, -20px 16px 5px -20px #666666, 17px 13px 5px -20px #666666, 15px 19px 5px -20px #6c6c6c, -1px 16px 3px -5px rgba(0, 0, 0, 0.5), -1px 21px 3px -5px rgba(0, 0, 0, 0.3), 0px 0px 2px 0px rgba(0, 0, 0, 0.1);

}

.dropplet:nth-child(2)::before {

content: '';

top: -25px;

left: -55px;

position: absolute;

width: 100px;

height: 80px;

border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;

background-color: red;

filter: url(#water);

}

.dropplet:nth-child(3) {

top: calc(50% + 120px);

left: calc(50% - 80px);

}

.dropplet:nth-child(3)::after {

content: '';

top: -25px;

left: -55px;

position: absolute;

width: 120px;

height: 120px;

border-radius: 90% 60% 100% 50% / 90% 50% 100% 45%;

background-image: radial-gradient(ellipse at center, white 40%, transparent 60%);

background-size: 10px 10px;

background-position: 60% 25%;

background-repeat: no-repeat;

box-shadow: inset 13px -4px 4px -10px rgba(0, 0, 0, 0.4), inset 14px -4px 10px -10px rgba(0, 0, 0, 0.2), inset 0px -3px 10px 1px rgba(250, 241, 220, 0.8), inset 0px -15px 10px 0px rgba(0, 0, 0, 0.2), inset -20px 10px 5px -20px rgba(0, 0, 0, 0.2), inset -20px 15px 10px -20px rgba(0, 0, 0, 0.2), inset 0px 3px 2px 1px rgba(0, 0, 0, 0.2), inset 0px 30px 20px -5px rgba(0, 0, 0, 0.3), 0px 2px 1px -1px rgba(245, 227, 183, 0.8), -16px 13px 5px -20px black, 17px 13px 5px -20px black, 15px 19px 5px -20px black, -1px 16px 3px -5px rgba(0, 0, 0, 0.4), -1px 21px 3px -5px rgba(0, 0, 0, 0.3), 1px -1px 1px 0px rgba(50, 50, 50, 0.1);

}

.dropplet:nth-child(3)::before {

content: '';

top: -25px;

left: -55px;

position: absolute;

width: 120px;

height: 120px;

border-radius: 90% 60% 100% 50% / 90% 50% 100% 45%;

background-color: red;

filter: url(#water);

}

.dropplet:nth-child(4) {

top: calc(50% + 160px);

left: calc(50% + 90px);

}

.dropplet:nth-child(4)::after {

content: '';

top: -25px;

left: -55px;

position: absolute;

width: 60px;

height: 60px;

border-radius: 50%;

background-image: radial-gradient(ellipse at center, white 30%, transparent 60%);

background-size: 6px 6px;

background-position: 60% 25%;

background-repeat: no-repeat;

box-shadow: inset 15px 0px 5px -10px rgba(0, 0, 0, 0.2), inset 13px 0px 2px -10px rgba(0, 0, 0, 0.2), inset 0px -3px 5px 0px rgba(250, 241, 220, 0.5), inset 0px -20px 10px 1px rgba(255, 255, 255, 0.3), inset -23px 10px 5px -20px rgba(0, 0, 0, 0.3), inset -20px 15px 10px -20px rgba(0, 0, 0, 0.2), inset 0px 25px 20px -5px rgba(0, 0, 0, 0.3), 0px 2px 1px -1px rgba(245, 227, 183, 0.8), -17px 10px 5px -20px black, 14px 20px 5px -20px black, 16px 14px 5px -20px black, -2px 27px 5px -20px rgba(255, 255, 255, 0.3), -1px 14px 3px -5px rgba(0, 0, 0, 0.5), -1px 18px 3px -5px rgba(0, 0, 0, 0.4), 0px -1px 5px 0px rgba(85, 85, 85, 0.5);

}

.dropplet:nth-child(4)::before {

content: '';

top: -25px;

left: -55px;

position: absolute;

width: 60px;

height: 60px;

border-radius: 50%;

background-color: red;

filter: url(#water);

}

.dropplet:nth-child(5) {

top: calc(50% - 180px);

left: calc(50% - 30px);

}

.dropplet:nth-child(5)::after {

content: '';

top: -25px;

left: -55px;

position: absolute;

width: 65px;

height: 68px;

border-radius: 50% 50% 50% 50% / 50% 50% 45% 45%;

background-image: radial-gradient(ellipse at center, white 40%, transparent 60%);

background-size: 10px 6px;

background-position: 60% 25%;

background-repeat: no-repeat;

box-shadow: inset 12px 5px 5px -10px rgba(0, 0, 0, 0.3), inset 10px 5px 2px -10px rgba(0, 0, 0, 0.2), inset -1px -3px 5px 0px rgba(250, 241, 220, 0.5), inset -1px -20px 10px 1px rgba(255, 255, 255, 0.3), inset -20px 10px 5px -20px rgba(0, 0, 0, 0.4), inset -20px 15px 10px -20px rgba(0, 0, 0, 0.4), inset 0px 20px 30px -5px rgba(0, 0, 0, 0.3), 0px 2px 1px -1px rgba(245, 227, 183, 0.8), -18px 11px 5px -20px rgba(0, 0, 0, 0.9), -17px 19px 5px -20px rgba(0, 0, 0, 0.6), 17px 12px 5px -20px rgba(0, 0, 0, 0.9), 15px 18px 5px -20px rgba(0, 0, 0, 0.9), -4px 30px 1px -25px rgba(0, 0, 0, 0.4), -4px 32px 3px -25px rgba(255, 255, 255, 0.1), -1px 14px 3px -5px rgba(0, 0, 0, 0.5), -1px 19px 3px -5px rgba(0, 0, 0, 0.4), 1px -1px 5px 0px rgba(50, 50, 50, 0.5);

}

.dropplet:nth-child(5)::before {

content: '';

top: -25px;

left: -55px;

position: absolute;

width: 65px;

height: 68px;

border-radius: 50% 50% 50% 50% / 50% 50% 45% 45%;

background-color: red;

filter: url(#water);

}

.dropplet:nth-child(6) {

top: calc(50% - 60px);

left: calc(50% - 30px);

}

.dropplet:nth-child(6)::after {

content: '';

top: -25px;

left: -55px;

position: absolute;

width: 40px;

height: 40px;

border-radius: 50% 50% 50% 50% / 50% 50% 45% 45%;

background-image: radial-gradient(ellipse at center, white 40%, transparent 60%);

background-size: 5px 6px;

background-position: 60% 25%;

background-repeat: no-repeat;

box-shadow: inset 14px 0px 5px -10px rgba(0, 0, 0, 0.2), inset 13px 0px 5px -10px rgba(0, 0, 0, 0.2), inset 0px -3px 5px 0px rgba(250, 241, 220, 0.5), inset 0px -20px 10px 1px rgba(255, 255, 255, 0.3), inset -20px 10px 5px -20px rgba(0, 0, 0, 0.3), inset -20px 15px 10px -20px rgba(0, 0, 0, 0.2), inset 0px 20px 30px -5px rgba(0, 0, 0, 0.3), 0px 2px 1px -1px rgba(245, 227, 183, 0.8), -9px 10px 3px -10px rgba(0, 0, 0, 0.4), 8px 14px 2px -10px rgba(0, 0, 0, 0.2), 10px 10px 5px -10px rgba(0, 0, 0, 0.2), 1px 15px 3px -10px rgba(255, 255, 255, 0.3), -1px 14px 3px -6px rgba(0, 0, 0, 0.5), -1px 17px 3px -6px rgba(0, 0, 0, 0.2), 1px -1px 5px 0px rgba(50, 50, 50, 0.5);

}

.dropplet:nth-child(6)::before {

content: '';

top: -25px;

left: -55px;

position: absolute;

width: 40px;

height: 40px;

border-radius: 50% 50% 50% 50% / 50% 50% 45% 45%;

background-color: red;

filter: url(#water);

}

.dropplet:nth-child(7) {

top: calc(50% - 30px);

left: calc(50% - 80px);

}

.dropplet:nth-child(7)::after {

content: '';

top: -25px;

left: -55px;

position: absolute;

width: 25px;

height: 25px;

border-radius: 50% 60% 40% 70% / 50% 60% 50% 70%;

background-image: radial-gradient(ellipse at center, white 50%, transparent 50%);

background-size: 3px 3px;

background-position: 60% 25%;

background-repeat: no-repeat;

box-shadow: inset 10px 10px 5px -10px rgba(0, 0, 0, 0.2), inset 10px 10px 2px -10px rgba(0, 0, 0, 0.2), inset 1px -3px 5px 0px rgba(250, 241, 220, 0.5), inset 1px -20px 10px 1px rgba(255, 255, 255, 0.3), inset -20px 15px 5px -20px rgba(0, 0, 0, 0.3), inset -20px 15px 10px -20px rgba(0, 0, 0, 0.2), inset 0px 20px 30px -5px rgba(0, 0, 0, 0.3), -1px 2px 1px -1px rgba(245, 227, 183, 0.8), -1px 5px 2px 0px rgba(0, 0, 0, 0.8), 1px -1px 5px 0px rgba(0, 0, 0, 0.2);

}

.dropplet:nth-child(7)::before {

content: '';

top: -25px;

left: -55px;

position: absolute;

width: 25px;

height: 25px;

border-radius: 50% 60% 40% 70% / 50% 60% 50% 70%;

background-color: red;

filter: url(#water);

}

.dropplet:nth-child(8) {

top: calc(50% + 20px);

left: calc(50% - 80px);

}

.dropplet:nth-child(8)::after {

content: '';

top: -25px;

left: -55px;

position: absolute;

width: 45px;

height: 45px;

border-radius: 60% 50% 60% 50% / 60% 50% 60% 50%;

background-image: radial-gradient(ellipse at center, white 50%, transparent 60%);

background-size: 4px 4px;

background-position: 60% 25%;

background-repeat: no-repeat;

box-shadow: inset 14px 0px 5px -10px rgba(0, 0, 0, 0.2), inset 13px 0px 2px -10px rgba(0, 0, 0, 0.2), inset 0px -3px 5px 0px rgba(250, 241, 220, 0.5), inset 0px -20px 10px 1px rgba(255, 255, 255, 0.3), inset -20px 10px 5px -20px rgba(0, 0, 0, 0.3), inset -20px 15px 10px -20px rgba(0, 0, 0, 0.2), inset 0px 20px 30px -5px rgba(0, 0, 0, 0.3), 0px 2px 1px -1px rgba(245, 227, 183, 0.8), -17px 16px 5px -20px black, -18px 10px 5px -20px black, 19px 10px 5px -20px black, 16px 15px 5px -20px black, 14px 20px 5px -20px black, -4px 19px 3px -17px white, -1px 13px 3px -5px rgba(0, 0, 0, 0.5), -1px 15px 3px -5px rgba(0, 0, 0, 0.4), 1px -1px 5px 0px rgba(0, 0, 0, 0.3);

}

.dropplet:nth-child(8)::before {

content: '';

top: -25px;

left: -55px;

position: absolute;

width: 45px;

height: 45px;

border-radius: 60% 50% 60% 50% / 60% 50% 60% 50%;

background-color: red;

filter: url(#water);

}

@media only screen and (max-width: 800px) {

.dropplets {

transform: scale(0.5);

}

}

/*

* uncomment the following css to remove filters

* but it will look lame :)

*/

.no-filter {

width: 100%;

height: 100%;

/*

.paper::before {

display: none;

}

.dropplet::before {

display: none;

}

*/

}

jck?????
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 输入框 取消,取消input默认提示框
weixin_35756892的博客
06-04 2448
当我们写前端搜索框的时候并没有用前端框架 利用Ajax 技术查询 并与自定义div结合 这时候会遇到 input 有默认的提示框 提示框主要负责 提示之前input的输入记录所以 此时 需要我们将 原生的 input 框取消在使用input输入框过程中，一般都会都自动保存记忆这个功能，双击的时候之前输入的内容会在下拉框自动提示。如果不想要这个功能，加一句代码就可以了。autocomplete="o...
使用css实现水珠/水滴效果
公众号 @ 桃小瑞
12-07 1586
使用 css 实现水珠/水滴效果
神奇的css（动态水滴）
m0_58730471的博客
10-28 669
动态水滴
web点击页面出现图案（小星星）
Mellivora9527的博客
09-01 711
<style type="text/css"> 设置页面样式： *{ margin: 0;padding: 0; } body{ position: relative; } img{ position: absolute; } </st...
html小样式调整
love_yourself_ok的博客
12-25 96
html小样式调整 input聚焦时去掉自带的边框样式 input:focus{outline:none;} 关闭浏览器自带的搜索框历史记录 <input type"text" autocomplete="off"> 去除滚动条宽度 #wrapper::-webkit-scrollbar{width: 0;}
纯CSS样式透明水滴文字特效
07-24
纯CSS样式透明水滴文字特效是一款使用css创建两个透明的水滴，蓝色系的水滴文字背景特效。
前端登录模板html+css漂亮的水滴登录页
10-24
好看酷炫的水滴登录页，拿去即用
CSS水滴动效.html
08-13
CSS水滴效果
css3 svg逼真水滴特效
07-24
css3 svg逼真水滴特效是一款基于css3 svg实现的透明水滴，地面上的水珠特效。
纯CSS实现的水滴效果
12-04
CSS实现水滴效果，参看https://blog.csdn.net/m0_63452347/article/details/128127888
HTML5 Canvas实现水滴效果代码.zip
07-05
HTML5 Canvas实现水滴效果代码是一款惊艳的Canvas水滴效果，双击可以把水滴分离；拖放到一起可以融合；晃动浏览器可以让水滴跳动；键盘左右键可以切换皮肤；上下键可以变换大小。
纯css实现Material Design中的水滴动画按钮
12-13
前言 大家平时应该经常见到这种特效，很炫酷不是吗 这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已有的项目中，可能只是想加一个这样的按钮，来增强用户体验，这些js库就显得有些过于庞大了，同时由于是js实现，很多时候还要注意加载问题。 那么，有没有办法用css来实现这一特效呢？ 思路 其实就是一个动画，一个正圆从小变大，用css3中的动画很容易实现 示例代码 @keyframes ripple{ from { transform: scale(0); opa
border_radius属性画出水滴样式
01-30
border_radius属性画出水滴样式
HTLML+CSS实现水滴和水涌动效果
卷不动，许多愁
12-05 789
探究前端纯HTML+CSS实现水滴和水涌动特效的代码原理，实现简单，效果很赞
css特效之水滴效果
qq_46063425的博客
08-18 982
css特效之水滴效果 想看看效果： html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="index.css"/> </head> <body> <div class="contain
web——css样式——水滴效果
最新发布
weixin_58474273的博客
10-31 167
【代码】web——css样式——水滴效果。
CSS代码实现水滴效果
6891hxiL的专栏
09-12 155
【代码】CSS代码实现水滴效果。
css加载动画（水滴效果）
qq_25294327的博客
06-16 407
原理是先blur模糊处理，让物体边界重叠，再提高对比度，这样模糊边界就会变清晰。直接用filter自带的属性也可以实现，但调用svg滤镜效果会更好。最终实现效果视频可以看我Dou音，DY号：G_console。
水滴特效（HTML + CSS）
Luis
05-12 2314
水滴特效 本案例选自，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>Docume
css水滴波纹效果html,CSS实现水波纹进度效果
05-22
实现水波纹效果可以使用CSS3的animation和transform属性，代码如下： HTML代码： ``` <div class="circle"></div> ``` CSS代码： ``` .circle { width: 200px; height: 200px; background-color: #008CBA; border-radius: 50%; position: relative; } .circle:before { content: ""; display: block; padding-top: 100%; } .circle:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: radial-gradient(circle, #fff 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform 0.5s, opacity 1s; } .circle:hover:after { transform: scale(50, 50); opacity: 0.5; transition: transform 0.5s, opacity 1s; } ``` 这个例子中，我们创建了一个圆形的div元素，并使用伪元素:before来创建一个正方形的占位符，以便让它的高度与宽度相等。然后使用伪元素:after来创建水波纹效果，使用CSS3的radial-gradient属性来创建一个白色圆形，并将它的透明度设置为0.01%。然后通过:hover伪类来触发水波纹效果的动画。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值