纯html+css实现打字效果html css3不拉伸图片显示效果利用html+css实现菜单栏缓慢下拉效果的示例代码使用HTML和CSS实现的标签云效果(附demo)html+css+js实现导航栏滚动渐变效果 html+css实现响应式卡片悬停效果CSS3+HTML5+JS 实现一个块的收缩与展开动画效果HTML+CSS+JS模仿win10亮度调节效果的示例代码css+html实现Skeleton Screen 加载占位图动画效果（带动画）

hello,world!

 :root { /* 字符数量 */ --steps: 12; /* 动画时间 */ --duration: 2.5s; /* 字体大小 */ --fontSize: 50px; /* 光标大小 */ --cursorSize: 20px; } .text { color: #333;; position: relative; display: inline-block; font-family: 'Courier New', Courier, monospace; font-size: var(--fontSize); line-height: 1; } .text::after { content: ''; width: var(--cursorSize); height: var(--fontSize); background-color: black; z-index: 2; position: absolute; animation: blink 1s var(--duration) step-end infinite, moveCursor var(--duration) steps(var(--steps)) forwards; } .text::before { content: ''; width: 100%; height: var(--fontSize); z-index: 1; position: absolute; background: linear-gradient(#fff, #fff) no-repeat top right; animation: showText var(--duration) steps(var(--steps)) forwards; } /* 光标闪烁动画 */ @keyframes blink { 0% { background-color: black; } 50% { background-color: transparent; } 100% { background-color: black; } } /* 光标移动动画 */ @keyframes moveCursor { 0% { left: 0%; } 100% { left: 100%; } } /* 背景移动动画 */ @keyframes showText { 0% { background-size: 100% 100%; } 100% { background-size: 0% 100%; } }