前端的filter和实例字体

filter是css中的一个属性,具体值有(常用的):

blur(px)调整元素模糊度

brightness(%)图片亮度,为0时全黑

contrast(%) 调整图片的对比度

grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化

hue-rotate(deg)给图像应用色相旋转

invert(%)反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化

saturate(%)转换图像饱和度

sepia(%)将图像转换为深褐色

实例1:镂空的字体

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 100vh;
            background: linear-gradient(30deg, rgb(13, 235, 235), rgb(17, 235, 13));
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }

        .text {
            font-size: 20vh;
            text-align: center;
            font-weight: 600;
            /* color: aqua; */
            /* 透明色 */
            color: transparent;
            /* box-shadow: ; */
            /* text-shadow: 7px 0 black, 7px 7px black, 0 7px black, -7px 7px black, -7px 0 black, -7px -7px black, 0 -7px black, 7px -7px black; */
            -webkit-text-stroke: 5px black;
        }
    </style>
</head>

<body>
    <div class="text">APEXXXXXX</div>
</body>

</html>

效果如下:

实例2:字体阴影

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 100vh;
            background: linear-gradient(30deg, rgb(13, 235, 235), rgb(17, 235, 13));
            /* background: linear-gradient(30deg, #9b59b6, #2c3e50); */
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }

        .text {
            font-size: 20vh;
            text-align: center;
            font-weight: 600;
            color: aqua;
            /* color: #f1c40f; */
            position: relative;
        }

        .text::after {
            content: "APEXXXXX";
            /* content: "CSGOCSGO"; */
            color: black;
            position: absolute;
            left: 0;
            top: 0px;
            transform: skew(50deg) scaleY(0.5) translate(-68px, 57px);
            z-index: -1;
            -webkit-mask-image: linear-gradient(transparent, black)
        }
    </style>
</head>

<body>
    <div class="text">APEXXXXX</div>
</body>

</html>

效果如下:

相关推荐
埃菲尔铁塔_CV算法7 分钟前
深度学习神经网络创新点方向
人工智能·深度学习·神经网络
蜗牛快跑2139 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy10 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
艾思科蓝-何老师【H8053】25 分钟前
【ACM出版】第四届信号处理与通信技术国际学术会议(SPCT 2024)
人工智能·信号处理·论文发表·香港中文大学
weixin_452600691 小时前
《青牛科技 GC6125:驱动芯片中的璀璨之星,点亮 IPcamera 和云台控制(替代 BU24025/ROHM)》
人工智能·科技·单片机·嵌入式硬件·新能源充电桩·智能充电枪
学术搬运工1 小时前
【珠海科技学院主办,暨南大学协办 | IEEE出版 | EI检索稳定 】2024年健康大数据与智能医疗国际会议(ICHIH 2024)
大数据·图像处理·人工智能·科技·机器学习·自然语言处理
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
右恩1 小时前
AI大模型重塑软件开发:流程革新与未来展望
人工智能
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript