时空旅行动画效果
代码语言:html
所属分类:动画
代码描述:时空旅行动画效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: lightpink; margin: 0; overflow: hidden; animation: color-change 30s linear infinite; } #container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* I'm insisting you to play with values */ #container div { width: 95vmin; height: 95vmin; border-top: 3px solid #000; border-right: 3px solid #000; position: relative; border-radius: 100%; animation: rotation 30s linear infinite; } #container div div { width: 96%; height: 96%; position: absolute; bottom: 6%; right: 5%; animation: rotation 30s linear infinite, elongate 30s linear infinite; } @keyframes color-change { 40%, 70% { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0