css特效：clip-path

最新推荐文章于 2024-03-26 10:43:47 发布
最新推荐文章于 2024-03-26 10:43:47 发布
阅读量1k 收藏 2
点赞数 2
分类专栏： css3动态特效 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/src_chao1/article/details/130009166
版权

直到上一个特效发布后我才注意到这个功能强大的一个clip-path属性，但是在这里我就不多介绍了，感兴趣可以自行搜索其他博主关于clip-path的文章。

这次更新内容主要在于耳朵效果和全新的波纹效果，这些新的效果全是使用clip-path属性制作的

最新版本资源

https://download.csdn.net/download/src_chao1/87663520

视频

clip

新增的类选择器

pulseClip：所有使用clip-path制作小耳朵的新样式使用的类，不使用其他选择器默认直边心形
clipStar：五角星
clipSixStar：六角星
clipDownArrow：下箭头
clipUpArrow：上箭头
clipHeart：圆滑一点心形
clipHeartBig：特别圆滑的心形
wave：波形，所有默认不移动波形的基础类
waveMove：波形，所有默认移动波形的基础类
wave_1_violent1：波涛汹涌半波长为1的水波，还有半波长为2，3，4，5，7，10的波
wave_1_calm1：平静半波长为1的水波，还有半波长为2，3，4，5，7，10的波
wave_1_big1：很大的波型半波长为1的水波，还有半波长为2，3，4，5，7，10的波

新增的自定义变量

--pulse_cat_weight：耳朵的宽度
--pulse_cat_height：耳朵的高度
--pulse_clip：耳朵的裁剪形状
--wave_clip1：水波的裁剪形状
--wave_light_color：水波颜色
--wave_speed：水波样式

效果

小耳朵

五角星

代码

<button class="button  inverted  pulseClip clipStar " style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted  pulseClip clipStar determine">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted  pulseClip clipStar cancel">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted pulseClip clipStar error">
        <button-span>BUTTON</button-span>
    </button>

效果

简单心形

代码

<button class="button  inverted pulseClip " style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted pulseClip determine">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted  pulseClip cancel">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted  pulseClip error">
        <button-span>BUTTON</button-span>
    </button>

 效果

 六角星

代码

<button class="button  inverted  pulseClip clipSixStar " style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted  pulseClip clipSixStar determine">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted  pulseClip clipSixStar cancel">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted pulseClip clipSixStar error">
        <button-span>BUTTON</button-span>
    </button>

效果

下箭头

 

<button class="button  inverted  pulseClip clipDownArrow " style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted  pulseClip clipDownArrow determine">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted  pulseClip clipDownArrow cancel">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted pulseClip clipDownArrow error">
        <button-span>BUTTON</button-span>
    </button>

效果

上箭头

 代码

<button class="button  inverted  pulseClip clipUpArrow " style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted  pulseClip clipUpArrow determine">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted  pulseClip clipUpArrow cancel">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted pulseClip clipUpArrow error">
        <button-span>BUTTON</button-span>
    </button>

效果

 心形

代码

<button class="button  inverted  pulseClip clipHeart " style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted  pulseClip clipHeart determine">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted  pulseClip clipHeart cancel">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted pulseClip clipHeart error">
        <button-span>BUTTON</button-span>
    </button>

效果

 波形

js生成

关于波形，我在wave.css中放了几个波形的剪切坐标，由于波形也是使用了剪贴坐标，所以坐标点实在太多，文件很大，因此把我制作剪切坐标的js代码介绍一下，不想要使用js生成剪切坐标的同学可以跳过这一段了~

function create(st = 'violentRand', style = 'water' || 'cloud', start = 65, end = 25, fre = 2) {
        let init = start;
        const canvas = document.createElement('canvas');
        canvas.width = 500;
        canvas.height = 100;
        document.body.appendChild(canvas)
        let context = canvas.getContext('2d');
        let fun = BezierCurve(2, 100, 0, 0);
        context.beginPath();
        for (let i = 0; i < 20; i++) {
            context.moveTo(i * 25, 0)
            context.lineTo(i * 25, 100);
        }
        context.stroke();
        context.beginPath();
        for (let i = 0; i < 10; i++) {
            context.moveTo(0, i * 10)
            context.lineTo(500, i * 10);
        }
        context.stroke();
        context.beginPath();
        let rand = {
            'water': {
                'violentRand': [[45, 55], [70, 90], [45, 55], [10, 30]],
                'calmRand': [[45, 55], [60, 70], [45, 55], [30, 40]],
                'bigRand': [[45, 55], [80, 100], [45, 55], [0, 20]]
            },
            'cloud': {
                'violentRand': [[70, 90], [10, 30], [70, 90], [10, 30]],
                'calmRand': [[60, 70], [30, 40], [60, 70], [30, 40]],
                'bigRand': [[80, 100], [0, 20], [80, 100], [0, 20]]
            }
        }
        let str = "";
        let len = 100 / fre % 4 === 0 ? 100 / fre : Math.floor(100 / fre / 4) * 4;
        let compensate = 100 / len;
        for (let i = 0; i < len; i++) {
            fun = BezierCurve(2, start, style === 'water' ? i % 4 <= 1 ? Math.min(start * 2, end * 2) : Math.max(start * 2, end * 2) : Math.min(start * 2, end * 2), end);
            start = end;
            end = random(rand[style][st][i % 4][0], rand[style][st][i % 4][1], true);
            if (i === len - 2) end = init;
            for (let j = 0; j <= 100; j++) {
                str += `${j / len + i * compensate}% ${fun(j / 100)}% ,`;
                context.lineTo(j / (len / 5) + i * compensate * 5, fun(j / 100));
            }
        }
        context.stroke();
        console.log('--wave_clip1: polygon(' + str + '100% 0%,100% 100%,0 100%)');
    }
    create('violentRand','cloud');

首先要说的是，如果直接运行这段代码（包括文件中那个html代码）都是会失败的，因为这里面有我两个自定义函数没有发布出来，分别是BezierCurve和random，用于生成平滑曲线坐标和随机数

BezierCurve：

const BezierCurve = function () {
    return (type = 2, ...args) => {
        if (args.length >= type + 1)
            return (t) => {
                let res = 0;
                for (let i = 0; i <= type; i++) {
                    res += Math.pow(t, i) * Math.pow((1 - t), type - i) * args[i];
                }
                return res;
            }
        else return console.warn(`Insufficient parameters There should be ${type + 1} parameters`);
    }

}()

random：

const random = function (start = 0, end = 1, integer = false) {
        let number = Math.random() * (start - end) + end;
        if (integer) return Math.floor(number);
        return number;
    }

这三段代码中，BezierCurve和random我就不介绍了，感兴趣可以了解贝塞尔曲线

重点在于如何使用create函数

参数：

st：["violentRand"|"calmRand"|"bigRand"],用于生成不同高度差的波纹，calm最稳定，big最剧烈，violent介于两者之间
style：["water"|"cloud"]，用于生成不同样式波纹，水波纹和云波纹
start：第一段曲线开始点高度位置
end：第一段曲线结束点坐标高度位置
fre：波长，数值越小波的个数越多

 返回值：该函数无返回值，但是会在控制台中输出适配本css样式的字符串，之间复制粘贴到本地css类选择中就可以了，同时也会在您的页面中生成一个canvas标签，用于展示生成的波形

当然您也可也选择在代码中最后直接为一个元素的style赋值，这样就不需要繁杂的复制粘贴了

不过这个函数生成的曲线只会保证每段曲线是连续的，无法保证曲线和曲线直接是连续的，为了避免这个问题，您可以更改高度差设置或者多次生成波形，总会有连续的时候不是嘛~~

css样式效果

默认不移动波形

代码

 <button class="button inverted wave " style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted wave wave_1_violent1" style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted wave wave_1_violent5" style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted wave wave_1_calm1" style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted wave wave_1_calm5" style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted wave wave_1_big1" style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted wave wave_1_big5" style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted wave wave_1_violent5 determine">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted wave wave_1_violent5 cancel">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted wave wave_1_violent5 error">
        <button-span>BUTTON</button-span>
    </button>

 效果

 

默认移动的波形

代码：

<button class="button inverted waveMove " style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted waveMove wave_1_violent1" style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted waveMove wave_1_violent5" style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted waveMove wave_1_calm1" style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted waveMove wave_1_calm5" style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted waveMove wave_1_big1" style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted waveMove wave_1_big5" style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted waveMove wave_1_violent5 determine">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted waveMove wave_1_violent5 cancel">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button inverted waveMove wave_1_violent5 error">
        <button-span>BUTTON</button-span>
    </button>

效果（其实图片看不出什么区别~~） 

 

 

 

 好了，那么这次更新的耳朵和波形也全都结束了，如果我有更多的灵感会继续发布更多内容

 

雪碧瓶子用一年
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
some-demos:记录一些demo
05-12
Some-Demos 记录工作中写的一些demo，不断更新吧... Demo preview CSS3 filter10种特效整理 仿微信可换肤CSS3美化表单 背景Canvas 3D线条动画特效 Css3渐变 Css3-clip Css3-clip-path Css3-loading circle-animation Tips：如以上demo访问不了，请移步这里。
三张图片剪切倾斜CSS3特效
07-24
三张图片剪切倾斜CSS3特效是一款基于css3 clip-path属性制作的三张图片剪切倾斜布局，通过鼠标悬停图文展示特效。
css3剪贴路径（Clip-path）在线生成器
最新发布
weixin_41639609的博客
03-26 712
【代码】css3剪贴路径（Clip-path）在线生成器。
纯CSS3制作文字分割特效
06-24
纯CSS3制作文字分割特效是一款基于css3 clip-path属性制作的模糊闪烁切割的文字动画特效。
CSS3悬停图片放大遮罩特效特效代码
03-20
CSS3悬停图片放大遮罩特效是一款CSS3 Clip-path属性制作的卡片悬停动画，图片模糊放大遮罩显示文字标题效果。
CSS3悬停图片放大遮罩特效
07-24
CSS3悬停图片放大遮罩特效是一款CSS3 Clip-path属性制作的卡片悬停动画，图片模糊放大遮罩显示文字标题效果。
CSS3 Clip-Path
热门推荐
cwyp18809的博客
03-25 2万+
目录 一、 Clip-Path有什么作用 二、什么是Clip-Path 三、Clip-Path 语法 四、 如何使用Clip-Path 五、 拓展 clip-path属性值basic-shape的几个创造图形函数使用详解： 1、circle() – 圆 2、ellipse() – 椭圆 3、inset() – 内矩形（包括圆角矩形） 4、 polygon() ...
CSS clip-path 属性
Allen-
10-31 4789
clip-path属性定义了一个剪切区域，这个区域内的元素内容可见，而区域外的内容则被隐藏。这使得我们能够创建出非矩形的布局效果，提升页面的视觉吸引力。clip-path是前端设计师手中的利器，它赋予了我们无限创意的空间，让网页元素的展示不再局限于传统的矩形框。掌握它，你就能在网页设计的世界里自由飞翔，创造出令人眼前一亮的视觉效果。🚀。
超级好用的css属性——clip-path
有事儿私信。
09-11 4256
clip-path是CSS3中的一个属性，用于在元素上创建一个裁剪区域，以显示元素的一部分。它允许您选择性地显示元素的某个部分，而隐藏其他部分。clip-path属性可以用于各种形状和图像，包括矩形、圆形、多边形和SVG图形等。
CSS中clip-path属性的使用
weixin_34294649的博客
10-16 1273
clip-path的使用 polygon 值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。 左上角为原点，右下角是(100%,100%)的点。</p> body { background-color: #000; } .fa { border: 1px solid #fff; color: yel...
css clip-path
CamilleZJ的博客
01-04 1339
clip-pathCSS属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。和canvas和svg的剪裁很像。 取值 <clip-source>：用<url>表示剪切元素的路径 <basic-shape>：一种形状，其大小和位置由<几何盒>值定义。如果没有指定几何框，则边框将用作参考框 <geometry-box>：如果同<basic-shape>一起声明，它将为基本形状提供相应的参考框盒。通过自定...
css3悬停图片模糊放大遮罩显示文字动画特效
06-10
基于css3 Clip-path属性制作的悬停图片模糊放大遮罩显示文字动画特效，图文卡片布局鼠标悬停动画效果。
CSS 高级属性之 clip-path 详解
青颜的天空的博客
03-08 1637
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/clip-path
CSS的clip-path
aau88497的博客
09-25 217
摘要：在Web网页中主要是以矩形分布的。而平面媒体则倾向于更多不同的形状。造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容。这也就造成了很多设计师的创意发挥,就算是有创意,前端实现也将付出巨大的开发成本。虽然CSSShapesModuleLevel1(CSS形状模块标准1)的规范出现,可以打破矩形设计的限制。但仍需要一些不规则的图形。而早前实现一些不规则的图形,都需借...
CSS奇思妙想之-利用CSS裁剪（clip-path）完成各种图形
肥晨开发的学习之路
03-04 6495
css裁剪（clip-path）这个属性平时率非常低。但是其实clip并不是CSS3的新属性，很早就开始出现了。CSS裁剪的这一概念最早是在CSS 2.1时代由clip属性引入，但该属性的限制非常多。裁剪初期只能应用于绝对定位的元素，并且只能裁剪成矩形。而在CSS3中，提供了强大的clip-path属性，突破了clip属性的众多限制。clip-path能够让你指定一个网页元素的显示区域，而不是显示全部。
CSS clip-path 运用
王飞
06-18 395
偶然间接触到 clip-path 的 CSS 属性，接的挺有意思，想着记录一下。 clip-path 是通过裁剪元素的方式显示裁剪的指定区域。通俗来说就是像剪窗花一样。 根据 MDN 官方的实例，裁剪一共有四个属性，他们分别是 inset | circle | ellipse | polygon | path inset 向内部剪裁 circle 按照圆形裁剪 ellipse 按照椭圆形剪裁 polygon 按照多边形裁剪 基于以上的一些用法，我们可以想到 Tips 提示的用法，之前使用的拼接的方法
深入理解与应用CSS clip-path 属性
文艺里的小清新
03-07 1350
clip-path属性通过定义裁剪路径来确定元素的可视区域。这意味着，你可以指定一个形状或路径，只有位于这个形状或路径内的部分才会被显示出来，其余部分则会被裁剪掉。这种裁剪可以是简单的几何形状，如圆形、椭圆形或多边形，也可以是复杂的 SVG 路径。 支持的基本形状 内嵌 (inset) 这创建了一个内嵌的剪裁区域，其中的四个值分别对应上、右、下、左的剪裁量。 圆形 () 这将创建一个圆形剪裁区域，其中是圆的半径，指定了圆心的位置（相对于元素的宽高）。
css clip-path path
01-07
CSS的clip-path属性用于创建元素的可显示区域，可以通过裁剪方式来显示区域内的部分，而隐藏区域外的部分。clip-path属性的基本语法如下： ```css clip-path: clip-source | basic-shape | geometry-box | none; ``` 其中，clip-source可以是以下几种类型之一： 1. URL：可以使用SVG图像作为裁剪路径。例如： ```css clip-path: url(path/to/clip-path.svg); ``` 2. 基本形状（basic-shape）：可以使用基本形状来定义裁剪路径。基本形状包括矩形（rectangle）、椭圆（ellipse）、圆（circle）、多边形（polygon）等。例如： ```css clip-path: circle(50% at 50% 50%); ``` 3. 几何框（geometry-box）：可以使用元素的边界框或者视口的边界框作为裁剪路径。例如： ```css clip-path: padding-box; ``` 4. none：表示不进行裁剪，元素将完全显示。 下面是一个使用clip-path属性的示例： ```css div { width: 200px; height: 200px; background-color: red; clip-path: circle(50% at 50% 50%); } ``` 以上代码将创建一个宽高为200px的红色正方形，并将其裁剪为一个圆形。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值