clip-path 实现文字聚光灯效果

最新推荐文章于 2023-06-02 15:57:01 发布

小白小白从不日白

最新推荐文章于 2023-06-02 15:57:01 发布

阅读量435

点赞数 1

分类专栏： html+css案例文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_43285360/article/details/123966164

版权

html+css案例专栏收录该内容

36 篇文章 7 订阅

订阅专栏

效果图：

clip-path 简介：

概念：使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

语法：

/* Keyword values */
clip-path: none;

/* <clip-source> values */
clip-path: url(resources.svg#c1);

/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset

值：

<clip-source>：用 <url> 表示剪切元素的路径

<basic-shape>

一种形状，其大小和位置由<几何盒>值定义。如果没有指定几何框，则边框将用作参考框

<geometry-box>

如果同 <basic-shape> 一起声明，它将为基本形状提供相应的参考框盒。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被 border-radius 定义的剪切路径）。几何框盒可以有以下的值中的一个：

margin-box

使用 margin box 作为引用框。

border-box

使用 border box 作为引用框。

padding-box

使用 padding box 作为引用框。

content-box

使用 content box 作为引用框。

fill-box

利用对象边界框作为引用框。

stroke-box

使用笔触边界框（stroke bounding box）作为引用框

view-box

使用最近的 SVG 视口（viewport）作为引用框。如果viewBox 属性被指定来为元素创建 SVG 视口，引用框将会被定位在坐标系的原点，引用框位于由 viewBox 属性建立的坐标系的原点，引用框的尺寸用来设置 viewBox 属性的宽高值。

none

不创建的剪切路径。

具体用法请参考官网：clip-path

下面正式开始这个案例：

定义文本：

<h1>梧桐之恋</h1>

设置文本的基本样式：

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    /* 水平垂直居中 */
    justify-content: center;
    align-items: center;
    background: #070707;
}

h1 {
    position: relative;
    color: #6d6868;
    font-size: 120px;
}

设置裁剪以及动画：

这里的做法其实就是利用伪元素生成一个一模一样区域包括文本内容，然后利用子绝父相的原理将其与父元素重叠，再设置这个伪元素的样式、渐变背景以及裁剪区域等

最后就是利用CSS3的动画，产生一个动态的裁剪效果，从而形成聚光灯效果

/* 利用伪元素进行裁剪 */
h1::after {
    content: "梧桐之恋";
    top: 0;
    left: 0;
    position: absolute;
    /* 透明颜色 */
    color: transparent;
    /* 渐变背景 */
    background: linear-gradient(to left,rgb(0,174,255),rgb(0,255,85),rgb(212,0,255),rgb(0,204,255),rgb(238,255,0));
    /* 指定背景裁剪区域 
    这里的意思就是只在文本里显示颜色
    */
    background-clip: text;
    -webkit-background-clip: text;
    /* 定义裁剪形状以及裁剪区域 */
    /* 背景截取区域为圆形，半径为80px，圆心在 0% 50% 的位置 */
    clip-path: circle(80px at 0% 50%);
    /* 动画 */
    animation: move 3s linear alternate infinite;
}

/* 定义动画 */
@keyframes move {
    0% {
        clip-path: circle(80px at 0% 50%);
    }
    100% {
        clip-path: circle(80px at 100% 50%);
    }
}

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1>梧桐之恋</h1>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    /* 水平垂直居中 */
    justify-content: center;
    align-items: center;
    background: #070707;
}

h1 {
    position: relative;
    color: #6d6868;
    font-size: 120px;
}

/* 利用伪元素进行裁剪 */
h1::after {
    content: "梧桐之恋";
    top: 0;
    left: 0;
    position: absolute;
    /* 透明颜色 */
    color: transparent;
    /* 渐变背景 */
    background: linear-gradient(to left,rgb(0,174,255),rgb(0,255,85),rgb(212,0,255),rgb(0,204,255),rgb(238,255,0));
    /* 指定背景裁剪区域 
    这里的意思就是只在文本里显示颜色
    */
    background-clip: text;
    -webkit-background-clip: text;
    /* 定义裁剪形状以及裁剪区域 */
    /* 背景截取区域为圆形，半径为80px，圆心在 0% 50% 的位置 */
    clip-path: circle(80px at 0% 50%);
    /* 动画 */
    animation: move 3s linear alternate infinite;
}

/* 定义动画 */
@keyframes move {
    0% {
        clip-path: circle(80px at 0% 50%);
    }
    100% {
        clip-path: circle(80px at 100% 50%);
    }
}

小白小白从不日白

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
clip-path 实现文字聚光灯效果

效果图：clip-path 简介：概念：使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。语法：/* Keyword values */clip-path: none;/* <clip-source> values */clip-path: url(resources.svg#c1);/* <geometry-box> values */clip-path: margin-box;clip-path: border-b.
复制链接

扫一扫