【凡哥教程第十七讲作业】山清水秀（CSS伪元素 ::before 和 ::after）

花简静

凡哥教程第十七讲作业： 

模仿本讲最后一个示例做一个帖子布局，其中，

① 伪元素 ::before 用来做帖子标题，字号 20px 或更大，有文本阴影；

② ::after 伪元素使用 url() 函数加载一个合适尺寸的静态小图片模拟播放器并设计一个 @keyframes 关键帧动画去驱动播放器的旋转。

花简静

<style> .qsfg17 { margin: auto;     width: 800px;     height: 460px;     background: url('https://pic.imgdb.cn/item/66b182c0d9c307b7e91dec6e.png') center/cover;     position: relative; } .qsfg17::before, .qsfg17::after {     position: absolute;     content: ''; } .qsfg17::before { content: '千山凡哥小白音画教程第17讲'; top:100px; left: 100px;     padding: 6px;     font: bold 46px/54px sans-serif;     color: Lavender;     text-shadow: 2px 2px 6px #000; } .qsfg17::after {     left: 40%;     bottom: 25%;     content: url('https://638183.freep.cn/638183/small/hxxb.webp');     mix-blend-mode: normal;     animation: rot 8s linear infinite; } @keyframes rot {     to { transform: rotate(360deg); } </style> <div class="qsfg17"> </div>

花简静

@凡哥 交一份今天的作业，辛苦老师瞧一眼

花简静

花简静

云笛

云笛

静宝真是勤奋好学呀

柒玥

静静的作业跟的漂亮，欣赏学习

柒玥

花简静 发表于 2024-8-6 10:05
@凡哥 交一份今天的作业，辛苦老师瞧一眼

静静最近太辛苦乐，抱抱

柒玥

问好静静谢谢你的精彩分享，祝学习愉快，每天好心情