马黑黑 发表于 2022-1-16 13:42

模拟一个暂停按钮

<style type="text/css">
.btnBox {
        margin: 0 auto;
        margin-top: 60px;
        position: relative;
        background: olive;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        outline: 6px solid olive;
        outline-offset: 3px;
}

.btnBox::before {
        content: "";
        position: absolute;
        left: 45px;
        top: 40px;
        width: 10px;
        height: 40px;
        border: none;
        border-left: 10px solid #eee;
      border-right: 10px solid #eee;
}

</style>

<div class="btnBox"></div>

马黑黑 发表于 2022-1-16 13:43

现场做，没有仔细斟酌。代码如下，可根据需要修改：
<style type="text/css">
.btnBox {
        margin: 0 auto;
        margin-top: 60px;
        position: relative;
        background: olive;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        outline: 6px solid olive;
        outline-offset: 3px;
}

.btnBox::before {
        content: "";
        position: absolute;
        left: 45px;
        top: 40px;
        width: 10px;
        height: 40px;
        border: none;
        border-left: 10px solid #eee;
      border-right: 10px solid #eee;
}

</style>

<div class="btnBox"></div>

红影 发表于 2022-1-16 14:16

完全用代码做出来的，漂亮。比直接用输入法里的那个好看多了{:4_187:}

红影 发表于 2022-1-16 14:17

这样做出来的，每个细节都变得可调了，非常赞{:4_199:}

马黑黑 发表于 2022-1-16 16:59

红影 发表于 2022-1-16 14:17
这样做出来的，每个细节都变得可调了，非常赞

但也有个大问题：JS很难控制伪元素。所以这里只是演示一下效果，真正用纯CSS做JS能控制的按钮不能用伪元素，可以是多个盒子，比如三个，其中一个是父框，两个是子框。等下我去买点东西回来再试试看

马黑黑 发表于 2022-1-16 17:00

红影 发表于 2022-1-16 14:16
完全用代码做出来的，漂亮。比直接用输入法里的那个好看多了

表示播放暂停的字符外观的确不够好

小辣椒 发表于 2022-1-16 19:39

这个纯代码出来的效果真的想不到的，强大的编程效果

马黑黑 发表于 2022-1-16 19:41

小辣椒 发表于 2022-1-16 19:39
这个纯代码出来的效果真的想不到的，强大的编程效果

CSS真的很厉害的，我还用的不是很好

红影 发表于 2022-1-16 20:07

马黑黑 发表于 2022-1-16 16:59
但也有个大问题：JS很难控制伪元素。所以这里只是演示一下效果，真正用纯CSS做JS能控制的按钮不能用伪元 ...

黑黑的严谨认真的精神太赞了，方法也多。期待你的精彩{:4_187:}

红影 发表于 2022-1-16 20:08

马黑黑 发表于 2022-1-16 17:00
表示播放暂停的字符外观的确不够好

嗯，那个跟三角比起来太长了点。

小辣椒 发表于 2022-1-16 20:22

马黑黑 发表于 2022-1-16 19:41
CSS真的很厉害的，我还用的不是很好

有一次我看见朋友一面和讲这个播放器怎么样做一面编程，讲完一个播放器出来了，我真的太佩服了

马黑黑 发表于 2022-1-16 20:30

小辣椒 发表于 2022-1-16 20:22
有一次我看见朋友一面和讲这个播放器怎么样做一面编程，讲完一个播放器出来了，我真的太佩服了

高手总是有的

马黑黑 发表于 2022-1-16 20:36

红影 发表于 2022-1-16 20:08
嗯，那个跟三角比起来太长了点。

长有长的好

马黑黑 发表于 2022-1-16 20:37

红影 发表于 2022-1-16 20:07
黑黑的严谨认真的精神太赞了，方法也多。期待你的精彩

共同学习交流

小辣椒 发表于 2022-1-16 21:02

马黑黑 发表于 2022-1-16 20:30
高手总是有的

可惜他不玩了，听说后来改行了

马黑黑 发表于 2022-1-16 21:35

小辣椒 发表于 2022-1-16 21:02
可惜他不玩了，听说后来改行了

嗯，都是根据需要来

红影 发表于 2022-1-17 11:23

马黑黑 发表于 2022-1-16 20:36
长有长的好

现在的更好看。

红影 发表于 2022-1-17 11:24

马黑黑 发表于 2022-1-16 20:37
共同学习交流

我只能跟着学习，还没本事平等交流{:4_173:}

马黑黑 发表于 2022-1-17 12:12

红影 发表于 2022-1-17 11:24
我只能跟着学习，还没本事平等交流

交流是多层面的，像我对颜色、构造等等都不太懂，你们可以教我

马黑黑 发表于 2022-1-17 12:12

红影 发表于 2022-1-17 11:23
现在的更好看。

感觉好就行，反正人有高矮胖瘦
页: [1] 2 3
查看完整版本: 模拟一个暂停按钮