CSS-filter-hue-rotate()属性实现酷炫文字特效

最新推荐文章于 2024-04-19 00:47:34 发布

G018_star sky♬

最新推荐文章于 2024-04-19 00:47:34 发布

阅读量776

点赞数 2

分类专栏： CSS HTML5 文章标签： css

本文链接：https://blog.csdn.net/qq_42526440/article/details/124345980

版权

CSS 同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

HTML5

9 篇文章 0 订阅

订阅专栏

hue-rotate()
hue-rotate() (en-US) 函数在输入图像上应用色相旋转。angle 一值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。若值未设置值，默认为 0deg。该值虽然没有最大值，超过 360deg 的值相当于又绕一圈。

应用实例:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>炫彩的发光字特效</title>
    <style>
    *{
    /* 初始化 */
    margin: 0;
    padding: 0;
	}
	body{
    /* 100%窗口高度 */
    min-height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #06252e;
	}
	.container{
    /* 投影效果 */
    -webkit-box-reflect: below 1px linear-gradient(transparent,rgba(0,0,0,0.2));
	}
	h2{
    color: #fff;
    font-size: 96px;
    /* 字间距 */
    letter-spacing: 15px;
    /* 转大写 */
    text-transform: uppercase;
    text-align: center;
    line-height: 76px;
    outline: none;
    /* 自定义属性--c，可通过var函数对其调用 */
    --c:lightseagreen;
    /* 调用自定义属性--c，设置文字阴影（发光效果） */
    text-shadow: 0 0 10px var(--c),
    0 0 20px var(--c),
    0 0 40px var(--c),
    0 0 80px var(--c),
    0 0 160px var(--c);
    /* 执行动画：动画名 时长 线性的 无限次播放 */
    animation: animate 5s linear infinite;
}

/* 定义动画 */
	@keyframes animate {
    to{
        /* 色相旋转滤镜（设置度数可改变颜色） */
        filter: hue-rotate(360deg);
    }
}
    </style>
</head>
<body>
    <div class="container">
        <h2 contenteditable="true">hello</h2>
    </div>
</body>
</html>

效果如下:

在这里插入图片描述

G018_star sky♬

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
CSS-filter-hue-rotate()属性实现酷炫文字特效

hue-rotate()hue-rotate() (en-US) 函数在输入图像上应用色相旋转。angle 一值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。若值未设置值，默认为 0deg。该值虽然没有最大值，超过 360deg 的值相当于又绕一圈。应用实例:<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=u
复制链接

扫一扫