div+css实现代码高亮打字输出动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现代码高亮打字输出动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet"> <style> body { display: flex; position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; justify-content: center; align-items: center; background-color: rgb(171, 184, 195); } pre { font-size: 1.3rem; line-height: 2rem; margin: 1rem 0 0 1rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 2rem; background-color: #151718; color: #e6cd69; border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); } code { font-family: "IBM Plex Mono", monospace; font-weight: 400; } pre { } i, b, u, em, strong { text-decoration: none; font-weight: 400; font-style: normal; color: #55b5db; } em { color: #a074c4; } strong { color: #9fca56; } u { color: #eeeeee; } s { color: #666666; text-decoration: none; } .lineOfCode { -webkit-animation: typingEffect 1800ms steps(14, end) forwards 1000ms, caretAnim 500ms steps(2, end) 0s infinite; animation: typingEffect 1800ms steps(14, end) forwards 1000ms, caretAnim 500ms steps(2, end) 0s infinite; overflow: hidden; padding: 0; margin: 0; width: 0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0