使用CSS实现简单的边框流光效果
我要评论首先上一个效果图
有木有发现和夜晚街上的广告牌很像，接下来让我们看看如何使用css实现的吧
结构分析
首先很明显应该使用一个盒子将文字装起来，并且将文字进行了居中，然后我们看到这盒子的周围围绕了两条光带，那么这两条光带是怎么实现的呢？
其实这是用四个小盒子实现的，将这四个小盒子分别放在大盒子的周围（紧贴这大盒子的内壁），然后使用这几个小盒子实现流光（跑马灯）效果。
接下来看看具体的代码实现
代码实现
HTML结构
首先准备一个div大盒子，用来装我们的广告语，还有跑马灯的四个小盒子
<div class="main"> 跑马灯 <div></div> <div></div> <div></div> <div></div> </div>
给大盒子设置样式，方便我们在浏览器中看到
body {
background-color: #000;
}
.main {
position: absolute;
width: 400px;
height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);//当为百分百单位时，相对的是自身的宽高
overflow: hidden; //溢出部分隐藏
text-align: center;
line-height: 150px;
background-color: transparent;
color: aquamarine;
font-size: 30px;
font-family: '宋体';
}当前效果是这样的
下来我们给大盒子设置灯光效果。
内部灯光效果
在效果图上，我们可以看到灯光尾部的颜色比较淡，头部颜色较亮， 展现出一种过渡效果，那这样的效果是怎么实现的呢？
这里就需要用到css3中background的一个新的属性值:linear-gradient,通过这个属性，我们可以将多个颜色设置为一个盒子的背景颜色，并且还有过渡效果，更强大的地方在于，这个属性值可以设置渐变的方向。
语法：linear-gradient(渐变方向,color1,color2,color3...)
这里我选择了#fff, #acd, cyan渐变的三种配色
那就开始使用这个属性值，这是其中一个小盒子的效果（顶部），其他的效果实现方法都类似。
.main div {
position: absolute;
}
.main :nth-child(1) {
top: 0;
left: 0;
width: 100%; //与父盒子等宽
height: 2px; //高要设置得较小
background: linear-gradient(to right, #fff, #acd, cyan);
}这里设置的是顶部的灯光效果，使用top和left的属性设置这个盒子的位置；使用width:100%，使得这个盒子的宽度与大盒子保持一致，然后使用height:2px,将灯光条的宽度设置为2px,当然也可以根据实际需求，改变灯光条的宽度
接着剩下三条灯光的实现原理基本相同，只有位置和背景颜色不同
剩下右，下，左背景颜色的渐变方向分别是to bottom、to left、to top
目前效果是这样的：
这离我们想要的跑马灯效果越来越像了
其实我们还差最后一步，给灯光加上动画效果，也就是css3中的animation动画属性
同样我们也以设置顶部的灯光效果作为示范：
css3动画：
@keyframes run1 {
from {
transform: translateX(-100%) //初始让它沿X轴负方向（向左）位移自身的宽度
}
to {
transform: translateX(100%) //动画结束时，让它回到原位
}
}给盒子加上动画
.main :nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 2px;
animation: run1 1s linear infinite;//复合属性写法，其中infinite是让动画效果无限循环
background: linear-gradient(to right, #fff, #acd, cyan);
}前面没有设置动画之前，可以看到颜色最深的部分在最右边，但是跑马灯的实现需求是需要颜色最深部分从左边出现，然后移动到右边，所以应该将动画的初识位置向左移整个盒子的长度，这样就实现了需求
剩下三个盒子的实现方式类似，设置好后，最终得到我们想要的跑马灯效果
全部代码如下：
<!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>
</head>
<style>
body {
background-color: #000;
}
.main {
position: absolute;
width: 400px;
height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
text-align: center;
background-color: transparent;
line-height: 150px;
color: aquamarine;
font-size: 30px;
font-family: '宋体';
}
.main div {
position: absolute;
}
.main :nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 2px;
animation: run1 1s linear infinite;
/* animation-delay: 0s; */
background: linear-gradient(to right, #fff, #acd, cyan);
}
.main :nth-child(2) {
top: 0;
right: 0;
height: 100%;
width: 2px;
animation: run2 1s linear infinite;
/* animation-delay: 1s; 设置动画延迟加载时间*/
background: linear-gradient(to bottom, #fff, #acd, cyan);
}
.main :nth-child(3) {
bottom: 0;
left: 0;
height: 2px;
width: 100%;
animation: run3 1s linear infinite;
/* animation-delay: 2s; 设置动画延迟加载时间*/
background: linear-gradient(to right, #fff, #acd, cyan);
}
.main :nth-child(4) {
top: 0;
left: 0;
height: 100%;
width: 2px;
animation: run4 1s linear infinite;
/* animation-delay: 3s; 设置动画延迟加载时间 */
background: linear-gradient(to top, #fff, #acd, cyan);
}
@keyframes run1 {
from {
transform: translateX(-100%)
}
to {
transform: translateX(100%)
}
}
@keyframes run2 {
from {
transform: translateY(-100%)
}
to {
transform: translateY(100%)
}
}
@keyframes run3 {
from {
transform: translateX(100%)
}
to {
transform: translateX(-100%)
}
}
@keyframes run4 {
from {
transform: translateY(100%)
}
to {
transform: translateY(-100%)
}
}
</style>
<body>
<div class="main">
海绵宝宝
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>以上就是使用CSS实现简单的边框流光效果的详细内容，更多关于CSS边框流光效果的资料请关注脚本之家其它相关文章！
相关文章
这篇文章给大家介绍了如何使用CSS实现渐变圆角边框的效果，有没有发现在现如今的网站应用中，我们大量的使用到这类场景,在解决这类问题时，我们利用了css的mask与mask-comp2023-10-12
今天给大伙带来的是一个锯齿形边框，类似于传统邮票的边框，有一圈锯齿形状，其实看到这种效果，相信很多人第一反应是采用伪元素的方式添加小三角形来实现锯齿状，确实是这2023-09-08
这篇文章主要介绍了CSS实现切角+边框+投影+内容背景色渐变效果，单纯用css实现切角+边框+投影+内容背景色渐变所有效果，因为UI没给背景切图，寻思这个理论上用css就能实现2021-10-27
本文通过代码给大家介绍css背景和边框标签的一些知识，通过相关属性设置背景颜色，背景图像，对css背景与边框的相关知识感兴趣的朋友一起看看吧2021-05-21
这篇文章主要介绍了css 中多种边框的实现小窍门,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2021-04-07- 边框流动效果是一种很酷的效果，可以为网页增添一些动感和活力，本文就来介绍一下css实现边框流动的项目实践，具有一定的参考价值，感兴趣的可以了解一下2024-02-01
最新评论