恋晴恋雨又恋歌
本帖最后由 梦风雨 于 2024-6-22 23:14 编辑 <br /><br /><style type="text/css">.fSet {
color:#eee;
font-family:'微软雅黑','宋体','新宋体';
font-size:40px;
font-weight:bold;
line-height:100px;
text-align:center;
border-radius:50%;
text-shadow:1px 1px #000,1px 1px #111,1px 1px #222,1px 1px #333,1px 1px #444,1px 1px #555;
position:absolute;
left:0px;
top:0px;
}
.iMov {
width:100px;
height:100px;
background:red;
animation:iGo linear 10s infinite;
}
.hMov {
width:100px;
height:100px;
background:darkred;
animation:iGo linear 12s infinite;
}
.yMov {
width:100px;
height:100px;
background:green;
animation:yGo linear 10s infinite;
}
.sMov {
width:100px;
height:100px;
background:coral;
animation:yGo linear 15s infinite;
}
@keyframes iGo { /* 顺时针路线 */
0%,100% { transform:translate(calc(50vw - 120px),0px); }
25% { transform:translate(calc(100vw - 120px),calc(50vh - 100px)); }
50% { transform:translate(calc(50vw - 120px),calc(100vh - 120px)); }
75% { transform:translate(0px,calc(50vh - 120px)); }
}
@keyframes yGo { /* 逆时针路线 */
0%,100% { left:calc(50vw - 120px); top:0px; }
25% { left:0px; top:calc(50vh - 120px); }
50% { left:calc(50vw - 120px); top:calc(100vh - 120px); }
75% { left:calc(100vw - 120px); top:calc(50vh - 120px); }
}
</style>
<div class="fSet yMov">周</div>
<div class="fSet sMov">六</div>
<div class="fSet iMov">听</div>
<div class="fSet hMov">歌</div>
本帖最后由 梦风雨 于 2024-6-22 23:06 编辑 <br /><br />
<style>
#tz { margin: 20px auto; width: 1202px; height: 676px; background: url('https://bohann.net/data/attachment/forum/202406/17/210427vkt7a8l15a9p7898.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; z-index: 1; position: relative; }
#tz::before { content: attr(data-lrc); position: absolute; left: 20px; top: 20px; width: 60px; height: 95%; writing-mode: vertical-rl; font: bold 32px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to bottom, cyan, lightgreen, green, lightgreen, cyan) 50%/60px 200px; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px black); }
#player { position: absolute; left: calc(50% - 30px); bottom: 15px; width: 60px; height: 60px; cursor: pointer; animation: rot 6s linear infinite var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% +60px); object-fit: cover; mix-blend-mode: screen; opacity: .5; pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes swear {
from { transform: perspective(400px) rotateY(20deg); }
to { transform: perspective(400px) rotateY(-20deg); }
}
</style>
<div id="tz" data-lrc="如愿">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1884587759.mp3" autoplay="" loop=""></audio>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/a2209b9e54d8030a565e4e457af43d02_preview.mp4" autoplay="" loop="" disablepictureinpicture="" muted=""></video>
<img id="player" title="播放/暂停" alt="" src="https://638183.freep.cn/638183/t23/btn/disc.png"></div>
= [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
]; 那几个文字圆环怎么跑那么上面啊{:4_173:} 好听的歌儿，欣赏梦风雨好帖{:4_187:} 本帖最后由 梦风雨 于 2024-6-23 09:31 编辑
红影 发表于 2024-6-22 23:47
那几个文字圆环怎么跑那么上面啊
跑的比我快。{:4_177:} 红影 发表于 2024-6-22 23:48
好听的歌儿，欣赏梦风雨好帖
分享临帖歌曲。{:4_191:} 本帖最后由 梦风雨 于 2024-6-23 09:34 编辑 <br /><br /><style>
#mydiv {
margin: 20px auto;
width: 700px;
min-height: 400px;
border-radius: 16px;
border: 3px dotted purple;
background: #eee;
padding: 20px;
position: relative;
--state: paused;
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
}
#mydiv::before {
width: 50px;
height: 50px;
left: calc(50% - 25px);
bottom: 10px;
border-radius: 50%;
background: conic-gradient(teal,rebeccapurple,purple,tan);
-webkit-mask: radial-gradient(transparent 3px, red 0);
box-shadow: 0 0 4px gray;
cursor: pointer;
animation: rot 6s infinite linear var(--state);
}
#mydiv::after {
content: '恋晴恋雨又恋歌';
left: 50%;
top: -22px;
transform: translate(-50%);
background: linear-gradient(purple,rebeccapurple);
clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
font: bold 24px/40px sans-serif;
text-shadow: 1px 1px 2px #000;
color: #ccc;
padding: 0 40px;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<p>恋晴恋雨又恋歌</p>
</div>
<audio id="aud" src="" autoplay="autoplay" loop="loop"></audio>
梦风雨 发表于 2024-6-22 23:21
= [
,
,
你辛苦了！ 梦油 发表于 2024-6-23 09:36
你辛苦了！
我不会，只是看到，也不会运用。{:4_191:} 本帖最后由 梦风雨 于 2024-6-23 10:19 编辑 <br /><br /><svg width="700px" height="400px">
<text x="10" y="80" font-family="MicrosoftYahei" font-weight="900" font-size="50" stroke-width="2" stroke="red" fill="none" dy="20 40 30 0 -20 -30 10">
恋晴恋雨又恋歌
</text>
</svg> 梦风雨 发表于 2024-6-23 09:24
分享临帖歌曲。
这个弄到一起会很漂亮呢{:4_187:} 梦风雨 发表于 2024-6-23 09:23
跑的比我快。
哈哈，这回复真好玩{:4_173:} 红影 发表于 2024-6-23 11:09
这个弄到一起会很漂亮呢
8楼播放器不会，着急了。{:4_170:} 红影 发表于 2024-6-23 11:10
哈哈，这回复真好玩
哈哈，好心情，拥有好时光。{:4_191:} 这歌第一次听呢，很好听！ 梦风雨 发表于 2024-6-23 09:39
我不会，只是看到，也不会运用。
用的很好啊！ 友昕 发表于 2024-6-23 13:44
这歌第一次听呢，很好听！
王菲唱的一首歌曲，问好友昕 。祝每天开心。{:4_191:} 梦油 发表于 2024-6-23 14:34
用的很好啊！
多谢临帖鼓励支持。{:4_191:} 梦风雨 发表于 2024-6-23 09:39
我不会，只是看到，也不会运用。
慢慢来，你会越做越好。
页:
[1]
2