css实现文字入场出场loading动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现文字入场出场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: rotate(0deg); left: 60%; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0