套一个。。。。。

东篱闲人 发表于 2022-3-21 22:20

本帖最后由东篱闲人于 2022-3-22 15:22 编辑 <br /><br /><style type="text/css">
/* 父框盒子 */
#xq { position: relative; left:-310px; top:120px; width: 1200px; height:495px; background-image: url('https://s1.ax1x.com/2022/03/21/qusxYD.jpg'); box-shadow: 4px 4px 5px #888; background-size: 1200px 495px; 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: 5.2rem;
   font-weight: bold;
   color: #B40431;
   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: 50px; top:calc(100% - 150px); 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=1886057963.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>
<br><br><br><br><br><br><br><br>

加林森 发表于 2022-3-21 22:26

老兄，把你飘荡的字体改过颜色好不好？

加林森 发表于 2022-3-21 22:28

现在看完了，在深的地方这个字体还挺好看的。{:4_199:}

东篱闲人 发表于 2022-3-21 22:29

加林森发表于 2022-3-21 22:26
老兄，把你飘荡的字体改过颜色好不好？

已经改过了，不过这个代码不咋听话，俺迷糊。。。{:5_153:}

东篱闲人 发表于 2022-3-21 22:30

加林森发表于 2022-3-21 22:28
现在看完了，在深的地方这个字体还挺好看的。

字体改成了红色，可是在帖子里没反应。。。{:5_115:}

加林森 发表于 2022-3-21 23:19

东篱闲人发表于 2022-3-21 22:30
字体改成了红色，可是在帖子里没反应。。。

这里改：

<style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-204px; top:120px; width: 1000px; height: 550px; background:#333 url('https://pic.imgdb.cn/item/623568365baa1a80aba9acc2.jpg') no-repeat center/cover; box-shadow: 4px 4px 5px #888;border-radius:12px;}
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
   margin: auto;
   width: 360px;
   text-align: center;
   font-size: 3rem;
   font-weight: bold;
   color: #EEEE00;
   transform-origin: top;
   animation: yao 0.8s linear infinite alternate;

就是这个：#EEEE00

加林森 发表于 2022-3-21 23:21

东篱闲人发表于 2022-3-21 22:29
已经改过了，不过这个代码不咋听话，俺迷糊。。。

颜色中英文对照表 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!
https://www.huachaowang.com/forum.php?mod=viewthread&tid=55905&extra=page%3D1

老黑的，你去看看。

马黑黑 发表于 2022-3-21 23:52

美就一个字

红影发表于 2022-3-22 09:26

漂亮，东篱大哥厉害，链接部位完全是无缝链接呢。构思巧妙，画面精美。给东篱大哥点赞{:4_187:}

红影发表于 2022-3-22 09:28

css中的轱辘诗那段不使用的话可以删掉，html中关于这一段也可以拿掉，这样代码就更简洁了{:4_187:}

红影发表于 2022-3-22 09:38

红影发表于 2022-3-22 09:40

有这些语句就够用了。红色调摇摆字颜色，蓝色摇摆字的位置。绿色是按钮的位置。

东篱闲人 发表于 2022-3-22 15:22

加林森发表于 2022-3-21 23:19
这里改：

嗯嗯，还是教授厉害，俺改错地方了，给整差壶了。。。。{:4_170:}

东篱闲人 发表于 2022-3-22 15:25

红影发表于 2022-3-22 09:40
有这些语句就够用了。红色调摇摆字颜色，蓝色摇摆字的位置。绿色是按钮的位置。

改成了。。。{:5_112:}

东篱闲人 发表于 2022-3-22 15:25

红影发表于 2022-3-22 09:28
css中的轱辘诗那段不使用的话可以删掉，html中关于这一段也可以拿掉，这样代码就更简洁了

谢谢，喝水。，。。。{:4_176:}

东篱闲人 发表于 2022-3-22 15:26

红影发表于 2022-3-22 09:26
漂亮，东篱大哥厉害，链接部位完全是无缝链接呢。构思巧妙，画面精美。给东篱大哥点赞

这个是练习，还没正式做呢。。。{:5_117:}

加林森 发表于 2022-3-22 16:50

东篱闲人发表于 2022-3-22 15:22
嗯嗯，还是教授厉害，俺改错地方了，给整差壶了。。。。

现在感觉漂亮了，成功！{:4_199:}

红影发表于 2022-3-22 16:55

东篱闲人发表于 2022-3-22 15:25
改成了。。。

现在的颜色好，和美女的衣服是一个色系呢，真漂亮{:4_187:}

红影发表于 2022-3-22 16:56

东篱闲人发表于 2022-3-22 15:25
谢谢，喝水。，。。。

这次的好像是酒啊，哈哈，酒比水好{:4_173:}

红影发表于 2022-3-22 16:56

东篱闲人发表于 2022-3-22 15:26
这个是练习，还没正式做呢。。。

好啊，那等着东篱大哥正式做的{:4_173:}

页: [1] 2 3

花潮论坛's Archiver

套一个。。。。。