查看: 494|回复: 27

[活动] 【凡哥教程第十七讲作业】山清水秀(CSS伪元素 ::before 和 ::after)

[复制链接]
发表于 2024-8-6 10:02 | 显示全部楼层 |阅读模式
本帖最后由 花简静 于 2024-8-6 12:25 编辑

凡哥教程第十七讲作业: 
模仿本讲最后一个示例做一个帖子布局,其中,
① 伪元素 ::before 用来做帖子标题,字号 20px 或更大,有文本阴影;
② ::after 伪元素使用 url() 函数加载一个合适尺寸的静态小图片模拟播放器并设计一个 @keyframes 关键帧动画去驱动播放器的旋转。

评分

6

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-6 10:04 | 显示全部楼层
<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>

评分

2

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-6 10:05 | 显示全部楼层
@凡哥 交一份今天的作业,辛苦老师瞧一眼

评分

1

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-6 10:07 | 显示全部楼层
点评
回复

使用道具

 楼主| 发表于 2024-8-6 10:07 | 显示全部楼层
点评
回复

使用道具

发表于 2024-8-6 11:25 | 显示全部楼层
点评
回复

使用道具

发表于 2024-8-6 11:27 | 显示全部楼层
静宝真是勤奋好学呀
点评
回复

使用道具

发表于 2024-8-6 12:01 | 显示全部楼层
静静的作业跟的漂亮,欣赏学习
点评
回复

使用道具

发表于 2024-8-6 12:04 | 显示全部楼层
花简静 发表于 2024-8-6 10:05
@凡哥 交一份今天的作业,辛苦老师瞧一眼

静静最近太辛苦乐,抱抱
点评
回复

使用道具

发表于 2024-8-6 12:04 | 显示全部楼层
问好静静谢谢你的精彩分享,祝学习愉快,每天好心情
点评
回复

使用道具

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-6-9 17:27

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表