div+css实现迷幻圈圈扩散动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现迷幻圈圈扩散动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .container { width: 100%; height: 100%; margin: auto; position: relative; } @keyframes spill { 100% { box-shadow: 0px 0px 0px -2vmin #c5ffd0, 0 2vmin 5vmin 0px #c5ffd0; height: 70vh; width: 70vw; } } .runneth-over { animation: spill 5s ease-out alternate infinite; border-radius: 50%; box-shadow: 0px -5vmin 7vmin 0px #c5ffd0, 0px -2vmin 0px -2vmin #c5ffd0; box-sizing: border-box; height: 0vh; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 0vw; } .runneth-over:nth-child(2) { animation: spill 5s ease-in-out alternate infinite; animation-delay: 0.5s; margin: 20px; } .runneth-over:nth-child(3) { animation: spill 5s ease-in-out alternate infinite; animation-delay: 1s; margin: 20px; } .runneth-over:nth-child(4) { animation: spill 5s ease-in-out alternate infinite; animation-delay: 1.5s; margin: 20px; } .runneth-over:nth-child(5) { animation: spill 5s ease-in-out alternate infinite; animation-d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0