开启生长之旅！这是我参与「日新方案 12 月更文挑战」的第3天，点击查看活动概况
前语
近期看到一个css实现水滴效果视频，本着知其然知其所以然的心思对其研讨了一番，整理了一下保姆级的border-radius教育共享给我们
了解效果
假如工作碰到有不配合的ui不愿意给你特效的gif图怎么办，我们要学会自给自足，比如我们门户网站需求一个水滴效果来展示，可是ui便是不给你图，要你自己写，这看完这篇你不就学会了吗
boder-radius
border-radius：设置元素的圆角特点，能够设置百分比也能够设置像素单位
一个参数
设置一个参数的时分代表四个角的圆角特点
// html
<div class="box"></div>
// css
.box{
width: 300px;
height: 300px;
border: 2px solid aqua;
border-radius: 50px;
}
两个参数
设置两个参数的时分，第一个参数代表：左上、右下 ，第二个参数代表：右上、左下
// html
<div class="box"></div>
// css
.box{
width: 300px;
height: 300px;
border: 2px solid aqua;
border-radius: 50px 100px;
}
三个参数
设置三个参数的时分，第一个参数代表：左上 ，第二个参数代表：右上、左下，第三个代表：右下
// html
<div class="box"></div>
// css
.box{
width: 300px;
height: 300px;
border: 2px solid aqua;
border-radius: 50px 100px 20px;
}
四个参数
设置四个参数的时分，第一个参数代表：左上 ，第二个参数代表：右上，第三个代表：右下，第四个参数代表左下
// html
<div class="box"></div>
// css
.box{
width: 300px;
height: 300px;
border: 2px solid aqua;
border-radius: 20px 60px 100px 200px;
}
其它写法
除了上面的固定的写法还有一种比较罕见的写法那便是中间用斜杠 / 切割开来，这种写法能够操控固定边的圆角, 斜杠左右都能够写四个参数
左边四个参数
左边四个参数分别代表上下两条边左右的上部分，下部分圆角
// html
<div class="box"></div>
// css
.box{
width: 300px;
height: 300px;
border: 2px solid aqua;
border-radius: 20px 40px 60px 80px / 10px;
}
右侧四个参数
// html
<div class="box"></div>
// css
.box{
width: 300px;
height: 300px;
border: 2px solid aqua;
border-radius: 20px / 40px 60px 80px 100px;
}
制作水滴
预备我们需求的盒子
<div id="water"></div>
需求的款式 (注释有解说效果),给我们引荐一个制作水滴形状的网站在这儿直接cv就行了,另外box-shadow要是还有不太了解的能够查阅一下文档看看,这儿就不做讲解了
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
background-color: #c0d12b;
/* 上面代码让盒子居中显现 */
}
#water{
width: 300px;
margin-top: 200px;
height: 300px;
/* 设置出盒子水滴形状 */
border-radius: 42% 58% 77% 23% / 40% 31% 69% 60% ;
/* 制作出水滴暗影效果 */
box-shadow: inset 10px 20px 30px rgba(0,0,0,0.5),
10px 10px 20px rgba(0,0,0,0.3),
15px 20px 30px rgba(0,0,0,0.05),
inset -10px -10px 15px rgba(255,255,255,0.8);
}
水滴高光
给水滴加上高光效果,显现更传神,这儿我们使用伪元素就能够了
#water::after{
content: '';
width: 20px;
height: 20px;
position: absolute;
top: 240px;
left: 48%;
background-color: rgba(255,255,255,0.8);
border-radius: 51% 49% 35% 65% / 40% 54% 46% 60% ;
animation: move 5s linear infinite alternate;
}
#water::before{
content: '';
width: 10px;
height: 10px;
position: absolute;
top: 265px;
left: 47%;
background-color: rgba(255,255,255,0.8);
border-radius:51% 49% 35% 65% / 59% 54% 46% 41% ;
}
水滴动画
最终加上水滴的动画
#water{
width: 300px;
margin-top: 200px;
/* */
height: 300px;
/* border: 1px solid #000; */
border-radius: 42% 58% 77% 23% / 40% 31% 69% 60% ;
box-shadow: inset 10px 20px 30px rgba(0,0,0,0.5),
10px 10px 20px rgba(0,0,0,0.3),
15px 20px 30px rgba(0,0,0,0.05),
inset -10px -10px 15px rgba(255,255,255,0.8);
animation: move 4s linear infinite alternate;
}
@keyframes move{
25%{
border-right: 32% 68% 34% 66% / 44% 18% 82% 56% ;
}
50%{
border-radius:38% 62% 21% 79% / 56% 59% 41% 44% ;
}
100%{
border-radius: 42% 58% 66% 34% / 38% 82% 18% 62% ;
}
}
完整代码
悉数代码在码上
结尾
到这儿要是还有没有学会border-radius的,麻烦你私信找我,我手摸手教你,我就不信这还有不会的
