论坛 › 欢乐水吧 › 再看看这个水滴

马黑黑 发表于 2022-3-26 14:39

再看看这个水滴

<style>
.drop1 {
        width: 50px;
        height: 50px;
        border-radius: 0 50% 50% 50%;
        border: 1px solid magenta;
        transform: rotate(-135deg);
        margin-top: 20px;
}
.drop2 {
        width: 50px;
        height: 50px;
        border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
        transform: rotate(-45deg);
        margin-top: 20px;
}

.drop {
        background: radial-gradient(circle at 35px 40px, rgb(184,226,252), rgb(255,255,255));
}
</style>

<p>CSS代码：<br><br></p>
&lt;style&gt;<br><span style="color: red;">.drop1</span> {<br><span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;width</span>: 50px;<br><span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;height</span>: 50px;<br><span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;border-radius</span>: 0 50% 50% 50%;<br><span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;border</span>: 1px solid magenta;<br><span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;transform</span>: rotate(-135deg);<br><span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;margin-top</span>: 20px;<br>}<br><span style="color: red;">.drop2</span> {<br><span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;width</span>: 50px;<br><span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;height</span>: 50px;<br><span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;border-radius</span>: 80% 0 55% 50% / 55% 0 80% 50%;<br><span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;transform</span>: rotate(-45deg);<br><span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;margin-top</span>: 20px;<br>}<br><br><span style="color: red;">.drop</span> {<br><span style="color: blue;">&nbsp;&nbsp;&nbsp;&nbsp;background</span>: radial-gradient(circle at 35px 40px, rgb(184,226,252), rgb(255,255,255));<br>}<br>&lt;/style&gt;<br><br>
<p>HTML代码：<br><br></p>
&lt;<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"drop1"</span>&gt;&lt;<span style="color: darkred">/div</span>&gt;<br>&lt;<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"drop drop2"</span>&gt;&lt;<span style="color: darkred">/div</span>&gt;<br><br>

<p>效果看看行不行：<br></p>

<div class="drop1"></div>
<div class="drop drop2"></div>

马黑黑 发表于 2022-3-26 14:42

第一个没有着色，并且有边框，方向也不同，主要是为了让大家看看轮廓。水滴或泪滴应像下面的那样。

CSS部分可以整合，不用那么多的类选择器

红影 发表于 2022-3-26 14:51

下面这个像泪滴呢{:4_173:}

红影 发表于 2022-3-26 14:55

上面的代码简单，下面的相对复杂，但形成的线条更柔和。

马黑黑 发表于 2022-3-26 16:26

红影 发表于 2022-3-26 14:51
下面这个像泪滴呢

这是幸福的泪滴

马黑黑 发表于 2022-3-26 16:36

红影 发表于 2022-3-26 14:55
上面的代码简单，下面的相对复杂，但形成的线条更柔和。

上面那个是提供一个画形状的思路，略加修饰，效果和下面的一样

红影 发表于 2022-3-26 16:43

马黑黑 发表于 2022-3-26 16:26
这是幸福的泪滴

这样清纯，应该是仙子的泪滴{:4_173:}

红影 发表于 2022-3-26 16:45

马黑黑 发表于 2022-3-26 16:36
上面那个是提供一个画形状的思路，略加修饰，效果和下面的一样

好像上面的只是border-radius: 0 50% 50% 50%;
而下面的border-radius: 80% 0 55% 50% / 55% 0 80% 50%; 带斜杠的这个还没弄明白{:4_173:}

马黑黑 发表于 2022-3-26 17:59

红影 发表于 2022-3-26 16:45
好像上面的只是border-radius: 0 50% 50% 50%;
而下面的border-radius: 80% 0 55% 50% / 55% 0 80% 50%; ...

这个嘛，CSS里的斜杠，在border-radius这是，斜杠前的是规范水平方向四个圆角的弧度，斜杠后是规范垂直方向四个圆角的弧度，试试大概能知道

马黑黑 发表于 2022-3-26 17:59

红影 发表于 2022-3-26 16:43
这样清纯，应该是仙子的泪滴

仙子的就会更幸福了

加林森 发表于 2022-3-26 18:03

这个好玩，找一张鳄鱼图片让它哭起来。{:4_189:}

红影 发表于 2022-3-26 21:01

马黑黑 发表于 2022-3-26 17:59
这个嘛，CSS里的斜杠，在border-radius这是，斜杠前的是规范水平方向四个圆角的弧度，斜杠后是规范垂直方 ...

哦哦，还以为跟颜色一样一层层加的呢，原来是不同方向的。

红影 发表于 2022-3-26 21:01

马黑黑 发表于 2022-3-26 17:59
仙子的就会更幸福了

这个配色好美的{:4_187:}

绿叶清舟 发表于 2022-3-26 21:02

试了下没动起来啊

马黑黑 发表于 2022-3-26 21:16

绿叶清舟 发表于 2022-3-26 21:02
试了下没动起来啊

这个要动，你得加个 @keyframes 动画，再在水滴的盒子里通过 animation 调用动画。这个你都会的，想想你的船。

马黑黑 发表于 2022-3-26 21:16

红影 发表于 2022-3-26 21:01
这个配色好美的

泛一点点滥就这效果

马黑黑 发表于 2022-3-26 21:19

红影 发表于 2022-3-26 21:01
哦哦，还以为跟颜色一样一层层加的呢，原来是不同方向的。

不是啊，各有各的规矩的，你应该还有 font 语句的印象：

font: bold 14px / 15px '宋体';

这是语法糖啊，14px 是字体大小， 15px 是行高（其实就是行与行之间的距离）

绿叶清舟 发表于 2022-3-26 21:21

马黑黑 发表于 2022-3-26 21:16
这个要动，你得加个 @keyframes 动画，再在水滴的盒子里通过 animation 调用动画。这个你都会的，想想你 ...

二个都加了啊，可是没动起来想上下动的，用TOP？

红影 发表于 2022-3-26 21:21

马黑黑 发表于 2022-3-26 21:16
泛一点点滥就这效果

嗯嗯，渐变。

马黑黑 发表于 2022-3-26 21:22

红影 发表于 2022-3-26 21:21
嗯嗯，渐变。

还好吧

查看完整版本: 再看看这个水滴