文字拆分飞入动画loading加载效果
代码语言:html
所属分类:动画
代码描述:文字拆分飞入动画loading加载效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; overflow: hidden; } .loader { color: dodgerblue; font-size: 1.5em; font-family: sans-serif; text-transform: uppercase; width: 40em; height: 3em; animation: change-color 10s linear infinite; } .loader span { animation: moving 2s linear infinite; animation-delay: calc((var(--n) - 10) * 0.2s); position: absolute; height: 3em; } @keyframes change-color { to { filter: hue-rotate(1turn); } } @keyframes moving { 0% { filter: opacity(0); transform: rotate(-180deg); left: 100%; } 33% { filter: opacity(1); transform: rota.........完整代码请登录后点击上方下载按钮下载查看
网友评论0