大家吃葡萄了（学习黑黑时光停止效果）
<style>#papa {
--state: running;
margin: 80px 0 0 calc(50% - 593px);
width: 1080px;
height: 785px;
background: #3D255A url('https://pic.imgdb.cn/item/63ea3ab44757feff330a18b3.jpg') no-repeat center/cover;
box-shadow: 6px 3px 20px #000;
position: relative;
z-index: 1;
}
.clock {
position: absolute;
width: 100px;
}
.clock:nth-of-type(2) {
transform: translate(100px,40px) scale(0.5) rotate(-15deg);
}
.clock:nth-of-type(3) {
transform: translate(100px,190px) scale(0.8) rotate(30deg);
}
.clock:nth-of-type(4) {
width: 200px;
top: 80px;
right: 160px;
cursor: pointer;
transform-origin: 50% 0;
animation: swing .8s linear infinite alternate var(--state);
}
@keyframes swing {
from { transform: rotate(15deg); }
to { transform: rotate(-15deg); }
}
</style>
<div id="papa">
<img class="clock" src="https://pic.imgdb.cn/item/63ea3ae04757feff330b2cce.png" alt="" />
<img class="clock" src="https://pic.imgdb.cn/item/63ea3ae04757feff330b2cce.png" alt="" />
<img class="clock" src="https://pic.imgdb.cn/item/63ea3ae04757feff330b2cce.png" alt="" />
<img id="mplayer" class="clock" src="https://pic.imgdb.cn/item/63ea3ae04757feff330b2cce.png" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29806138" loop autoplay></audio>
<script>
(function() {
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
FS({pa: papa, set: 'color: snow; background: none; border: 2px solid snow; bottom: 20px; left: 50%; transform: translate(-50%);',});
})();
</script> 黑黑直接套用一个@马黑黑 大家一起吃葡萄{:4_170:} 目测，葡萄串的柄，几乎位于中心，所以：
.clock:nth-of-type(4) {
width: 200px;
top: 100px;
right: 100px;
cursor: pointer;
transform-origin: 66% 0;
animation: swing .8s linear infinite alternate var(--state);
}
红色这句，定义的是摇摆支点，可以改为 transform-origin: 50% 0;
另外，葡萄串长得比较周正，这样，关键帧动画要重新设计一下。原来的：
@keyframes swing {
to { transform: rotate(-30deg); }
}
改为：
@keyframes swing {
from { transform: rotate(15deg); }
to { transform: rotate(-15deg); }
}
亲爱的聪明，用葡萄代替怀表。这速度也太快了{:4_199:} 马黑黑 发表于 2023-2-13 21:37
目测，葡萄串的柄，几乎位于中心，所以：
.clock:nth-of-type(4) {
width: 200px;
我修改现在的不行？ 马黑黑 发表于 2023-2-13 21:41
另外，葡萄串长得比较周正，这样，关键帧动画要重新设计一下。原来的：
@keyframes swing {
我还特别上去了20 感觉太下面了{:4_203:} 小辣椒 发表于 2023-2-13 22:02
我修改现在的不行？
可以修改的 小辣椒 发表于 2023-2-13 22:03
我还特别上去了20 感觉太下面了
本地满满调好再说。
用我的建议，调整好，葡萄出不离枝 马黑黑 发表于 2023-2-13 21:37
目测，葡萄串的柄，几乎位于中心，所以：
.clock:nth-of-type(4) {
width: 200px;
这个我改好了 科代表果然速度，秒出{:4_199:}{:4_187:} 马黑黑 发表于 2023-2-13 21:41
另外，葡萄串长得比较周正，这样，关键帧动画要重新设计一下。原来的：
@keyframes swing {
现在在这样有斜度不好看？我还感觉挺好的{:4_170:} 我要吃葡萄。。。。{:4_199:} 雨中悄然 发表于 2023-2-13 22:06
科代表果然速度，秒出
哈哈~~~悄然我这个是套用，是快的 风中飞尘 发表于 2023-2-13 22:20
我要吃葡萄。。。。
自己采摘，管饱{:4_170:} 小辣椒 发表于 2023-2-13 22:07
现在在这样有斜度不好看？我还感觉挺好的
也成，但不要离枝 小辣椒 发表于 2023-2-13 22:06
这个我改好了
现在效果好多了 真美，太诱人了。点赞 这串会动的葡萄肯定更甜！
抱歉，没分了！
页:
[1]
2