直道相思了无益
本帖最后由 东篱闲人 于 2023-2-14 22:31 编辑 <br /><br /><style type="text/css">/* 父框盒子 */
#xq { position: relative; left:-400px; top:120px; width: 1400px; height:800px; background-image: url('https://pic.imgdb.cn/item/63eb7263f144a01007b7a72e.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.2rem;
font-weight: bold;
color:#CDCDB4;
transform-origin: top;
animation: yao 0.7s 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: 20px;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% - 120px); 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=562699217.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: 1000px;
height: 100px;
left:50px;
top:-70px;
color:#CDCDB4;
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> 给我耳目一新的感觉，学习了，欣赏了！
庶民 发表于 2023-2-15 07:55
给我耳目一新的感觉，学习了，欣赏了！
{:4_180:} 欣赏老师佳作！ 漂亮的滚动图片效果，内容淡雅精致。欣赏东篱大哥好帖{:4_187:} 海笑 发表于 2023-2-15 09:55
欣赏老师佳作！
{:4_176:} 红影 发表于 2023-2-15 10:02
漂亮的滚动图片效果，内容淡雅精致。欣赏东篱大哥好帖
来，喝点水。。。{:4_180:} 图图的上下边框要是留在背景上不动，光是里面的内容在动，会不会更好点。超出图片的滚动字也看到了，加一句overflow: hidden;就看不到啦{:4_204:} 红影 发表于 2023-2-15 10:05
图图的上下边框要是留在背景上不动，光是里面的内容在动，会不会更好点。超出图片的滚动字也看到了，加一句 ...
不懂代码。。。{:5_103:} 东篱闲人 发表于 2023-2-15 10:06
不懂代码。。。
刚才跑进帖子里去看，发现我弄错了，是整个底图在动，还以为你让框里的东西在走呢{:4_173:} 东篱闲人 发表于 2023-2-15 10:04
来，喝点水。。。
相思无益，缺有那么多人害相思呢，比如东篱大哥{:4_173:} 红影 发表于 2023-2-15 21:03
相思无益，缺有那么多人害相思呢，比如东篱大哥
往事已尘埃,难遣襟怀，断肠春尽几回哀。 我是浮萍谁是我?辗转徘徊。。。。 东篱闲人 发表于 2023-2-17 20:09
往事已尘埃,难遣襟怀，断肠春尽几回哀。 我是浮萍谁是我?辗转徘徊。。。。
咋整得这么凄凄惨惨戚戚的，是谁让东篱大哥如此伤怀啊{:4_173:} 红影 发表于 2023-2-17 21:30
咋整得这么凄凄惨惨戚戚的，是谁让东篱大哥如此伤怀啊
俺不能告诉你。。。。{:5_157:} 东篱闲人 发表于 2023-2-17 22:00
俺不能告诉你。。。。
可怜的，你这么伤怀，人家知道么。 红影 发表于 2023-2-17 22:19
可怜的，你这么伤怀，人家知道么。
你猜。。。{:5_117:} 东篱闲人 发表于 2023-2-17 22:22
你猜。。。
估计不知道，你白伤心了{:4_173:} 红影 发表于 2023-2-18 10:48
估计不知道，你白伤心了
{:4_181:}
页:
[1]