【凡哥教程第十六讲作业】夏日（CSS遮罩）

花简静 · 发表于 2024-8-5 08:37

本帖最后由花简静于 2024-8-5 08:39 编辑

凡哥教程第十六讲作业：

给任意视频做 mask 剪裁，要求在视频的右上角剪去一个小三角形，剪裁边缘不能有锯齿。

花简静 · 发表于 2024-8-5 08:40

<style>

.vidfg16 {

position: relative;

left: calc(50% - 300px);

width: 600px;

height: 360px;

object-fit: cover; /* 视频内容适应元素尺寸 */

mask: linear-gradient(to top right, red 90%, transparent 90.5%, transparent 0);

-webkit-mask: linear-gradient(to top right, red 90%, transparent 90.5%, transparent 0);

}

</style>

花简静 · 发表于 2024-8-5 08:42

@凡哥今天的作业完成啦，请老师批改

清梦 · 发表于 2024-8-5 09:08

静静的作业又出来了，好漂亮，

清梦 · 发表于 2024-8-5 09:08

欣赏静静带来的精彩作业

清梦 · 发表于 2024-8-5 09:09

问好静静谢谢你的精彩分享

清梦 · 发表于 2024-8-5 09:09

祝静静学习愉快，每天好心情

花简静 · 发表于 2024-8-5 09:32

花简静 · 发表于 2024-8-5 09:33

花简静 · 发表于 2024-8-5 09:34

<style>

.qsfg160 {

mask: radial-gradient(circle, transparent 3px, red 4px, red 0) 0 -147px/ 3% 100%;

-webkit-mask: radial-gradient(circle, transparent 3px, red 4px, red 0) 0 -147px/ 3% 100%;

}

</style>

[活动] 【凡哥教程第十六讲作业】夏日（CSS遮罩）