贪吃蛇边框案例
- 案例名称：贪吃蛇边框案例
- 案例人员：杨标
- 案例平台：HTML+CSS
- 完成时间：2019年8月31日
效果图
案例说明
本题主要考察的其实就是对CSS的属性clip-path的掌握情况，同时对CSS动画做了一定的回顾
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>蛇形边框</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightseagreen;
position: relative;
}
.box::before {
content: "";
display: block;
position: absolute;
background-color: deeppink;
width: 100%;
height: 100%;
left: -5px;
top: -5px;
z-index: -1;
border: 5px solid deeppink;
animation: zhuan 2s linear infinite;
clip-path: inset(0px 200px 0px 0px);
}
@keyframes zhuan {
0% {
clip-path: inset(0px 200px 0px 0px);
}
25% {
clip-path: inset(0px 0px 200px 0px);
}
50% {
clip-path: inset(0px 0px 0px 200px);
}
75% {
clip-path: inset(200px 0px 0px 0px);
}
100% {
clip-path: inset(0px 200px 0px 0px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
评论区