模拟一个暂停按钮

马黑黑

马黑黑

现场做，没有仔细斟酌。代码如下，可根据需要修改：

1. <style type="text/css">
   
2. .btnBox {
   
3.         margin: 0 auto;
   
4.         margin-top: 60px;
   
5.         position: relative;
   
6.         background: olive;
   
7.         width: 120px;
   
8.         height: 120px;
   
9.         border-radius: 50%;
   
10.         outline: 6px solid olive;
    
11.         outline-offset: 3px;
    
12. }
    
13. 
    
14. .btnBox::before {
    
15.         content: "";
    
16.         position: absolute;
    
17.         left: 45px;
    
18.         top: 40px;
    
19.         width: 10px;
    
20.         height: 40px;
    
21.         border: none;
    
22.         border-left: 10px solid #eee;
    
23.         border-right: 10px solid #eee;
    
24. }
    
25. 
    
26. </style>
    
27. 
    
28. <div class="btnBox"></div>

复制代码

红影

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

红影

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

马黑黑

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

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

马黑黑

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

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

小辣椒

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

马黑黑

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

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

红影

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

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

红影

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

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

小辣椒

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

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

马黑黑

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

高手总是有的

马黑黑

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

长有长的好

马黑黑

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

共同学习交流

小辣椒

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

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

马黑黑

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

嗯，都是根据需要来

红影

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

现在的更好看。

红影

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

我只能跟着学习，还没本事平等交流

马黑黑

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

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

马黑黑

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

感觉好就行，反正人有高矮胖瘦