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

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 劳动节 009
2024年 端午节 049
2025年 元 旦 254
2025年 春 节 282
综合数码金融娱乐服务报刊政府机构 推荐 排名 今日 申请 友情  
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
css3实现四周线条环绕流动效果
内容摘要: !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>

body{

padding:120px;

}

.mainbox{

width:320px;

height:320px;

position:relative;

/*超出隐藏需要加上*/

overflow:hidden;

}

.content{

width:320px;

height:320px;

line-height:320px;

text-align:center;

background-color:#cde;

}

.line{

/*结合外层元素的相对定位*/

position:absolute;

}

.line:nth-child(1){

top:0;

left:0;

width:100%;

height:3px;

/*加上渐变效果,方可形成拖尾效果*/

background:linear-gradient(90deg,transparent,orange);

animation:animate18slinearinfinite;

}

/*分别控制其上下左右的定位距离,从而形成线条跟随效果*/

@keyframesanimate1{

0%{

left:-100%;

}

50%,

100%{

left:100%;

}

}

.line:nth-child(2){

top:-100%;

right:0;

width:3px;

height:100%;

background:linear-gradient(180deg,transparent,red);

animation:animate28slinearinfinite;

/*注意要加上延时触发动画效果,这样线条才会依次触发*/

animation-delay:2s;

}

@keyframesanimate2{

0%{

top:-100%;

}

50%,

100%{

top:100%;

}

}

.line:nth-child(3){

bottom:0;

right:0;

width:100%;

background:linear-gradient(270deg,transparent,green);

animation:animate38slinearinfinite;

animation-delay:4s;

}

@keyframesanimate3{

0%{

right:-100%;

height:3px;

}

50%,

100%{

height:2px;

right:100%;

}

}

.line:nth-child(4){

bottom:-100%;

left:0;

width:3px;

height:100%;

background:linear-gradient(360deg,transparent,#3a86ff);

animation:animate48slinearinfinite;

animation-delay:6s;

}

@keyframesanimate4{

0%{

bottom:-100%;

}

50%,

100%{

bottom:100%;

}

}

</style>

</head>

<body>

<divclass="mainbox">

<spanclass="line"></span>

<spanclass="line"></span>

<spanclass="line"></span>

<spanclass="line"></span>

<divclass="content">线条环绕</div>

</div>

</body>

</html>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:弹出广告特效代码(一个IP只弹出一次)

 

下一篇:使用CSS实现有趣的汉堡菜单按钮

发布日期:2024/2/23
手机扫二维码直达本页
发布时间:12:27:55
点  击:2
录  入:伊伊
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,奇安信网站卫士提供加速防护
运行时间载入中.....