The Box

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: 0 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         background: url('https://638183.freep.cn/638183/t24/jpg/23u.jpeg') no-repeat center/cover;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         position: relative;
   
9.         z-index: 1;
   
10. }
    
11. #mplayer {
    
12.         position: absolute;
    
13.         top: 20px;
    
14.         left: calc(50% - 80px);
    
15.         width: 160px;
    
16.         height: 160px;
    
17.         border-style: dotted double ridge;
    
18.         border-color: olive green lightgreen;
    
19.         border-width: 10px 20px;
    
20.         border-radius: 50%;
    
21.         background: url('https://638183.freep.cn/638183/t24/jpg/23u.jpeg') no-repeat center/cover;
    
22.         animation: borderSize .3s linear infinite alternate var(--state);
    
23.         cursor: pointer;
    
24. }
    
25. @keyframes borderSize {
    
26.         from { border-width: 10px 20px; }
    
27.         to { border-width: 20px 10px; }
    
28. }
    
29. </style>
    
30. 
    
31. <div id="papa">
    
32.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1419317515" autoplay loop></audio>
    
33.         <div id="mplayer"></div>
    
34. </div>
    
35. 
    
36. <script>
    
37. var mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
38. aud.addEventListener('pause', mState);
    
39. aud.addEventListener('playing',mState);
    
40. mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
41. </script>

复制代码

亦是金

好看，欣赏学习了！

红影

这个有趣，我来仔细看看是怎么做的

红影

好吧，对border-style: dotted double ridge; 没看懂。主要对ridge
那么这就是3个效果，左右一致，上下不同。

红影

原来让它的宽度变化，也能产生奇妙的变化

红影

感觉是左边为基点进行变化的，要是以图形中点为参照变化就更好了。

红影

这个只是宽度的变化，也可以宽度和颜色都让它变的吧

红影

从这个例子，感觉double满好，能保留原图的信息，剩下两个貌似不能？

马黑黑

红影 发表于 2024-2-12 20:05
从这个例子，感觉double满好，能保留原图的信息，剩下两个貌似不能？

double是双实线，中间留空，所以原图能显示在夹缝中。dotted、dashed也有缝隙，也是可以的。

马黑黑

亦是金 发表于 2024-2-12 18:01
好看，欣赏学习了！

马黑黑

红影 发表于 2024-2-12 20:04
这个只是宽度的变化，也可以宽度和颜色都让它变的吧

可以，你加在 @keyframes 里就好：

@keyframes borderSize {
        from { border-width: 10px 20px; border-color: olive green lightgreen; }
        to { border-width: 20px 10px; border-color: red orange navy; }
}

马黑黑

红影 发表于 2024-2-12 20:04
感觉是左边为基点进行变化的，要是以图形中点为参照变化就更好了。

你设置一下 #mplayer 的运动圆点就成：

transform-origin: 50%;

马黑黑

红影 发表于 2024-2-12 19:58
好吧，对border-style: dotted double ridge; 没看懂。主要对ridge
那么这就是3个效果，左右一致，上下不 ...

查一下文档，非常详细：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style

红影

马黑黑 发表于 2024-2-12 22:02
double是双实线，中间留空，所以原图能显示在夹缝中。dotted、dashed也有缝隙，也是可以的。

但是那两种看不出来。

红影

马黑黑 发表于 2024-2-12 22:03
可以，你加在 @keyframes 里就好：

@keyframes borderSize {

谢谢，知道了

红影

马黑黑 发表于 2024-2-12 22:04
你设置一下 #mplayer 的运动圆点就成：

transform-origin: 50%;

这个倒是便当呢

红影

马黑黑 发表于 2024-2-12 22:06
查一下文档，非常详细：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style

嗯嗯，去学习了，那个还有示例可以看到呢，真好

马黑黑

红影 发表于 2024-2-12 22:27
嗯嗯，去学习了，那个还有示例可以看到呢，真好

这是火狐浏览器组织维护的文档，它的文档更新节奏以w3c制定的标准为标准

马黑黑

红影 发表于 2024-2-12 22:24
这个倒是便当呢

这个过去就多次介绍过的