文字打字和擦除动画效果
代码语言:html
所属分类:动画
代码描述:文字打字和擦除动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .wrapper { padding: 10px; margin: 0 auto; width: 500px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .wrapper .item { visibility: hidden; display: none; } .wrapper h2 { font-size: 50px; margin: 0; color: #3a3a3a; text-align: left; } .wrapper > div { min-height: 20px; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: flex-end; font-weight: bold; color: orange; } .wrapper > div:after { content: ""; width: 10px; height: 4px; display: block; background: black; color: orange; margin-bottom: 4px; margin-left: 2px; animation-duration: 350ms; animation-name: fade; animation-direction: alternate; animation-iteration-count: infinite; } @keyframes fade { from { opacity: 1; } to { opacity: 0; } } </style> </head> <body translate="no"> <div class="wrapper"> <div data-text></div> <span class="item">UI & UX designer</span> <spa.........完整代码请登录后点击上方下载按钮下载查看
网友评论0