1. Toy模板网首页
  2. > Toy博客

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

8月前 作者：雪碧瓶子用一年 分类：Toy博客 阅读(35) 违法举报

这篇具有很好参考价值的文章主要介绍了css特效：流光背景+动态边框+滑动效果+聚集效果+小耳朵+阴影流光效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

css背景特效,css3动态特效,css,前端css背景特效,css3动态特效,css,前端

目录

总览

类选择器

自定义变量

效果

三种基本样式

确定

取消

 删除

流光效果

背景流光

边框流光

​编辑动态边框

双元素旋转

 单元素旋转

单元素移动

边框线

 顶部边框线

底部边框线

双边框线

 滑动

反光滑动

 箭头滑动

 中央扩展

 文字覆盖

横向文字覆盖

 纵向文字覆盖

 聚焦

搏动聚焦

猫耳朵聚焦

熊耳朵聚焦

​编辑​编辑 ​编辑

多色彩聚焦

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

文章：

https://blog.csdn.net/src_chao1/article/details/130009166?spm=1001.2014.3001.5501https://blog.csdn.net/src_chao1/article/details/130009166?spm=1001.2014.3001.5501

资源：

https://download.csdn.net/download/src_chao1/87663520https://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>

效果

css背景特效,css3动态特效,css,前端css背景特效,css3动态特效,css,前端css背景特效,css3动态特效,css,前端

取消

代码

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

效果

css背景特效,css3动态特效,css,前端 css背景特效,css3动态特效,css,前端css背景特效,css3动态特效,css,前端

 删除

 代码

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

效果

css背景特效,css3动态特效,css,前端 css背景特效,css3动态特效,css,前端css背景特效,css3动态特效,css,前端

流光效果

背景流光

代码 

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

效果

css背景特效,css3动态特效,css,前端

css背景特效,css3动态特效,css,前端

边框流光

代码

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

效果

css背景特效,css3动态特效,css,前端

css背景特效,css3动态特效,css,前端

动态边框

双元素旋转

代码

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

效果

css背景特效,css3动态特效,css,前端

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

css背景特效,css3动态特效,css,前端

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

css背景特效,css3动态特效,css,前端

 单元素旋转

代码


    <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>

效果

css背景特效,css3动态特效,css,前端

单元素移动

代码

<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>

 效果

css背景特效,css3动态特效,css,前端

边框线

代码

<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>

 效果

css背景特效,css3动态特效,css,前端

 顶部边框线

代码

<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>

效果

css背景特效,css3动态特效,css,前端

底部边框线

代码

<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>

 效果

css背景特效,css3动态特效,css,前端

双边框线

代码

<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>

 效果

css背景特效,css3动态特效,css,前端

 滑动

反光滑动

代码

<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>

效果

css背景特效,css3动态特效,css,前端

css背景特效,css3动态特效,css,前端

css背景特效,css3动态特效,css,前端

 箭头滑动

代码

<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>

效果

css背景特效,css3动态特效,css,前端

css背景特效,css3动态特效,css,前端

css背景特效,css3动态特效,css,前端

 中央扩展

代码

<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>

 效果

css背景特效,css3动态特效,css,前端css背景特效,css3动态特效,css,前端

 文字覆盖

横向文字覆盖

代码

 <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>

效果

 css背景特效,css3动态特效,css,前端

css背景特效,css3动态特效,css,前端

css背景特效,css3动态特效,css,前端

 纵向文字覆盖

代码

<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>

效果

css背景特效,css3动态特效,css,前端

 聚焦

搏动聚焦

代码

<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>

效果

css背景特效,css3动态特效,css,前端

css背景特效,css3动态特效,css,前端

css背景特效,css3动态特效,css,前端

猫耳朵聚焦

代码 

 <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>

效果

css背景特效,css3动态特效,css,前端

css背景特效,css3动态特效,css,前端

css背景特效,css3动态特效,css,前端

熊耳朵聚焦

代码

<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>

效果

css背景特效,css3动态特效,css,前端css背景特效,css3动态特效,css,前端 css背景特效,css3动态特效,css,前端

多色彩聚焦

代码

<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>

效果

css背景特效,css3动态特效,css,前端

css背景特效,css3动态特效,css,前端css背景特效,css3动态特效,css,前端

至此所有效果展示完毕文章来源地址https://www.toymoban.com/news/detail-775769.html

到了这里，关于css特效：流光背景+动态边框+滑动效果+聚集效果+小耳朵+阴影流光效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • SVG+CSS动画实现动效（流光、呼吸等效果）

    SVG+CSS动画实现动效（流光、呼吸等效果）

    绘制流光线条 创建SVG，根据UI给的背景图，定位到图上每条管道（即流光线条的路径）的起始点以及拐点，绘制折线。绘制折线的时候按照下图方框通过class分组，这几组的光线流动是同时出发的。 svg相关知识点：https://www.w3school.com.cn/svg/index.asp 折线样式 让光线动起来 上边

    2024年01月21日
    浏览(45)

  • Cesium中的流光道路效果 - 创建令人惊叹的3D动态效果

    Cesium是一个强大的地理信息系统（GIS）开发平台，提供了许多令人惊叹的功能集，其中包括创建流光道路效果。这种效果可以为地图添加动态的路径效果，使用户可以更好地理解地理数据的关系和变化。在本文中，我们将探讨如何使用Cesium创建流光道路效果，并提供相应的源

    2024年02月04日
    浏览(63)
  • CSS 设置渐变背景 CSS 设置渐变边框

    CSS 设置渐变背景 CSS 设置渐变边框

    一、css渐变背景添加透明度opacity css渐变背景经常会在项目开发中遇到，此时UI如果给出的是单一的渐变背景（没有背景透明度），这个我们会很快的写出代码，如下: 但偶尔的时候UI会给煎饼的背景色添加一个透明度，但是使用 opacity属性会导致文本也会有透明度 ，接下来给

    2024年02月09日
    浏览(31)
  • 深入理解css3背景图边框

    深入理解css3背景图边框

    重点理解 border-image-slice 设置的值将边框背景图分为9份，图像中间的舍弃，其他部分图像对应边框的相应区域放置，上右下左四角固定，border-image-repeat设置的是除四角外其他部分的显示方式。 截图来自菜鸟教程：CSS3 border-image-slice 属性 | 菜鸟教程  背景图像大小 81*81 依据

    2024年02月10日
    浏览(27)
  • 【CSS】透明背景的圆角渐变边框实现方案

    【CSS】透明背景的圆角渐变边框实现方案

    css的渐变边框可以用下面方式实现 css的圆角边框可以用下面方式实现 那想要实现一个圆角的渐变边框呢，可能会以为，两个都用上不就可以了，但事实是，这两个属性并不兼容，所以要实现一个圆角的渐变边框，就得需要曲线救国的方法了 最终效果图    

    2024年02月13日
    浏览(52)

  • css 四角边框移动效果

    块是长宽相等的正方形，大小浏览器分辨率变化而变化 利用平移变化translate来时实现边框到达鼠标划到的块，坐标是鼠标滑到块的offsetLeft和offsetTop

    2024年02月15日
    浏览(25)

  • 使用css实现边框流动效果

    要实现一个边框流动的效果，可以使用CSS动画来实现。在HTML中，我们需要创建一个元素（例如div），并将其设置为具有一定宽度和高度的盒子。然后，我们可以使用CSS来定义该元素的边框样式、位置和动画。 首先，我们需要在CSS中定义我们的元素。我们可以设置该元素的宽

    2024年02月09日
    浏览(35)
  • 40.CSS输入字段文本和渐变边框动画效果

    40.CSS输入字段文本和渐变边框动画效果

    index.html css

    2024年02月07日
    浏览(35)
  • css+js实现点击特效效果

    css+js实现点击特效效果

    话不多说，先上效果图  实现代码：

    2024年02月16日
    浏览(34)
  • CSS3 实现边框圆角渐变色&&渐变文字效果

    CSS3 实现边框圆角渐变色&&渐变文字效果

      background-clip: text; 是CSS中的一个属性，用于指定背景图片或颜色的裁剪方式，裁剪的区域是文本的轮廓。具体来说，就是将背景图片或颜色限制在文本的轮廓内，而不是整个元素的范围内。这个属性通常用于创建一些特殊的文本效果，比如文字渐变、文字填充等。  参考:

    2024年02月16日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包