【学习帖】金秋十月
本帖最后由 千羽 于 2022-3-28 23:29 编辑 <br /><br /><style type="text/css">/* 帖子容器 */
#tzDiv {
position: relative;
left: -304px;
width: 1200px;
height: 670px;
top: 80px;
background: #eee url('http://img.wyc520.com.cn/data/attachment/forum/202203/28/205109uf8o0qvxyz5v8d3g.jpg') no-repeat center/cover; 图
opacity: 0.95;
box-shadow: 4px 4px 5px #888;border-radius:12px;
}
/* 音乐控制按钮 */
.picBtn {
position: absolute;
width: 100px;
height: 100px;
left: -500px;
top: 300px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('https://pic.imgdb.cn/item/6240263827f86abb2aab60f0.gif') no-repeat;
cursor: pointer;
}
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
margin: auto;
width: 360px;
text-align: center;
font-size: 3rem;
font-weight: bold;
color: #A7F394;
transform-origin: top;
animation: yao 0.8s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
/* 动图定位 */
.dongtu {
position: absolute;left:520px; top: 150px; width:400px;
width: 312px;
height: 224px;
left: 580px;
top: 250px;
}
/* 走马灯父框 */
.txtFly {
position: absolute;
width: 260px;
height: 230px;
left: 120px;
top: 312px;
overflow: hidden;
}
/* 走马灯文本 */
.txtFly div {
position: absolute;
left: 260px;
font: normal 18px /20px Sans-Serif;
word-break: keep-all;
white-space:nowrap;
}
.myBall2 {
margin: 10px auto 0;
width: 418px;
height: 418px;
border-radius: 50%;
opacity: .7;
position: absolute;
left: 176px;
top:157px;
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
animation: turn 2s linear infinite;
}
@keyframes turn {
to { transform: rotate(-1turn); }
}
</style>
<div id="tzDiv">
<div id="baiBox" style="position: absolute; left:100px; top: 60px; ">金秋十月</div>
<div class="myBall2"></div>
<div class="dongtu">
<img alt="" src="http://image.hnol.net/c/2020-12/25/09/20201225093830451-5088534.gif"/>
<div class="txtFly">
<div id="ziFly">不问沧桑不问悲凉依一处淡暖看秋水云长 </div></div>
<button id="picBtn" class="picBtn"></button>
<audio id="music" src="http://music.163.com/song/media/outer/url?id=30031048.mp3" loop="loop" autoplay="autoplay" ></audio>
</div><br><br><br><br><br>
<script language="javascript">
fly();
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/6240263827f86abb2aab60f0.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/6240261d27f86abb2aaacaf3.png')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://pic.imgdb.cn/item/6240261d27f86abb2aaacaf3.png')";
});
//创建走马灯
function fly() {
var ziFly = document.getElementById('ziFly');
var width = ziFly.clientWidth;
var style = document.createElement('style');
style.type = 'text/css';
var flyStr = '@keyframes fly {to { left: -' + width + 'px; } }';
style.innerHTML = flyStr;
ziFly.appendChild(style);
ziFly.style.animation = 'fly 40s linear infinite';
}
setInterval(function() {
let c1 = `#${Math.random().toString(16).substr(-6)}`;
let c2 = `#${Math.random().toString(16).substr(-6)}`;
document.querySelector('.myBall2').style.background = `linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}, 2000);
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br> 千羽，，修改一下代码，我这里没有办法评分了。有点变形了。 本帖最后由 千羽 于 2022-3-28 21:11 编辑
加林森 发表于 2022-3-28 21:07
千羽，，修改一下代码，我这里没有办法评分了。有点变形了。
队长，我点不动，{:4_181:}，没法修改 千羽的图片总是那么靓丽了{:4_204:} 绿叶清舟 发表于 2022-3-28 21:11
千羽的图片总是那么靓丽了
清舟，代码乱了，能修改下吗？ 千羽 发表于 2022-3-28 21:09
队长，我点不动，，没法修改
喊红影帮忙啊。 加林森 发表于 2022-3-28 21:14
喊红影帮忙啊。
没见到影子，清舟在呢{:4_173:} 千羽 发表于 2022-3-28 21:15
没见到影子，清舟在呢
影子在的。我喊你喊@红影 加林森 发表于 2022-3-28 21:18
影子在的。我喊你喊@红影
好的，谢谢队长{:4_187:} 千羽 发表于 2022-3-28 21:19
好的，谢谢队长
嗯嗯，再呼唤@红影 加林森 发表于 2022-3-28 21:20
嗯嗯，再呼唤@红影
估计影子在忙呢{:4_181:} 千羽 发表于 2022-3-28 21:22
估计影子在忙呢
她正在回帖呢。 加林森 发表于 2022-3-28 21:25
她正在回帖呢。
嗯，慢慢来{:4_173:} 千羽 发表于 2022-3-28 21:27
嗯，慢慢来
不急的，你先看看另外的帖子。我今天制作了几个好玩的出来，你帮着我看看，有什么给我提点建议哈。 加林森 发表于 2022-3-28 21:18
影子在的。我喊你喊@红影
来 了。我来试试。。。。 千羽 发表于 2022-3-28 21:13
清舟，代码乱了，能修改下吗？
把宽度改小点 评分就出来了 小千羽制作真漂亮，音画融合的真棒！赞！
{:4_187:}{:4_190:} 红影 发表于 2022-3-28 21:45
来 了。我来试试。。。。
好的好的 红影 发表于 2022-3-28 21:45
来 了。我来试试。。。。
真不好意思，又乱码了……谢谢影子{:4_185:} 很漂亮呵，喜欢的，修改干嘛呀。{:4_187:} 大猫咪 发表于 2022-3-28 21:46
把宽度改小点 评分就出来了 小千羽制作真漂亮，音画融合的真棒！赞！
影子在帮我修改那{:4_181:}