CSS蛇边界创意按钮动画效果

晓Ming_

已于 2024-08-19 22:52:55 修改

阅读量370

点赞数

分类专栏： css 文章标签： css3 css animation html 前端

于 2020-05-07 09:05:15 首次发布

本文链接：https://blog.csdn.net/qq_39668938/article/details/105965009

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS蛇边界创意按钮动画效果

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		body{
			margin: 0;
			padding: 0;
			background: #0c002b;
			font-family: sans-serif;
		}
		a{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			color: #1670f0;
			padding: 30px 60px;
			font-size: 30px;
			letter-spacing: 2px;
			text-transform: uppercase;
			text-decoration: none;
			box-shadow:  0 20px 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 right, #0c002b, #1779ff);
			animation: animate1 2s linear infinite;
		}
		@keyframes animate1{
			0%{
				transform: translateX(-100%);
			}
			100%{
				transform: translateX(100%);
			}
		}
		a span:nth-child(2){
			position: absolute;
			top: 0;
			right: 0;
			width: 2px;
			height: 100%;
			background: linear-gradient(to bottom, #0c002b, #1779ff);
			animation: animate2 2s linear infinite;
		}
		@keyframes animate2{
			0%{
				transform: translateY(-100%);
			}
			100%{
				transform: translateY(100%);
			}
		}
		a span:nth-child(3){
			position: absolute;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 2px;
			background: linear-gradient(to left, #0c002b, #1779ff);
			animation: animate3 2s linear infinite;
		}
		@keyframes animate3{
			0%{
				transform: translateX(100%);
			}
			100%{
				transform: translateX(-100%);
			}
		}
		a span:nth-child(4){
			position: absolute;
			top: 0;
			left: 0;
			width: 2px;
			height: 100%;
			background: linear-gradient(to top, #0c002b, #1779ff);
			animation: animate4 2s linear infinite;
		}
		@keyframes animate4{
			0%{
				transform: translateY(100%);
			}
			100%{
				transform: translateY(-100%);
			}
		}
	</style>
	<body>
		<a href="#">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			button
		</a>
	</body>
</html>

晓Ming_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS蛇边界创意按钮动画效果

CSS蛇边界创意按钮动画效果<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style> body{ margin: 0; padding: 0; ba...
复制链接

扫一扫

专栏目录