css特效：流光背景+动态边框+滑动效果+聚集效果+小耳朵+阴影流光效果

已于 2023-04-07 20:34:45 修改
阅读量7.1k 收藏 52
点赞数 24
分类专栏： css3动态特效 文章标签： css 前端
于 2022-12-14 20:33:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/src_chao1/article/details/128320581
版权

目录

总览

类选择器

自定义变量

效果

三种基本样式

确定

取消

 删除

流光效果

背景流光

边框流光

​编辑动态边框

双元素旋转

 单元素旋转

单元素移动

边框线

 顶部边框线

底部边框线

双边框线

 滑动

反光滑动

 箭头滑动

 中央扩展

 文字覆盖

横向文字覆盖

 纵向文字覆盖

 聚焦

搏动聚焦

猫耳朵聚焦

熊耳朵聚焦

​编辑​编辑 ​编辑

多色彩聚焦

已于2023.4.7发布新的文章和资源

文章：

https://blog.csdn.net/src_chao1/article/details/130009166?spm=1001.2014.3001.5501icon-default.png?t=N2N8https://blog.csdn.net/src_chao1/article/details/130009166?spm=1001.2014.3001.5501

资源：

https://download.csdn.net/download/src_chao1/87663520icon-default.png?t=N2N8https://download.csdn.net/download/src_chao1/87663520

总览

由于视频审核限制，所以我将所有按钮样式全部放到一个视频里，对此造成不便请见谅

全部特效

有没有心动样式？如果没有那我真的要狠狠的伤心了

资源链接:https://download.csdn.net/download/src_chao1/87282027?spm=1001.2014.3001.5503https://download.csdn.net/download/src_chao1/87282027?spm=1001.2014.3001.5503

好了，从视频中我们能看到每种效果都带有三个不同样式展示，这三种样式是制作的三种默认主题：确定、取消、删除，匹配所有效果。同时镜面反光效果由于兼容性问题，可以进行单独设置（视频中都带有镜面反光）。

类选择器

button:所有效果都要使用的样式
inverted：镜面效果
delay_1：动画延迟一秒执行
delay_2：动画延迟二秒执行
delay_3：动画延迟三秒执行
delay_5：动画延迟五秒执行
determine：确定样式
cancel：取消样式
error：警告样式
streamerLight：流光背景
streamerLightBorder：流光边框
streamerBorder：动态边框-双元素旋转
staticStreamerBorder：动态边框-静态-双元素旋
streamerBorderAlone：动态边框-单元素旋转
staticStreamerBorderAlone：动态边框-静态-单元素旋转
streamerBorderMove：动态边框-单元素移动
staticStreamerBorderMove：动态边框-静态-单元素移动
streamerBorderSideLine：动态边框-边框线
streamerBorderSideLineTop：动态边框-顶部边框线
staticStreamerBorderSideLineTop：动态边框-静态-顶部边框线streamerBorderSideLineBotton：动态边框-底部边框线 staticStreamerBorderSideLineBottom：动态边框-静态-底部边框线streamerBorderSideLineOut：动态边框-双边框线
staticStreamerBorderSideLineOut：动态边框-静态-双边框线
slide：滑动-反光滑动
slideArrow：滑动-箭头滑动
slideMiddle：滑动-中央扩展
fontCover：横向文字覆盖
fontCoverVertical：纵向文字覆盖
pulse：聚焦
pulseCat：聚焦-猫耳朵
pulseBear：聚焦-熊耳朵
pulseStart： 聚焦-多色彩

自定义变量

--letter_spacing: 5px;//文字间距
--delay: 0s;//动画延时
--height: 40px;
--width: 160px;
--radius: 10px;
--margin: 10px;
--transition_speed: 0.5s;//正常、移入、点击效果动画执行时间
--bg-color: #4e5b69;//背景颜色
--color: #fff;//文字颜色
--border_color: #3eeed0;//边框颜色
--border_size: 0;//边框宽度
--box_shadow_color: rgba(60, 62, 75, 0.2);//阴影颜色
--streamer_light_color: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #09a8f4);//流光效果的颜色
--streamer_inSize: 5px;//流光、动态边框效果大小
--streamer_border_color: #c7f8ac;//流光、动态边框效果边框颜色
--streamer_speed: 2s;//流光、动态边框动画执行时间
--slideSize: 50;//滑动点击覆盖的放大倍数
--slide_end_place: 60%;//反光滑动、箭头滑动鼠标移入后到达位置
--slide_color: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.8));//滑动效果的颜色
--slide_border_color: rgba(255, 255, 255, 0.8);//滑动效果边框颜色
--fontCover_size: 60px;//文字覆盖的显示间距
--fontCover_speed: 4s;//文字覆盖的移动速度
--fontCover_inset: 0;//文字覆盖边框留出位置
--fontCover_color: #8cea7d;//文字覆盖的文字颜色
--fontCover_bg_color: #4e5b69;//文字覆盖的覆盖物颜色
--pulse_color1: #fff;//多色彩聚焦颜色之一，点击时出现颜色
--pulse_color2: #f0f;//多色彩聚焦颜色之一，开始出现在左侧的颜色
--pulse_color3: #0ff;//多色彩聚焦颜色之一，开始出现在右侧的颜色
--pulse_speed: 8s;//多色彩的动画速度，猫耳朵、熊耳朵动画的二倍速度
--pulse_box_size: 100px;//多色彩的颜色覆盖大小
--pulse_cat_color1: #4e5b69;//猫耳朵、熊耳朵的颜色之一

接下来让我们一个一个的看效果

效果

三种基本样式

确定

代码

<button class="button determine  inverted">
        BUTTON
    </button>

效果

取消

代码

 <button class="button cancel  inverted">
        BUTTON
  </button>

效果

 

 删除

 代码

<button class="button error  inverted">
        BUTTON
</button>

效果

 

流光效果

背景流光

代码 

<button class="button  inverted streamerLight " style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>

效果

边框流光

代码

<button class="button  inverted streamerLightBorder " style="--width: 550px;">
        <button-span>BUTTON</button-span>
</button>

效果

动态边框

双元素旋转

代码

<button class="button  inverted streamerBorder" style="--width: 550px;">
        <button-span>BUTTON</button-span>
</button>

效果

动态边框的默认动态移入样式、移入移动的点击样式

动态边框的默认动态按下样式 

 单元素旋转

代码


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

效果

单元素移动

代码

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

    <button class="button  inverted staticStreamerBorderMove determine">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button staticStreamerBorderMove cancel">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted staticStreamerBorderMove error">
        <button-span>BUTTON</button-span>
    </button>

 效果

边框线

代码

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

 效果

 顶部边框线

代码

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

效果

底部边框线

代码

<button class="button  inverted streamerBorderSideLineBottom" style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted staticStreamerBorderSideLineBottom" style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>

    <button class="button  inverted streamerBorderSideLineBottom determine">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted streamerBorderSideLineBottom cancel">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted streamerBorderSideLineBottom error">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted staticStreamerBorderSideLineBottom determine">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted staticStreamerBorderSideLineBottom cancel">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted staticStreamerBorderSideLineBottom error">
        <button-span>BUTTON</button-span>
    </button>

 效果

双边框线

代码

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

 效果

 滑动

反光滑动

代码

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

效果

 箭头滑动

代码

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

效果

 中央扩展

代码

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

 效果

 文字覆盖

横向文字覆盖

代码

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

效果

 

 纵向文字覆盖

代码

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

效果

 聚焦

搏动聚焦

代码

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

效果

猫耳朵聚焦

代码 

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

效果

熊耳朵聚焦

代码

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

效果

 

多色彩聚焦

代码

<div style="background-color: #4e5b69;height: 1000px;width: 600px;
display: flex ;justify-content: center;align-items: center;align-content: space-between;flex-direction: column">
    <button class="button  inverted pulseStart" style="--width: 550px;">
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted pulseStart determine" >
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted pulseStart cancel" >
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted pulseStart error" >
        <button-span>BUTTON</button-span>
    </button>
    <button class="button  inverted pulseStart" style="--width: 200px;--height: 200px;--radius: 50%">
        <button-span>BUTTON</button-span>
    </button>
</div>

效果

至此所有效果展示完毕

雪碧瓶子用一年
关注
专栏目录
纯css3彩虹水面倒影背景特效
06-24
纯css3彩虹水面倒影背景特效是一款蓝色的彩虹倒影在水面上背景特效下载。
CSS动态渐变色边框围绕内容区域旋转的效果(实例代码)
12-14
效果图   在网上查阅相关资料后，发现目前的动态渐变色边框的实现方式大部分为使用伪元素比内容区域大一圈然后横向移动渐变色背景的方式实现，而没有渐变色边框围绕内容区域进行旋转的效果，于是我做了一个这样的demo供大家参考。 实现原理   首先将内容区域嵌套进一个DIV盒子中并设置overflow：hidden;。这个盒子的大小是内容区域的大小加上你希望实现的渐变边框的宽度，然后将内容区域居中，这样内容区域和父元素之间就有一个看似是边框的空白区域。   现在在这个空白区域加一个比父元素更大，背景为渐变色的盒子，将层级设置为最低z-index: -1;。再将这个渐变色背景的盒子加入旋转动画就完成了
CSS——边框线条动画效果
最新发布
懒羊羊大王的博客
09-28 1440
本文使用三种方法实现边框线条的动态效果，步骤详细，有视频演示。
css 边框环绕动态效果
Teemo_shape的博客
04-12 4578
边框外面的线是会环绕动起来的，代码很简单，效果很酷哦 <div></div> html,body { height:100%; background-color:#000; } div { width:200px; height:200px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid #eee; } div::after,...
CSS特效012：边框线条环绕流动效果
大剑师兰特的GIS世界
11-17 3604
css实战中，怎么绘制边框线条环绕流动效果呢？ 这是从网上学习来的示例，主要设置利用了相对位置，利用延时产生的时间差，在每个节点显示出一部分内容，在其他时间隐藏，达到一个流动的效果。
【css】纯css实现动态边框
KatyLight的博客
08-02 1673
【css】纯css实现动态边框
CSS 实现边框动画效果
細水、長流√的专栏
09-07 1889
今天的这个卡片边框动画效果，主要应用在一些重要信息上，想引起用户注意的时候，我们才会增加这样的效果，一般情况不会添加这样的动效，但是，我们还是需要学会怎么实现它，现在我们就一起来看看这个项目的最终效果：HTML代码： CSS代码： 二、css实现边框动画 效果如图： 转载于：【每日一练】34—CSS 实现边框动画效果http://www.noobyard.com/article/p-eapbpcha-de.htmlcss3线条动画特效用纯CSS3制作的效果非常炫酷的元素边框线条动画特效电脑关
css按钮、div等元素的流光+边框+滑动+文字覆盖+聚焦效果
12-14
使用css实现多种特效 ...6.聚集效果：普通聚集、猫耳朵、熊耳朵、流光聚集 自定义内容丰富，所有效果均可自定义颜色、尺寸、动画速度、水面反光等 适用于快速开发，导入文件，引用对于类选择器即可
css按钮、div等元素的流光+边框+滑动+文字覆盖+聚焦效果+水波样式
04-07
2.流光效果：流光背景、流光边框 3.边框效果：双旋转边框、单旋转边框、呼吸效果边框 4.滑动效果：反光滑动、箭头滑动、中央扩展滑动 5.文字覆盖效果：横向文字覆盖、纵向文字覆盖 6.聚集效果：普通聚集、猫耳朵、熊...
js+css时钟效果 js+css时钟效果
04-18
js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+...
CSS3+jQuery 缩略图悬浮提示效果特效代码
03-20
jQuery+html+css实现支付输入密码样式效果
02-26
代码简介：jQuery+html+css支付输入密码代码是一款实用的遮罩弹窗支付密码输入框代码，样式简介美观，代码封装性很好，源码简介并且易懂，平时开发难免会遇到模拟支付输入密码或者系统某些功能设置需要输入密码时，...
css特效1：流光背景？我不允许你还不会
src_chao1的博客
12-14 2168
不过因为添加了伪元素，导致标签内部的文字被覆盖掉了，无法显示，因此设置自定义标签，让文本内容始终悬浮于伪元素之上。这时候鼠标移入就会发现背景颜色动起来了，但是并没有光影效果，所以我们接下来设置一个伪元素。这里我在button里添加一个自定义标签的原因之后再说。话不多说先贴图（忽略页面杂乱的背景）同样让鼠标移入后伪元素也能触发动画。然后让鼠标移动上去后背景移动起来。首先设置一个基本按钮样式。现在内容已经能正常显示了。
css实现画面转场以及边框线条动画
分享互联网的有趣知识~
03-11 2322
css实现画面转场以及边框线条动画，裁切方式的另一种实现，某些页面的官网或广告可以利用此特性实现转场。并且通过该特性还可以拓展其它效果，例如利用阴影实现边框动画。
CSS边框效果
weixin_41897680的博客
01-13 1496
CSS边框效果
CSS 实现动态流光线条效果和颜色渐变效果的实现方法详解
pleaseprintf的博客
06-29 3539
在前端开发中，为网页添加动态效果可以提升用户体验。本文将介绍如何使用 CSS 实现动态流光线条效果和颜色渐变效果，为你的网页增添炫目的视觉效果。通过以上方法，你可以使用 CSS 实现动态流光线条效果和动态流光线条颜色渐变效果，为你的网页增加动感和吸引力。希望本文能对你在实现动态流光线条效果和颜色渐变效果方面有所帮助。如有任何疑问或意见，欢迎留言讨论。需要系统源码或者BiShe加V。
纯css实现边框动画特效 css
只会写bug的靓仔的博客
12-13 3148
下面是完整代码，实现图示效果，效果为出现四个白框，和去除黑色背景。 <!-- 了解更多模块 --> <!DOCTYPE html> <html> <head> <style type="text/css"> body{ background-color: #D0D0D0; } .knowmorbutton { width: 100px; height: 40px; position: relative; backgr
CSS：实现动态流光线条效果/动态流光线条颜色渐变效果
热门推荐
smm的博客
04-25 1万+
使用纯CSS实现动态流光线条效果（拖尾透明）
分享83个CSS3特效，总有一款适合您
adendean的博客
02-14 1163
知识付费甚欢喜，为咱码农谋福利。css3+three.js彩色横向线条移动闪烁背景动画特效。CSS3扁平化谷歌Loading加载图标动画特效。css3 svg飞速行驶的卡通赛车加载动画特效。css3 svg方块组合花纹图形背景动画特效。css3彩色loading加载进度条动画特效。CSS3圆环旋转加载loading动画特效。CSS3线性圆形Loading加载动画特效。CSS3气泡交叉游动网页加载图标动画特效。CSS3六边形Loading加载动画特效。CSS3 SVG彩色叶子发光变色动画特效。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值