学习老黑书页代码
本帖最后由 大猫咪 于 2022-5-4 13:13 编辑 <br /><br /><style>.bkBox {
margin: auto;
width: 600px;
height: 400px;
padding: 16px;
columns: 2;
column-gap: 40px;
column-fill: auto;
font: normal 14px / 18px Sans-serif;
background: rgba(243,226,199,1);
background: linear-gradient(to right, rgba(243,226,199,1) 0%, rgba(193,158,103,1) 50%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%);
}
</style>
<div class="bkBox">
<h2>文章标题</h2>
<p style="text-align:center">作者：网络</p>
<p><br>十六年前看周星驰大话西游，可以笑的没心没肺，而十年前看着看着不知不觉泪流满面，最近细细想来想要救紫霞，就必须要打败牛魔王，想要打败牛魔王，就必须要变成孙悟空，想要变成孙悟空，就必须要忘掉七情六欲，看似简单，难的就是那一转身，正所谓不戴金箍，如何救你，戴了金箍，如何爱你，正如现实生活中，假如一个人不工作，如何供你，其实每一个人以前都是那个无忧无虑的至尊宝，只是随着年龄的增长，不得不戴上紧箍咒，拿起金箍棒，成为孙悟空，从而要去承担起所有的责任，再也回不到从前的至尊宝<br></p>
<p><br>《大话西游》的结尾有句话，你看那个人，好奇怪哟，像一条狗。像条狗的人，是放弃了人间的男女情欢、无欲无念、兢兢业业走在西天取经路上的至尊宝。他如你我这般，收起了脾气火气不再任性淘气，只为梦想奔波。 人生百年，谁不曾大闹天宫，谁不曾头戴紧箍，谁不曾爱上层楼，谁不曾孤单上路。曾离我们仅一步之遥的人，一旦错过，之后哪怕化身绝世英雄，身披金衣金甲，脚踏七彩祥云，一跃十万八千里，也未必能追得回来。三生有幸遇见你，纵使悲凉也是情。多年以后，才知道，那个转身，有多难！<br></p>
</div>
本帖最后由 大猫咪 于 2022-5-4 13:11 编辑 <br /><br /><style>
body { perspective: 3000px; }
.mBox {
--w: 100px;
margin: auto;
margin-top: 100px;
display: flex;
justify-content: center;
align-items: center;
width: var(--w);
height: var(--w);
cursor: pointer;
position: relative;
animation: rot 2s linear infinite;
}
.zBox {
position: absolute;
display: block;
border-style: dotted;
border-width: 1px;
border-color: transparent red transparent magenta;
border-radius: 50%;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div class="mBox"></div>
<script>
let flag = true;
let ele = document.querySelector(".mBox");
let len= ele.clientWidth;
let zStr = "";
let all = 100;
let angle = Math.floor(360 / all);
for(j=0; j< all; j++){
let wh =Math.floor(len- j * (len / all));
zStr += `<span class="zBox" style="transform: rotate(${j*angle}deg);width: ${wh}px; height: ${wh}px"></span>\n`;
}
ele.innerHTML += zStr;
let au = document.createElement("audio");
au.src= "http://music.163.com/song/media/outer/url?id=25707139.mp3";
au.loop = true;
au.autoplay = flag;
au.style.display = "none";
ele.appendChild(au);
if(!flag) ele.style.animationPlayState = "paused";
ele.onclick = function(){
flag ? (au.pause(),this.style.animationPlayState = "paused",flag = false) : (au.play(),this.style.animationPlayState = "running",flag = true);
}
</script> 本帖最后由 大猫咪 于 2024-3-24 22:01 编辑 <br /><br /><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201706%2F19%2F20170619184752_5wFXT.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654233386&t=9c8f7468083e67db68c55928cb4c7417" border="0" alt="" style="max-width:400px"><div><br></div><div><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=393703&auto=1&height=66"></iframe></div> 多年以后才知道，那个转身有多难，但是，却不得不转身。人世间有太多的无可奈何，我们都是从至尊宝最后变成了兢兢业业的孙悟空。很令人感慨的一段文字。恭喜猫猫头一次做就成功{:4_199:} 大猫咪 发表于 2022-5-4 13:09
本帖最后由 大猫咪 于 2022-5-4 13:11 编辑
body { perspective: 3000px; }
.mBox {
二楼还弄个旋转图关联音乐，真不错，猫猫学会了不少东西呢{:4_199:} 红影 发表于 2022-5-4 13:30
二楼还弄个旋转图关联音乐，真不错，猫猫学会了不少东西呢
不知道图片是放哪里{:4_170:} 好样的，恭喜猫猫了，很成功！{:4_199:} 加林森 发表于 2022-5-4 13:42
好样的，恭喜猫猫了，很成功！
谢谢队长 {:4_187:}{:4_179:} 慢慢学习中，，{:5_106:} 大猫咪 发表于 2022-5-4 13:43
谢谢队长 慢慢学习中，，
嗯嗯，不急的。{:4_204:}{:4_190:} 猫咪朋友下午好！你的制作精巧，图文搭配增强了可读性。 梦油 发表于 2022-5-4 14:08
猫咪朋友下午好！你的制作精巧，图文搭配增强了可读性。
谢谢梦油兄支持鼓励{:4_187:} 晚上好！{:4_179:} 重点在二三楼 大猫咪 发表于 2022-5-4 19:57
谢谢梦油兄支持鼓励 晚上好！
猫咪朋友晚上好！俺希望经常看到你的好作品。{:4_183:} 马黑黑 发表于 2022-5-4 20:04
重点在二三楼
嗯嗯 明白 谢谢老黑 晚上好 {:4_179:}{:4_190:} 梦油 发表于 2022-5-4 20:09
猫咪朋友晚上好！俺希望经常看到你的好作品。
好的 谢谢梦油兄 猫一定努力 大猫咪 发表于 2022-5-4 20:24
嗯嗯 明白 谢谢老黑 晚上好
{:4_187:} 大猫咪 发表于 2022-5-4 20:24
好的 谢谢梦油兄 猫一定努力
祝你顺利 写得真好，大话西游只看过一些片段的，胡闹的剧情居然有这么深的意在。猫越来越厉害了啊 梦油 发表于 2022-5-4 20:58
祝你顺利
谢谢梦油兄{:4_204:}{:4_191:} 绿叶清舟 发表于 2022-5-4 20:59
写得真好，大话西游只看过一些片段的，胡闹的剧情居然有这么深的意在。猫越来越厉害了啊
周星星是个鬼才的，听第一遍牙疼，第二遍心里空落落。{:4_170:}
页:
[1]
2