一切如常
本帖最后由 马黑黑 于 2024-2-20 12:09 编辑 <br /><br /><style>#mydiv { margin: 0 0 0 calc(50% - 596px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/1/17u.jpg') no-repeat center/cover; border: thick inset tan; overflow: hidden; z-index: 1; pointer-events: none; position: relative; }
#mydiv::before { position: absolute; content: ''; inset: 0; transform-origin: 780px 190px; background: var(--bg); transform: scale(1) rotate(0); filter: brightness(.8); animation: flash 2s linear infinite alternate var(--state); }
#mydiv::after { position: absolute; content: ''; left: calc(50% - 100px); top: 10px; width: 140px; height: 140px; background: url('https://638183.freep.cn/638183/small/7s.png') no-repeat center/cover; filter: opacity(.7) blur(.5px); pointer-events: auto; cursor: pointer; animation: rot 5s linear infinite var(--state); }
@keyframes flash { to { transform: scale(2) rotate(10deg); filter: brightness(2); } }
@keyframes rot { to {transform: rotate(1turn); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1868421351" autoplay loop></audio>
</div>
<script>
var mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
(function() {
var bgstrAr = ['conic-gradient(at 780px 190px'];
Array.from({length: all=12}).forEach((item,key) => {
bgstrAr.push([`transparent ${key*360/all}deg,rgba(200,100,100,.1) ${key*360/all + 5}deg,transparent ${key*360/all + 10}deg`]);
});
mydiv.style.setProperty('--bg', bgstrAr.join(','));
})();
</script> 本帖最后由 马黑黑 于 2024-2-20 18:06 编辑 <br /><br /><p>以下是本地测试时的代码，与原帖代码有所出入。代码着色做了更新，访问过本坛代码着色帖子的，请按 Ctrl+F5 刷新一下：<br><br></p>
<div class="mum"><pre>
<!-- CSS代码 -->
<style>
#mydiv { margin: 20px auto; width: 1024px; height: 640px; background: url('./17u.jpg') no-repeat center/cover; border: thick inset tan; overflow: hidden; z-index: 1; pointer-events: none; position: relative; }
#mydiv::before { position: absolute; content: ''; inset: 0; transform-origin: 780px 190px; background: var(--bg); transform: scale(1) rotate(0); filter: brightness(.8); animation: flash 2s linear infinite alternate var(--state); }
#mydiv::after { position: absolute; content: ''; left: calc(50% - 100px); top: 10px; width: 140px; height: 140px; background: url('7s.png') no-repeat center/cover; filter: opacity(.7) blur(.5px); pointer-events: auto; cursor: pointer; animation: rot 5s linear infinite var(--state); }
@keyframes flash { to { transform: scale(2) rotate(10deg); filter: brightness(2); } }
@keyframes rot { to {transform: rotate(1turn); } }
</style>
<!-- HTML代码 -->
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1868421351" autoplay loop></audio>
</div>
<!-- JS代码 -->
<script>
var mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
/* 以下匿名函数生成 CSS变量 --bg 的值
--bg : 一组角向渐变值
*/
(function() {
var bgstrAr = ['conic-gradient(at 780px 190px'];
Array.from({length: all=12}).forEach((item,key) => {
bgstrAr.push([`transparent ${key*360/all}deg,rgba(200,100,100,.1) ${key*360/all + 5}deg,transparent ${key*360/all + 10}deg`]);
});
mydiv.style.setProperty('--bg', bgstrAr.join(','));
})();
</script>
</pre></div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/colorcode.js';
document.querySelector('body').appendChild(sF);
</script> 按 Ctrl+F5 刷新了一下，代码排列就很整齐了呢。黑黑真仔细{:4_187:} 阳光的光芒四射真漂亮。原来js里还要说明一次圆点位置呢{:4_187:} 伪元素下设计JS代码貌似有不一样的细节处理呢{:4_187:} 红影 发表于 2024-2-20 12:55
阳光的光芒四射真漂亮。原来js里还要说明一次圆点位置呢
JS里设置的是角向渐变的位置，这个位置的点坐标设置为和运动原点是一样的 感谢黑黑带来的新效果。{:4_199:}
还以为某些光线不动，某些转动，造成的错位效果呢，仔细看了看，原来不动的是底图的光{:4_173:} 红影 发表于 2024-2-20 13:00
伪元素下设计JS代码貌似有不一样的细节处理呢
伪元素表现出来的是可视的，除了content属性，其他的和别的元素几乎没有什么不同 红影 发表于 2024-2-20 13:04
感谢黑黑带来的新效果。
还以为某些光线不动，某些转动，造成的错位效果呢，仔细看了看，原来不 ...
动与不动交揉在一起，细看可以分出彼此 图中的阳光制作得真漂亮。 马黑黑 发表于 2024-2-20 13:04
JS里设置的是角向渐变的位置，这个位置的点坐标设置为和运动原点是一样的
嗯嗯，看到和css里的设置的位置是一样的。 马黑黑 发表于 2024-2-20 13:05
伪元素表现出来的是可视的，除了content属性，其他的和别的元素几乎没有什么不同
是的，伪元素的设置让代码更简洁。 马黑黑 发表于 2024-2-20 13:06
动与不动交揉在一起，细看可以分出彼此
是啊，这个交织很漂亮{:4_187:} 红影 发表于 2024-2-20 15:02
是啊，这个交织很漂亮
感谢认同{:4_190:} 红影 发表于 2024-2-20 15:01
是的，伪元素的设置让代码更简洁。
HTML部分代码少，CSS那么则未必 红影 发表于 2024-2-20 15:00
嗯嗯，看到和css里的设置的位置是一样的。
其实这个效果过去做过的 梦油 发表于 2024-2-20 14:29
图中的阳光制作得真漂亮。
感谢支持 马黑黑 发表于 2024-2-20 12:03
本帖最后由 马黑黑 于 2024-2-20 18:06 编辑 以下是本地测试时的代码，与原帖代码有所出入。代码着色做了 ...
二楼的代码老师简化许多，能简的都简了呀。。图片地址也简到只留标志。。。。 马黑黑 发表于 2024-2-20 16:50
其实这个效果过去做过的
这么说我想起来了。我跟的你第一个贴子里有，星空一（暖手炉的那个） 马黑黑 发表于 2024-2-20 16:50
其实这个效果过去做过的
还是今天这么放效果比较好，太阳做底图，光束转动，更真更灵动。