js实现字母字符向上漂浮动画效果代码
代码语言:html
所属分类:动画
代码描述:js实现字母字符向上漂浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; padding: 0; overflow: hidden; background: whitesmoke; } .animation-container { position: absolute; top: 25vh; left: 0; right: 0; bottom: 25vh; z-index: 1; background: #111111; } .animation-container span { position: absolute; color: whitesmoke; display: block; font-size: 18px; font-family: 'Helvetica'; text-shadow: 0 0 1px white; user-select: none; pointer-events: none; cursor: default; z-index: 1; opacity: 0; top: 0; will-change: transform, opacity; animation-timing-function: ease-out; animation-name: move; } @keyframes move { 0% { opacity: 0; top: 100%; } 25% { opacity: 1; } 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; transform: none; } } </style> </head> <body > <script > 'use strict'; var app = { chars: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', '.........完整代码请登录后点击上方下载按钮下载查看
网友评论0