The Box
本帖最后由 马黑黑 于 2024-2-13 08:11 编辑 <br /><br /><style>#papa {
margin: -70px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t24/jpg/23u.jpeg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#mplayer {
position: absolute;
top: 20px;
left: calc(50% - 80px);
width: 160px;
height: 160px;
border-style: dotted double ridge;
border-color: olive green lightgreen;
border-width: 10px 20px;
border-radius: 50%;
background: url('https://638183.freep.cn/638183/t24/jpg/23u.jpeg') no-repeat center/cover;
transform-origin: 50%;
animation: borderSize .3s linear infinite alternate var(--state);
cursor: pointer;
}
@keyframes borderSize {
from { border-width: 10px 20px; border-color: olive green lightgreen; }
to { border-width: 20px 10px; border-color: red lightgreen orange; }
}
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1419317515" autoplay loop></audio>
<div id="mplayer"></div>
</div>
<script>
var mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
帖子代码
<style>
#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t24/jpg/23u.jpeg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#mplayer {
position: absolute;
top: 20px;
left: calc(50% - 80px);
width: 160px;
height: 160px;
border-style: dotted double ridge;
border-color: olive green lightgreen;
border-width: 10px 20px;
border-radius: 50%;
background: url('https://638183.freep.cn/638183/t24/jpg/23u.jpeg') no-repeat center/cover;
animation: borderSize .3s linear infinite alternate var(--state);
cursor: pointer;
}
@keyframes borderSize {
from { border-width: 10px 20px; }
to { border-width: 20px 10px; }
}
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1419317515" autoplay loop></audio>
<div id="mplayer"></div>
</div>
<script>
var mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
好看，欣赏学习了！{:4_199:} 这个有趣，我来仔细看看是怎么做的{:4_173:} 好吧，对border-style: dotted double ridge; 没看懂。主要对ridge
那么这就是3个效果，左右一致，上下不同。 原来让它的宽度变化，也能产生奇妙的变化{:4_187:} 感觉是左边为基点进行变化的，要是以图形中点为参照变化就更好了。{:4_173:}
这个只是宽度的变化，也可以宽度和颜色都让它变的吧{:4_187:} 从这个例子，感觉double满好，能保留原图的信息，剩下两个貌似不能？ 红影 发表于 2024-2-12 20:05
从这个例子，感觉double满好，能保留原图的信息，剩下两个貌似不能？
double是双实线，中间留空，所以原图能显示在夹缝中。dotted、dashed也有缝隙，也是可以的。 亦是金 发表于 2024-2-12 18:01
好看，欣赏学习了！
{:4_190:} 红影 发表于 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 {
谢谢，知道了{:4_187:} 马黑黑 发表于 2024-2-12 22:04
你设置一下 #mplayer 的运动圆点就成：
transform-origin: 50%;
这个倒是便当呢{:4_187:} 马黑黑 发表于 2024-2-12 22:06
查一下文档，非常详细：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style
嗯嗯，去学习了，那个还有示例可以看到呢，真好{:4_187:} 红影 发表于 2024-2-12 22:27
嗯嗯，去学习了，那个还有示例可以看到呢，真好
这是火狐浏览器组织维护的文档，它的文档更新节奏以w3c制定的标准为标准 红影 发表于 2024-2-12 22:24
这个倒是便当呢
这个过去就多次介绍过的