共作寒梅一面妆
本帖最后由 东篱闲人 于 2022-3-28 11:11 编辑 <br /><br /><style type="text/css">/* 父框盒子 */
#xq { position: relative; left:-320px; top:120px; width: 1200px; height:800px; background-image: url('https://s1.ax1x.com/2022/03/28/qDarE6.jpg'); box-shadow: 4px 4px 5px #888; background-size: 1400px 800px; border-radius:12px; background-position: 1200px 0;animation: mv 28s linear infinite; }
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
/* 摇摆字 */
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
margin: auto;
width: 400px;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
color:#DF7401;
transform-origin: top;
animation: yao 0.8s linear infinite alternate;
}
/* 动画 */
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
/* 播放器按钮 */
.picBtn {
width: 100px;
height: 100px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('http://image.hnol.net/c/2022-02/24/15/202202241559481151-5087368.gif') no-repeat;
cursor: pointer;
}
/* 轱辘诗 */
.hxBox { position: absolute; left:220px; top:150px; width: 160px; height: 160px; font-family: '楷体','微软雅黑'; font-size: 24px;transform-origin: 50 50; animation: go 24s linear infinite;}
@keyframes go { to { transform: rotate(-360deg);} }
.hxBox path { fill: none; }
.hxBox svg { display: block; overflow: visible; }
</style>
<div id="xq" >
<div id="baiBox" style="position: absolute; left:680px; top: 80px; ">横笛和愁听，斜枝倚病看。</div>
<div class="hxBox">
<svg viewBox="0 0 100 100">
<path d="M 0, 50 a 50, 50 0 1, 1 0, 1 z" id="yuan" />
<text stroke="#B40431">
<textPath xlink:href="#yuan">
</textPath>
</text>
</svg>
</div>
<!-- 控制按钮应是父盒子的第一代子元素 -->
<div style="position:absolute; width:50px; left: 600px; top:calc(100% - 140px); text-align:center;">
<button id="picBtn" class="picBtn"></button>
</div>
</div>
<!-- 因为播放器不要界面，无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=1885426920.mp3" ></audio>
<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
mu.paused ? (mu.play(), btn.style.background="url('http://image.hnol.net/c/2022-02/24/15/202202241559481151-5087368.gif')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-02/24/16/20220224160408591-5087368.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('http://image.hnol.net/c/2022-02/24/16/20220224160408591-5087368.gif')";
});
</script>
<style>
.mvBox {
position: relative;
width: 800px;
height: 100px;
left:100px;
top:-120px;
color:#DF7401;
line-height: 40px;
font-size: 15px;
animation: mq linear 10s infinite;
}
@keyframes mq {
from { transform: translateX(200px); }
to { transform: translateX(0); }
}
</style>
<div class="mvBox">江北不如南地暖，江南好断北人肠。燕脂桃颊梨花粉，共作寒梅一面妆。</div>
<br><br><br><br><br><br><br><br>
别说，这玩意，挺好玩。。。。。{:4_170:} 本帖最后由 加林森 于 2022-3-23 11:04 编辑 <br /><br /><style type="text/css">
.fireBox {
margin: auto;
width: 500px;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 2rem;
font-weight: bold;
color: #ff0000;
background: #000;
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}
</style>
<div class="fireBox">好听好玩，老兄真会玩。</div>
<div id="txtBox" style="margin: auto; width: 400px; font-size: 1em;"></div>
<script language="javascript">
var txtBox = document.getElementById("txtBox");
var idx = 0;
var str = "老兄制作得真漂亮，完全融合了这幅图片，下面加了黑色边框就更加完美了，播放器也挺好的。";
setInterval(function(){
txtBox.innerHTML = str.substring(0, idx) + "|";
idx += 1;
if(idx > str.length) idx = 0;
}, 200);
</script>
<style>
.fsText{ /* 仿生字体*/
margin: 10px auto 0;
width: 700px;
height: 180px;
line-height: 180px;
font-family: '微软雅黑', '黑体', sans-serif;
font-size: 6rem;
color: #f1ebe5;
text-align: center;
text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
font-weight: 900;
letter-spacing: -2px;
background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);
}
</style>
<p class ="fsText">共作寒梅一面妆</p>
漂亮，又是无缝滚动图片，东篱大哥的制作真棒{:4_187:} 这个图图有意思，下半部用了同色的颜色，感觉只要上半部在滚动一样。东篱大哥又玩出了新花样{:4_187:} 加林森 发表于 2022-3-23 10:30
var txtBox = document.getElementById("txtBox");
var idx = 0;
var str = "老兄制作得真漂亮 ...
这打字速度，一般人追不上啊。。。。{:5_117:} 加林森 发表于 2022-3-23 11:07
.fsText{ /* 仿生字体*/
margin: 10px auto 0;
width: 700px;
哇，你的技术越来越全面了！{:5_116:} 红影 发表于 2022-3-23 16:00
漂亮，又是无缝滚动图片，东篱大哥的制作真棒
马马虎虎，玩呗，只要不玩命。。。。{:5_117:} 红影 发表于 2022-3-23 16:01
这个图图有意思，下半部用了同色的颜色，感觉只要上半部在滚动一样。东篱大哥又玩出了新花样
讲究和谐。。。{:5_117:} 东篱闲人 发表于 2022-3-23 18:58
这打字速度，一般人追不上啊。。。。
好玩吧{:4_189:} 东篱闲人 发表于 2022-3-23 18:58
哇，你的技术越来越全面了！
继续学习。。。。。 加林森 发表于 2022-3-23 19:05
好玩吧
厉害！{:5_112:} 加林森 发表于 2022-3-23 19:05
继续学习。。。。。
加加好帅！{:5_116:} 东篱闲人 发表于 2022-3-23 19:06
厉害！
我跟到在学习的。{:4_190:} 东篱闲人 发表于 2022-3-23 19:06
加加好帅！
老兄更加帅。。。{:4_180:} 加林森 发表于 2022-3-23 19:16
老兄更加帅。。。
老啦，帅不到哪去啦。。。{:4_170:} 东篱闲人 发表于 2022-3-23 19:23
老啦，帅不到哪去啦。。。
咱不老的，是颗万年青。。。。。{:4_189:} 加林森 发表于 2022-3-23 19:24
咱不老的，是颗万年青。。。。。
都青啦？{:5_115:}