autotyper实现文字字母打字动画效果示例代码
代码语言:html
所属分类:动画
代码描述:autotyper实现文字字母打字动画效果示例代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Montserrat:200,700&display=swap" rel="stylesheet"> <style> html { box-sizing: border-box; } *, *:after, *:before { box-sizing: inherit; } body { background-color: #4144b1; color: #ffffff; font-family: 'Montserrat', sans-serif; } @keyframes blink-caret { 50% { border-color: transparent; } } @-webkit-keyframes blink-caret { 50% { border-color: transparent; } } .typer-target { animation: blink-caret 0.5s step-end infinite alternate; border-right: 1px solid #fafafa; color: #ffffff; font-size: 38px; font-weight: bold; line-height: normal; margin: 0; margin-bottom: 40px; display: inline-block; } .typer-target > span { font-weight: 300; } main { padding-left: 20px; padding-right: 20px; padding-top: 50px; text-align: center; } .btn-run { background-color: #3d90ef; border: 0; border-radius: 27.5px; box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.05); color: #ffffff; display: inline-block; font-size: 16px; font-weight.........完整代码请登录后点击上方下载按钮下载查看
网友评论0