使用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蛇边界按钮动效
正在加载文件目录...
- 热度 2
eeeemo下载了 此素材
﹏'有伈_゛魜收藏了 此素材