使用CSS实现按钮边缘跑马灯动画
csdn 发布时间：2023-04-28 14:49:39 作者：北极光之夜。 
我要评论
我要评论这篇文章主要介绍了使用CSS实现按钮边缘跑马灯动画,技术上只使用了css+html,还是非常容易学习的，文中提供了详细的代码,需要的朋友可以参考下
先来看看效果：
制作过程：
1. 定义标签，a标签是按钮，4个span就是按钮周围那四条行动的蓝边。：
<a href="https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343" class="night" target="blank">
<span></span>
<span></span>
<span></span>
<span></span>
night
</a>
2. 定义按钮.night的基本样式：
.night{
position: relative;
width: 300px;
height: 100px;
color: rgb(18, 190, 243);
letter-spacing: 12px;
font-size: 50px;
line-height: 100px;
text-align: center;
/* background-color: rgb(31, 49, 133); */
background-image: linear-gradient(90deg, rgb(40, 62, 161) 50%,rgb(31, 49, 133) 50% );
text-transform: uppercase;
user-select: none;
text-decoration: none;
overflow: hidden;
box-shadow: inset 0 0 10px rgb(14, 20, 105),
0 0 5px rgb(9, 208, 235);
transition: all 0.5s;
}
position ： 相对定位。
letter-spacing：字间距。
linear-gradient：渐变颜色。
text-transform：全部字母为大写。
user-select：文本不可选中。
text-decoration：消除默认下划线。
overflow：溢出隐藏。
box-shadow：阴影。
transition：过渡效果。
3. 鼠标经过按钮样式变化：
.night:hover{
text-shadow: 0 0 5px rgb(18, 190, 243),
0 0 8px rgb(18, 190, 243),
0 0 10px rgb(18, 190, 243);
background-image: linear-gradient(90deg, rgb(25, 38, 99) 50%,rgb(13, 22, 58) 50% );
box-shadow: inset 0 0 10px rgb(14, 20, 105),
0 0 5px rgb(9, 208, 235),
0 0 10px rgb(9, 208, 235);
}
text-shadow：文字阴影。
lineear-gradient：渐变色变化。
box-shadow：盒子阴影变化。
4. 4条span的基本样式：
.night span{
position: absolute;
}
absolute 绝对定位
5. 设置按钮上方那条运动蓝线样式：
.night span:nth-child(1){
top: 0;
left: 0;
width: 100%;
height: 2px;
background-image: linear-gradient(to right, transparent , rgb(0, 153, 255) );
animation: move1 2s linear infinite;
}
@keyframes move1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
linear-gradient：渐变色。
transparent为透明色。
animation：设置动画，让蓝线运动起来。
transform: translateX(-100%); 在X轴上的偏移为-100%。
transform: translateX(100%); 让它偏移到100%。
6. 以此类推，其它三条也设置动画，再让左边和右边那条设置动画延迟便可。：
.night span:nth-child(2){
top: 0;
right: 0;
width: 2px;
height: 100%;
transform: translateY(-100%);
background-image: linear-gradient(to bottom, transparent , rgb(0, 153, 255) );
animation: move2 2s linear infinite;
animation-delay: 1s;
}
@keyframes move2 {
100%{
transform: translateY(100%);
}
}
.night span:nth-child(3){
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-image: linear-gradient(to left, transparent , rgb(0, 153, 255) );
animation: move3 2s linear infinite;
}
@keyframes move3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.night span:nth-child(4){
top: 0;
left: 0;
width: 2px;
height: 100%;
transform: translateY(100%);
background-image: linear-gradient(to top, transparent , rgb(0, 153, 255) );
animation: move4 2s linear infinite;
animation-delay: 1s;
}
@keyframes move4 {
100%{
transform: translateY(-100%);
}
}
animation-delay: 1s; 设置动画延迟1秒播放。
完整代码：
<!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>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(4, 4, 19);
}
.night{
position: relative;
width: 300px;
height: 100px;
color: rgb(18, 190, 243);
letter-spacing: 12px;
font-size: 50px;
line-height: 100px;
text-align: center;
/* background-color: rgb(31, 49, 133); */
background-image: linear-gradient(90deg, rgb(40, 62, 161) 50%,rgb(31, 49, 133) 50% );
text-transform: uppercase;
user-select: none;
text-decoration: none;
overflow: hidden;
box-shadow: inset 0 0 10px rgb(14, 20, 105),
0 0 5px rgb(9, 208, 235);
transition: all 0.5s;
}
.night:hover{
text-shadow: 0 0 5px rgb(18, 190, 243),
0 0 8px rgb(18, 190, 243),
0 0 10px rgb(18, 190, 243);
background-image: linear-gradient(90deg, rgb(25, 38, 99) 50%,rgb(13, 22, 58) 50% );
box-shadow: inset 0 0 10px rgb(14, 20, 105),
0 0 5px rgb(9, 208, 235),
0 0 10px rgb(9, 208, 235);
}
.night span{
position: absolute;
}
.night span:nth-child(1){
top: 0;
left: 0;
width: 100%;
height: 2px;
background-image: linear-gradient(to right, transparent , rgb(0, 153, 255) );
animation: move1 2s linear infinite;
}
@keyframes move1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
.night span:nth-child(2){
top: 0;
right: 0;
width: 2px;
height: 100%;
transform: translateY(-100%);
background-image: linear-gradient(to bottom, transparent , rgb(0, 153, 255) );
animation: move2 2s linear infinite;
animation-delay: 1s;
}
@keyframes move2 {
100%{
transform: translateY(100%);
}
}
.night span:nth-child(3){
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-image: linear-gradient(to left, transparent , rgb(0, 153, 255) );
animation: move3 2s linear infinite;
}
@keyframes move3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.night span:nth-child(4){
top: 0;
left: 0;
width: 2px;
height: 100%;
transform: translateY(100%);
background-image: linear-gradient(to top, transparent , rgb(0, 153, 255) );
animation: move4 2s linear infinite;
animation-delay: 1s;
}
@keyframes move4 {
100%{
transform: translateY(-100%);
}
}
</style>
</head>
<body>
<a href="https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343" class="night" target="blank">
<span></span>
<span></span>
<span></span>
<span></span>
night
</a>
</body>
</html>
到此这篇关于使用CSS实现按钮边缘跑马灯动画的文章就介绍到这了,更多相关CSS按钮跑马灯内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了使用css制作出血轮眼和轮回眼特效,本文只使用了css+html技术，非常容易上手学习，火影里的血轮眼和轮回眼特效炫酷十足，喜欢的朋友快来看看是怎么制作的2023-04-24
本文给大家分享的是一个css创意特效端午加载动画，想法是让粽叶，糯米，红枣绕圆旋转，然后聚集起来融合后变成一个可爱的小粽子的效果，对css加载特效实现代码感兴趣的朋友2022-05-31
本文主要介绍了css实现文字断裂效果的示例代码，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-20
这篇文章主要介绍了300 多行css代码搞定微信 8.0 的炸裂特效,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-05
这篇文章主要介绍了css实现透明渐变特效的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-02-18
这篇文章主要介绍了css实现发光文字及一点点js特效 ,需要的朋友可以参考下2019-04-23
这篇文章主要介绍了CSS 图片动画特效的示例代码（相框）的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-14- 这篇文章给大家介绍的是一个利用CSS实现的酷炫的下拉框，实现后效果真的非常不错，文中给出了详细实现过程和示例代码，感兴趣的朋友们下面来一起看看吧。2016-10-20
- 半透明的边框如何实现？多重边框如何实现？这篇文章就是主要针对CSS边框特效实现技巧进行探究，感兴趣的小伙伴们可以参考一下2016-04-26
- 这篇文章主要介绍了CSS实现段落首字母、首字放大特效,效果非常不错，需要的朋友可以参考下2014-12-31
最新评论