纯css实现按钮蛇形边框动画效果

代码语言:html

所属分类:表单美化

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>CSS Snake Border Animation Effects</title>
<style>
    body{
        margin: 0;
        padding: 0;
        background: #0c002b;
        font-family: sans-serif;

}
a{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        color: #1779ff;
        padding: 30px 60px;
        font-size: 30px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-decoration: none;
        box-shadow: 0 25px 50px rgba(0, 0, 0, .5);
        overflow: hidden;
}
a:before{
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        bottom: 2px;
        width: 50%;
        background: rgba(255,255,255,0.05);
}
a span:nth-child(1){
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(to.........完整代码请登录后点击上方下载按钮下载查看

网友评论0