原生js和css实现文字拆分飞入动画
代码语言:html
所属分类:动画
代码描述:原生js和css实现文字拆分飞入动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet"> <style> body{ background-image:linear-gradient(#F9F2F0, #1C0E0D); height: 100vh; } .letters{ font-family: 'Chelsea Market', cursive; font-size: 3rem; position: relative; top: 100px; display:flex; flex-wrap:wrap; justify-content:center; } .letters div{ position:relative; left:200vh; letter-spacing:0.2rem; transition: all 2s ease-in; } @keyframes slide{ 0%{ left:200vh } 100%{ left:0 } } </style> </head> <body translate=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0