首页 > 其他分享 >CSS技巧专栏:一日一例 7 - 纯CSS实现炫光边框按钮特效

CSS技巧专栏:一日一例 7 - 纯CSS实现炫光边框按钮特效

时间:2024-07-20 13:29:05浏览次数:12  
标签:动画 炫光 0% 边框 按钮 top CSS left

CSS技巧专栏:一日一例 7 - 纯CSS实现炫光边框按钮特效

本例效果图

案例分析

相信你可能已经在网络见过类似这样的流光的按钮,在羡慕别人做的按钮这么酷的时候,你有没有扒一下它的源代码的冲动?或者你当时有点冲动,却转眼忘却了。今天,刚巧,你又看到它了,今天跟我一起扒一扒它的源代码。

左边按钮分析:

1. 圆角按钮的光线效果,这个稍微费劲些。难点:动画层的路径移动

2. 倒影

特此说明

本专题专注于讲解如何使用CSS制作按钮特效。前置的准备工作和按钮的基本样式,都在本专栏第一篇文章中又详细说明。自本专栏第四篇文章起,本专栏都将直接跳过前面的内容,不再重复复制,需要了解按钮基础样式的同学,请移步:《CSS技巧 - 一日一例 (1):会讨好的热情按钮》。

按钮布局

<div class="container">
    <button class="base ">蓬门今始为君开</button>
</div>   

基本样式

.base{
  position: relative;   
  padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ,并确保了按钮文字水平方向居中 */
  font-family: "微软雅黑", sans-serif;
  font-size: 1.5rem;  
  line-height: 1.5rem; /* 行高和字号大小相等,可以实现按钮文字在按钮内垂直居中 */ 
  font-weight:700;
  color: var(--color);  /* 文字颜色为预定义的前景色 */
  cursor: pointer;   /* 鼠标移动到按钮上时候的形状:手型 */
  user-select: none;  /* 让用户不能选择按钮上的文字 */
  white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */
  border-radius: 2rem; 
  text-decoration: none; 
  text-transform:uppercase; /* 字母自动修正为大写 */
  transition: all .5s; /* 按钮响应动画效果的持续时间 */
  margin: 1.5rem 2rem;
}

对的,完成上面两步,咱们的按钮基本样式就这样了。接下来就是实现按钮的美化了。

按钮样式

如果是做直角的流光效果,相对比较容易。做四条颜色渐变的线,分别四个动画依次动起来就可以实现了。但要实现圆角的光效,做直线是不行的。那么这个就需要其他方法了。

怎么解决这个问题呢?我用一张图来表达一下这个动画的基本解决思路:

按钮光效解决方案 

解决思路

1. 按钮层在最下面,设定overflow:hidden。

2. 最上层放一个蒙版层,用来遮挡动画层。

3. 在两个层中间放一层动画层,做个圆形在这个层沿着按钮层的轮廓轮廓滚动。这样,露出的部分就是我们看到的流光的效果。

有了思路,我们就开始:

写样式表

先修改一下基本布局:

<button class="base button">花径不曾缘客扫</button>

接下来,我们的按钮样式就着落在这个 button 类上。

.button {   
  background:none;  
  position: relative;
  color: #fff;
  z-index: 0;
  overflow: hidden;
  transition: 300ms;
  -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(0, 0, 0, .2));   
}
.button:before {
  content: '';
  position: absolute;
  top:1px;
  left: 1px;
  border:1px solid #666;
  border-radius: 2rem;
  background: var(--main-bg-color);
  width: calc(100% - 4px);
  height: calc(100% - 4px); 
  z-index: -1;
  transition: 300ms;  
}

写到这里,我们就有了两个层:按钮层(button)和 蒙版层(button:before),按钮样子也变成了这样:

接下来,我们要给它增加中间滚动的层:

.moving-element{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 110px;
  height: 110px;    
  border-radius: 2rem;  /* 圆形按钮 */
  background-image: radial-gradient(#fff 40%,transparent 80%);  /* 径向渐变填充,白色到透明 */
  z-index: -2;  
}

这个层要加载按钮标签中:

<button class="base button">
    花径不曾缘客扫
    <span class="moving-element"></span>
</button>

接下来,我们看看这个层是不是出现了:

没错,虽然稍显僵硬,但它还是出现了。我们先看看它现在的位置:

接下来,就是让它动起来。为了方便看到它,我们先把 before层的背景色注释掉。

按钮常态动画

有了按钮的基本样式,接下来就是加动画效果在上面。这个按钮的动画,要用到CSS3关键帧动画。

我在上图中,用红色标注了六个点,这就是我们要改变位置的六个关键帧。首先,我先把这个滚动的层,调整到左上角的红点位置,作为起点。

.moving-element{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 110px;
  height: 110px;    
  border-radius: 2rem;  /* 圆形按钮 */
  background-image: radial-gradient(#fff 40%,transparent 80%);  /* 径向渐变填充,白色到透明 */
  z-index: -2;  
  transform: translate(-45px, -55px);  /* 定位动画第一帧的起点 */
  filter:blur(10px); /* 让渐变填充的圆形光球更顺滑一些 */
}

我们先绑定动画到这个圆形球上,再进行动画的编写和调整。

animation: moveAround 2s linear infinite;

接下来,就开始动手写动画:定义六个关键帧,为了让关键帧过渡平滑,我们需要调整六个点的时间间隔。第一个阶段,是从起点直接向右,水平运动到右侧的圆角的第一个弧形拐点。这个阶段,我们暂时把它定义为40%。然后圆弧间的两段动画各占5%。这样,我们的关键帧时间安排大概如下:

@keyframes moveAround {
  0%{}
  40%{}
  45%{}
  50%{}
  90%{}
  95%{}
  100%{}
}

然后,我们给每个关键帧定义光球的位置。

我们知道光球的运动定位是以它自己的圆心为中心的。所以,我们只要在第一帧把圆心定位在标记的红点上。然后按照时间设计运动路线就行。

这里还有一个问题,为了提高按钮的通用性,我们不能把它的点位写成固定的px,所以,我们要用:left:30%,top:20% 这样的形式,这样即使未来按钮有一定的大小变化,我们的动画可以不做修改(或者仅做少量修改)就可以适用。

接下来,我们来调整圆球的位置:

@keyframes moveAround {
  0%{left:0%;top:0%}
  40%{ left:90%; top:0% }
  45%{}
  50%{}
  90%{}
  95%{}
  100%{}
}

这是第一段动画,把小球从左侧移动到右侧,按钮宽度90%的位置。

看来没有问题,接下来,我们完成剩下各个阶段的动画。

@keyframes moveAround {
  0%{ left:0%;top:0% }
  40%{ left:90%; top:0% }
  45%{ left:110%;top:30% }
  50%{ left:90%;top:100% }
  90%{ left:0%;top:100% }
  95%{ left:-30%;top:30% }
  100%{ left:-0%;top:0% }
}

看起来还有些生硬,我们现在把 蒙版层的背景颜色加上,看看效果如何:

好吧,比预想的效果在圆角那里还是稍显生硬,这个就需要在增加关键帧并且调整时间间隔来实现了。在这里,我就不做更细致的调整了。各位看官可以自己动手尝试一下。

接下来,我们要做:

按钮响应动画

.button:hover{
  transition: 300ms;
  color: #ffbf00;  
}
.button:hover:before{
  border:1px solid #664d00;
  transition: 300ms;  
}
.button:hover .moving-element{
  transition: 300ms;
  background-image: radial-gradient(#ffd966 40%,transparent 80%);
}

好了,这样的话,这个 纯CSS实现炫光边框按钮特效 就完成了。

按钮完成

Q:第二个按钮呢?你怎么不写?

A:哈哈哈,那个按钮,当作业吧!感兴趣的小伙伴,可以去试试写第二个按钮!

CSS学习的过程,也是不断思考的过程。在学习的路上,我们共勉!

好了,写到这里,今天的 CSS技巧分享 - 一日一例 就算写完了。愿大家学习进步,薪水增加,职位高升!收到我的祝福的小伙伴,收藏+点赞+评论啊~ 我在评论区等你们聊天~

本专栏其他文章:

CSS技巧专栏:一日一例1.会讨好的热情按钮

CSS技巧专栏:一日一例 2.纯CSS实现 多彩边框按钮特效

CSS技巧专栏:一日一例 3.纯CSS实现炫酷多彩按钮特效

CSS技巧专栏:一日一例 4.纯CSS实现两款流光溢彩的酷炫按钮特效

CSS技巧专栏:一日一例 5-纯CSS实现背景色从四周向中心填充的按钮特效

CSS技巧专栏:一日一例 6 - 纯CSS实现粉红色跳出来的立体按钮特效

CSS技巧专栏:一日一例 7 - 纯CSS实现炫光边框按钮特效

CSS技巧专栏:一日一例 8 - 纯CSS利用mask属性实现按钮边框对称包围特效

标签:动画,炫光,0%,边框,按钮,top,CSS,left
From: https://blog.csdn.net/uuplay0216/article/details/140498365

相关文章

  • 渐变边框文字效果?CSS 轻松拿捏!
    今天,有个群友问了我这么一个问题,如果不想切图,是否有办法实现带渐变边框的字体效果?如下所示:本文,就将尝试一下,在CSS中,我们可以如何尽可能的实现这种渐变边框字体效果。元素叠加首先,比较容易想到的写法是通过元素叠加实现。元素本身实现文字效果本身通过元素的伪元素,配合ba......
  • css技巧混合模式
    看上面这个神奇的效果,文字在黑色背景里面显示为白色,而在白色的背景里面显示为黑色,这就是文字智能适配背景。看到这样的需求,大多数人第一时间想到的是,文字元素有两个,是完全重叠的两层,一层是黑色,一层是白色,然后通过遮罩实现,这里使用了CSS3新增了一个属性-- mix-blend-mode ......
  • 前端必修技能:高手进阶核心知识分享 - CSS伪类和伪元素
    前端必修技能:高手进阶核心知识分享-CSS伪类和伪元素前端必修技能:高手进阶核心知识分享-CSS伪类和伪元素在前端的工作中,经常会遇到伪类和伪元素,但很多人(包括我自己)都没有仔细的去分辨它们,归其原因,大概是因为:写法相似。但其实,伪类和伪元素还是有很多不同的。温......
  • 编织文字之美:WebKit的CSS文本格式化能力全解析
    编织文字之美:WebKit的CSS文本格式化能力全解析在网页设计中,文本不仅是传递信息的媒介,更是展现美学的重要元素。WebKit,作为Safari、QQ浏览器等众多浏览器的内核,提供了强大的CSS文本格式化支持。通过CSS,开发者可以对文本进行丰富的样式设计,从而提升用户体验和网站的视觉吸引......
  • 动态美学:WebKit中CSS转换与动画的魔力
    动态美学:WebKit中CSS转换与动画的魔力在现代网页设计中,CSS转换(Transforms)和动画(Transitions)是实现动态效果的两大法宝。它们能够为用户带来流畅、直观的交互体验。WebKit,作为Safari、QQ浏览器等众多浏览器的核心引擎,对CSS转换和动画提供了全面的支持。本文将深入探讨WebKit......
  • CSS实现点击翻转效果
    1、先看效果就是点击之后反转成蓝色的过程,不知道用什么软件能录制个gif(如果你有什么好的录制gif软件可以告诉我,哈哈),就将就着看吧。上代码,html版本<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-wi......
  • CSS3案例--制作服装软文推广
    效果图:先使用通配符消除样式:字体倾斜效果使用font-style:italic;导入自定义字体样式:其中font-family属性值为自定义名src属性值存放字体样式所在位置 补充知识点:1.后代选择器表示方法:父选择器与后代选择器用空格隔开,或者用>隔开2.并集选择器表示方法:选择器之间用","隔开3.......
  • 【CSS学习第一篇】
    CSS学习第一篇1.CSS简介1.1什么是CSS?1.2CSS语法规范2.CSS选择器2.1CSS选择器的作用2.2CSS选择器的分类2.3标签选择器2.4类选择器2.5id选择器2.6通配符选择器3.CSS字体属性3.1font-family设置字体系列3.2font-size字号大小3.3font-weight字体粗细3.4font......
  • 前端重学笔记-CSS篇-10
    一、HTML5新特性HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。声明:1.新特性增加了很多,但是我们专注于开发常用的新特......
  • CSS盒子模型 (圆角边框,盒子阴影,文字阴影)
    (大家好,今天我们将继续来学习CSS的相关知识,大家可以在评论区进行互动答疑哦~加油!......