使用CSS实现的蛇边界按钮动效,边框不断的流动效果,鼠标悬停触发高亮显示的效果。
@keyframes move1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
.night span:nth-child(2){
top: 0;
right: 0;
width: 2px;
height: 100%;
transform: translateY(-100%);
background-image: linear-gradient(to bottom, transparent , rgb(0, 153, 255) );
animation: move2 2s linear infinite;
animation-delay: 1s;
}
@keyframes move2 {
100%{
transform: translateY(100%);
}
}
.night span:nth-child(3){
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-image: linear-gradient(to left, transparent , rgb(0, 153, 255) );
animation: move3 2s linear infinite;
}
@keyframes move3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.night span:nth-child(4){
top: 0;
left: 0;
width: 2px;
height: 100%;
transform: translateY(100%);
background-image: linear-gradient(to top, transparent , rgb(0, 153, 255) );
animation: move4 2s linear infinite;
animation-delay: 1s;
}
@keyframes move4 {
100%{
transform: translateY(-100%);
}
}CSS蛇边界按钮动效
正在加载文件目录...
- 热度 14

水墨淡痕下载了 此素材

万灵1下载了 此素材

慢羊羊收藏了 此素材

黄昏丶黑夜下载了 此素材

南翔希下载了 此素材

用户7543623837下载了 此素材

eeeemo下载了 此素材

白白下载了 此素材

阿飞下载了 此素材

Alex下载了 此素材









