葬花吟(学习黑师图文小贴子作业之二)
本帖最后由 南无月 于 2023-7-7 13:15 编辑 <br /><br /><style>#papa {margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: tan url('https://pic.imgdb.cn/item/64a6b8931ddac507cc7a3763.jpg') no-repeat center / cover;
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
--state: paused;
}
#mydiv {
width: 350px;
height: 580px;
padding: 30px;
box-sizing: border-box;
border-radius: 12px;
background: Lavender;
box-shadow: 0 0 8px #000;
position: absolute;
overflow-y: auto;
text-align:center;
left:50px;
top:30px;
z-index: 12;
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
}
#mydiv::before {
height: 790px;
left: 15px;
top: 10px;
right: 10px;
bottom: 10px;
border: 2px dashed purple;
border-radius: inherit;
}
#mydiv::after {
content: ' 《葬花吟》曹雪芹';
padding: 10px 40px 10px 10px;
left: -20px;
top: 16px;
border-radius: 10px 0 0 10px;
background: MediumPurple;
opacity: .85;
font: bold 20px/28px sans-serif;
color: white;
clip-path: polygon(0 0, 100% 0, 95% 45%, 100% 90%, 10% 90%, 5% 100%, 0 100%);
}
#vid {
position: absolute;
width: 1000px;
height: 100%;
top:10px;
right:2px;
border-radius: 2%;
opacity: .95;
object-fit: cover;
pointer-events: none;
z-index: 2;
}
#vid1 {
position: absolute;
width: 1400px;
height: 120%;
border-radius: 2%;
opacity: .40;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 57;
}
.panda {
position: absolute;
width: 1024px;
height: 640px;
z-index: 3;
css-doodle { position: absolute; }</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/8321488/00/14/84/5e64c3f1bc0fa.mp4" autoplay="" loop="" muted=""></video><video id="vid1" src="https://img.tukuppt.com/video_show/2418175/00/01/78/5b49e4ba49a96.mp4" autoplay="" loop="" muted=""></video><div class="panda"><img src="https://pic.imgdb.cn/item/64a6d3c31ddac507ccc6fb5a.png" alt="" /></div>
<div id="mydiv" ><p><br /><br><img src="https://pic.imgdb.cn/item/64a6c1b01ddac507cc94a93b.gif" alt="" style="width: 100%" /></p><p>花谢花飞花满天，红消香断有谁怜？<br />游丝软系飘春榭，落絮轻沾扑绣帘。<br />闺中女儿惜春暮，愁绪满怀无释处。<br />手把花锄出绣帘，忍踏落花来复去。<br />柳丝榆荚自芳菲，不管桃飘与李飞；<br />桃李明年能再发，明年闺中知有谁？<br />三月香巢已垒成，梁间燕子太无情！<br />明年花发虽可啄，<br />却不道人去梁空巢也倾。<br />一年三百六十日，风刀霜剑严相逼；<br />明媚鲜妍能几时，一朝漂泊难寻觅。<br />花开易见落难寻，阶前愁杀葬花人，<br />独倚花锄泪暗洒，洒上空枝见血痕。<br />杜鹃无语正黄昏，荷锄归去掩重门；<br />青灯照壁人初睡，冷雨敲窗被未温。<br>怪奴底事倍伤神？半为怜春半恼春。<br>怜春忽至恼忽去，至又无言去未闻。<br>昨宵庭外悲歌发，知是花魂与鸟魂？<br>
花魂鸟魂总难留，鸟自无言花自羞；<br>
愿侬此日生双翼，随花飞到天尽头。<br>
天尽头，何处有香丘？<br>
未若锦囊收艳骨，一抔净土掩风流。<br>
质本洁来还洁去，强于污淖陷渠沟。<br>
尔今死去侬收葬，未卜侬身何日丧？<br>
侬今葬花人笑痴，他年葬侬知是谁？<br>
试看春残花渐落，便是红颜老死时；<br>
一朝春尽红颜老，花落人亡两不知！<br></p><css-doodle grid="1" id="mplayer">:doodle { @size: 50px;position: absolute;cursor: pointer; left: 185px; top: 12px; opacity: .96;z-index: 14; }clip-path: @shape(fill: evenodd;points: 300;scale: .45;x: cos(2t) + cos(7t);y: sin(2t) + sin(7t););background: linear-gradient(LightCyan,MediumPurple,Thistle);animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); } }</css-doodle></div></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=159394" autoplay="autoplay" loop="loop"></audio><script>(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'),vid.pause(),vid1.pause()) : (papa.style.setProperty('--state','running'), vid.play(), vid1.play());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();</script> 十分欣赏,喜欢这样的风格.问好! 小文 发表于 2023-7-7 10:26
十分欣赏,喜欢这样的风格.问好!
{:4_187:}谢谢小文哦，你也可以用这种来写文字。 把边框加到底图中，还弄了这么多漂亮的动态以及漂亮的播放器按钮。月儿的制作好棒{:4_199:} 梦回后楼 @马黑黑 老师来瞧瞧，用你说的方法加了滚动条，可以完整显示整首诗了 红影 发表于 2023-7-7 11:15
把边框加到底图中，还弄了这么多漂亮的动态以及漂亮的播放器按钮。月儿的制作好棒
练习作业，简单的效果堆砌{:4_187:}谢谢影子鼓励 山人 发表于 2023-7-7 11:42
梦回后楼
梦回红楼。。。经典曲子，可以一听 南无月 发表于 2023-7-7 13:19
梦回红楼。。。经典曲子，可以一听
听说红楼在俺家后面 南无月 发表于 2023-7-7 13:17
@马黑黑 老师来瞧瞧，用你说的方法加了滚动条，可以完整显示整首诗了
CSS滚动条相关设置：
overflow - 设置xy两个方向的滚动条，值为 auto（自动）、hidden（隐藏）。当元素固定了宽高尺寸，值为 auto 时，内容多了或行长了，滚动条就会自动出现；值为 hidden 时，滚动条永远不会出现。确实值是 hidden。
还可以单独设置xy两个方向，取值与 overflow 一样：
overflow-x : 设置水平方向的滚动条
overflow-y : 设置垂直方向的滚动条 这个帖子构思巧妙，设计大气，布局合理得当，整体效果奔放中有细腻、凄凉中有希望，挺好。
“各美其美”的布局设想没有实现，是对 HTML 布局还没有能够做到全局把握。比方说，css-doodle 的效果只想修饰右边区域某些范围，则可以在CSS中的 css-doodle 标签中定位 css-doodle 和规定它的尺寸：
css-doodle {
position: absolute;
width: 600px;
height: 400px;
left: 500px;
top: 100px;
}
css-doodle 选择器如果有 id，比如说 id="mydd" ，则上面的 css-doodle 标签名称可以用 #mydd 代替，避免一个元素用多组选择器去进行设置。 南无月 发表于 2023-7-7 13:19
梦回红楼。。。经典曲子，可以一听
听听 马黑黑 发表于 2023-7-7 17:59
听说红楼在俺家后面
你家后山头上有个大观园{:4_173:} 马黑黑 发表于 2023-7-7 18:03
CSS滚动条相关设置：
overflow - 设置xy两个方向的滚动条，值为 auto（自动）、hidden（隐藏）。当元 ...
hidden，我试了没用啊，藏得完全看不到，也没有滚动效果 马黑黑 发表于 2023-7-7 18:10
这个帖子构思巧妙，设计大气，布局合理得当，整体效果奔放中有细腻、凄凉中有希望，挺好。
“各美其美” ...
好的。我以后做贴的时候留意{:4_173:} 南无月 发表于 2023-7-7 20:06
好的。我以后做贴的时候留意
{:4_190:} 南无月 发表于 2023-7-7 19:59
hidden，我试了没用啊，藏得完全看不到，也没有滚动效果
hidden就是不让滚动条出现 南无月 发表于 2023-7-7 19:57
你家后山头上有个大观园
画上画的 山人 发表于 2023-7-7 19:49
听听
{:4_187:}好的，我到是听了好多遍 本帖最后由 南无月 于 2023-7-7 20:11 编辑
马黑黑 发表于 2023-7-7 20:08
hidden就是不让滚动条出现
就是终止滚动效果？不让它出现，不设这个就行了。。。设了又不让出现，有什么差别呢。