您正在使用 IPV4 [18.212.102.174] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
使用CSS实现按钮边缘跑马灯动画
内容摘要: !DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'metahttp-equiv='X-UA-Compatible'content='IE=edge'metaname='viewport'content='width=device-width,initial-scale=1.0'titleDocument/titl......
<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="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:inset0010pxrgb(14,20,105),

005pxrgb(9,208,235);

transition:all0.5s;

}

.night:hover{

text-shadow:005pxrgb(18,190,243),

008pxrgb(18,190,243),

0010pxrgb(18,190,243);

background-image:linear-gradient(90deg,rgb(25,38,99)50%,rgb(13,22,58)50%);

box-shadow:inset0010pxrgb(14,20,105),

005pxrgb(9,208,235),

0010pxrgb(9,208,235);

}

.nightspan{

position:absolute;

}

.nightspan:nth-child(1){

top:0;

left:0;

width:100%;

height:2px;

background-image:linear-gradient(toright,transparent,rgb(0,153,255));

animation:move12slinearinfinite;

}

@keyframesmove1{

0%{

transform:translateX(-100%);

}

100%{

transform:translateX(100%);

}

}

.nightspan:nth-child(2){

top:0;

right:0;

width:2px;

height:100%;

transform:translateY(-100%);

background-image:linear-gradient(tobottom,transparent,rgb(0,153,255));

animation:move22slinearinfinite;

animation-delay:1s;

}

@keyframesmove2{

100%{

transform:translateY(100%);

}

}

.nightspan:nth-child(3){

left:0;

bottom:0;

width:100%;

height:2px;

background-image:linear-gradient(toleft,transparent,rgb(0,153,255));

animation:move32slinearinfinite;

}

@keyframesmove3{

0%{

transform:translateX(100%);

}

100%{

transform:translateX(-100%);

}

}

.nightspan:nth-child(4){

top:0;

left:0;

width:2px;

height:100%;

transform:translateY(100%);

background-image:linear-gradient(totop,transparent,rgb(0,153,255));

animation:move42slinearinfinite;

animation-delay:1s;

}

@keyframesmove4{

100%{

transform:translateY(-100%);

}

}

</style>

</head>

<body>

<ahref="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旋转导航的示例代码

发布日期:2023/5/2
手机扫二维码直达本页
发布时间:13:02:46
点  击:10
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....