Java程序员_编程开发学习笔记_网站安全运维教程_渗透技术教程 - 前端特效
用CSS打造一个生动有趣的交互式卡片设计
用CSS打造一个生动有趣的交互式卡片设计在现代网页设计中，交互性和视觉吸引力是提升用户体验的关键。一个精心设计的卡片组件不仅能够清晰地展示信息，还能通过动态效果和用户互动增添趣味性。今天，我们将探讨如何通过CSS实现一个生动有趣的交互式卡片设计，而无需深入代码细节。卡片设计的重要性卡片设计是网页布局中常见的一种形式，它能够将内容以模块化的方式呈现，便于用户快速浏览和理解。一个好的卡片设计应具备以下特点：清晰的层次结构：卡片内的内容应有明确的层次，便于用户快速获取关键信息。视觉吸引力：通过颜色、形状和动画效果，吸引用户的注意力。交互性：通过用户操作（如点击、悬停等）触发动态效果，增强用户的参与感。设计灵感：从静态到动态在设计卡片时，我们可以从静态的布局中融入动态的交互效果。例如，通过鼠标悬停或点击触发动画，让卡片内的元素（如图标、文本或图像）产生变化。这种动态效果不仅能够吸引用户的注意力，还能为用户提供即时的反馈，增强互动体验。实现一个交互式卡片设计为了实现一个交互式卡片设计，我们可以利用CSS的transition、transform和@keyframes等属性。通过将静态元素与动态效果结合，我们可以创建出一个既实用又充满趣味的卡片组件。卡片的核心设计在这个设计中，卡片采用了圆角矩形的外观，背景为白色，整体风格简洁大方。卡片内部包含了头像、标题、输入框和按钮等元素，布局清晰且易于操作。通过CSS的flexbox布局，我们可以轻松实现元素的排列和对齐。动态交互效果卡片的动态效果主要体现在头像和输入框的交互上。例如，当用户点击或聚焦输入框时，头像会产生微妙的动画效果，如眼睛的眨动或头像的轻微旋转。这些细节设计不仅增加了卡片的趣味性，还为用户提供了即时的视觉反馈。完整css代码：{hide}.card { --p: 32px; --h-form: auto; --w-form: 380px; --input-px: 0.75rem; --input-py: 0.65rem; --submit-h: 38px; --blind-w: 64px; --space-y: 0.5rem; width: var(--w-form); height: var(--h-form); max-width: 100%; border-radius: 16px; background: white; position: relative; display: flex; align-items: center; justify-content: space-evenly; flex-direction: column; overflow-y: auto; padding: var(--p); scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; } .avatar { --sz-avatar: 166px; order: 0; width: var(--sz-avatar); min-width: var(--sz-avatar); max-width: var(--sz-avatar); height: var(--sz-avatar); min-height: var(--sz-avatar); max-height: var(--sz-avatar); border: 1px solid #707070; border-radius: 9999px; overflow: hidden; cursor: pointer; z-index: 2; perspective: 80px; position: relative; margin: 0; display: flex; justify-content: center; align-items: center; --sz-svg: calc(var(--sz-avatar) - 10px); } .avatar svg { position: absolute; transition: transform 0.2s ease-in, opacity 0.1s; transform-origin: 50% 100%; height: var(--sz-svg); width: var(--sz-svg); pointer-events: none; } .avatar svg#monkey { z-index: 1; } .avatar svg#monkey-hands { z-index: 2; transform-style: preserve-3d; transform: translateY(calc(var(--sz-avatar) / 1.25)) rotateX(-21deg); } .avatar::before { content: ""; border-radius: 45%; width: calc(var(--sz-svg) / 3.889); height: calc(var(--sz-svg) / 5.833); border: 0; border-bottom: calc(var(--sz-svg) * (4 / 100)) solid #3c302a; bottom: 20%; position: absolute; transition: all 0.2s ease; z-index: 3; } .blind-check:checked ~ .avatar::before { width: calc(var(--sz-svg) * (9 / 100)); height: 0; border-radius: 50%; border-bottom: calc(var(--sz-svg) * (10 / 100)) solid #3c302a; } .avatar svg#monkey .monkey-eye-r, .avatar svg#monkey .monkey-eye-l { animation: blink 10s 1s infinite; transition: all 0.2s ease; } @keyframes blink { 0%, 2%, 4%, 26%, 28%, 71%, 73%, 100% { ry: 4.5; cy: 31.7; } 1%, 3%, 27%, 72% { ry: 0.5; cy: 30; } } .blind-check:checked ~ .avatar svg#monkey .monkey-eye-r, .blind-check:checked ~ .avatar svg#monkey .monkey-eye-l { ry: 0.5; cy: 30; } .blind-check:checked ~ .avatar svg#monkey-hands { transform: translate3d(0, 0, 0) rotateX(0deg); } .avatar svg#monkey, .avatar::before, .avatar svg#monkey .monkey-eye-nose, .avatar svg#monkey .monkey-eye-r, .avatar svg#monkey .monkey-eye-l { transition: all 0.2s ease; } .blind-check:checked ~ .form:focus-within ~ .avatar svg#monkey, .blind-check:checked ~ .form:focus-within ~ .avatar::before, .blind-check:checked ~ .form:focus-within ~ .avatar svg#monkey .monkey-eye-nose, .blind-check:checked ~ .form:focus-within ~ .avatar svg#monkey .monkey-eye-r, .blind-check:checked ~ .form:focus-within ~ .avatar svg#monkey .monkey-eye-l { animation: none; } .form:focus-within ~ .avatar svg#monkey { animation: slick 3s ease infinite 1s; --center: rotateY(0deg); --left: rotateY(-4deg); --right: rotateY(4deg); } .form:focus-within ~ .avatar::before, .form:focus-within ~ .avatar svg#monkey .monkey-eye-nose, .blind-check:not(:checked) ~ .form:focus-within ~ .avatar svg#monkey .monkey-eye-r, .blind-check:not(:checked) ~ .form:focus-within ~ .avatar svg#monkey .monkey-eye-l { ry: 3; cy: 35; animation: slick 3s ease infinite 1s; --center: translateX(0); --left: translateX(-0.5px); --right: translateX(0.5px); } @keyframes slick { 0%, 100% { transform: var(--center); } 25% { transform: var(--left); } 75% { transform: var(--right); } } .card label.blind_input { -webkit-user-select: none; user-select: none; cursor: pointer; z-index: 4; position: absolute; border: none; right: calc(var(--p) + (var(--input-px) / 2)); bottom: calc( var(--p) + var(--submit-h) + var(--space-y) + (var(--input-py) / 1) + 3px ); padding: 4px 0; width: var(--blind-w); border-radius: 4px; background-color: #fff; color: #4d4d4d; display: inline-flex; align-items: center; justify-content: center; } .card label.blind_input:before { content: ""; position: absolute; left: calc((var(--input-px) / 2) * -1); top: 0; height: 100%; width: 1px; background: #8f8f8f; } .card label.blind_input:hover { color: #262626; background-color: #f2f2f2; } .blind-check ~ label.blind_input span.show, .blind-check:checked ~ label.blind_input span.hide { display: none; } .blind-check ~ label.blind_input span.hide, .blind-check:checked ~ label.blind_input span.show { display: block; } .form { order: 1; position: relative; display: flex; align-items: center; justify-content: space-evenly; flex-direction: column; width: 100%; } .form .title { width: 100%; font-size: 1.5rem; font-weight: 600; margin-top: 0; margin-bottom: 1rem; padding-top: 0; padding-bottom: 1rem; color: rgba(0, 0, 0, 0.7); border-bottom: 2px solid rgba(0, 0, 0, 0.3); } .form .label_input { white-space: nowrap; font-size: 1rem; margin-top: calc(var(--space-y) / 2); color: rgba(0, 0, 0, 0.9); font-weight: 600; display: inline; text-align: left; margin-right: auto; position: relative; z-index: 99; -webkit-user-select: none; user-select: none; } .form .input { resize: vertical; background: white; border: 1px solid #8f8f8f; border-radius: 6px; outline: none; padding: var(--input-py) var(--input-px); font-size: 18px; width: 100%; color: #000000b3; margin: var(--space-y) 0; transition: all 0.25s ease; } .form .input#password-input { padding-right: calc(var(--blind-w) + var(--input-px) + 4px); } .form .input:focus { border: 1px solid #0969da; outline: 0; box-shadow: 0 0 0 2px #0969da; } .form .frg_pss { width: 100%; display: inline-flex; align-items: center; } .form .frg_pss a { background-color: transparent; cursor: pointer; text-decoration: underline; transition: color 0.25s ease; color: #000000b3; font-weight: 500; float: right; } .form .frg_pss a:hover { color: #000; } .form .submit { height: var(--submit-h); width: 100%; outline: none; cursor: pointer; background-color: #fff; background-image: linear-gradient( -180deg, rgba(255, 255, 255, 0.09) 0%, rgba(17, 17, 17, 0.04) 100% ); border: 1px solid rgba(22, 22, 22, 0.2); font-weight: 500; letter-spacing: 0.25px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; text-align: center; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.25rem; -webkit-appearance: button; appearance: button; margin: var(--space-y) 0 0; } .form .submit:hover { background-image: linear-gradient( -180deg, rgba(255, 255, 255, 0.18) 0%, rgba(17, 17, 17, 0.08) 100% ); border: 1px solid rgba(22, 22, 22, 0.2); color: #111; } .blind-check:checked ~ .form .input[type="text"] { /* text-emphasis: circle; */ -webkit-text-security: disc; } {/hide}HTML相关代码： Hide Show Sign In Email Password Forgot password? Submit <ellipse cx="53.7" cy="33" rx="8.3" ry="8.2" fill="#89664c"></ellipse> <ellipse cx="53.7" cy="33" rx="5.4" ry="5.4" fill="#ffc5d3"></ellipse> <ellipse cx="10.2" cy="33" rx="8.2" ry="8.2" fill="#89664c"></ellipse> <ellipse cx="10.2" cy="33" rx="5.4" ry="5.4" fill="#ffc5d3"></ellipse> <g fill="#89664c"> <path d="m43.4 10.8c1.1-.6 1.9-.9 1.9-.9-3.2-1.1-6-1.8-8.5-2.1 1.3-1 2.1-1.3 2.1-1.3-20.4-2.9-30.1 9-30.1 19.5h46.4c-.7-7.4-4.8-12.4-11.8-15.2" ></path> <path d="m55.3 27.6c0-9.7-10.4-17.6-23.3-17.6s-23.3 7.9-23.3 17.6c0 2.3.6 4.4 1.6 6.4-1 2-1.6 4.2-1.6 6.4 0 9.7 10.4 17.6 23.3 17.6s23.3-7.9 23.3-17.6c0-2.3-.6-4.4-1.6-6.4 1-2 1.6-4.2 1.6-6.4" ></path> </g> <path d="m52 28.2c0-16.9-20-6.1-20-6.1s-20-10.8-20 6.1c0 4.7 2.9 9 7.5 11.7-1.3 1.7-2.1 3.6-2.1 5.7 0 6.1 6.6 11 14.7 11s14.7-4.9 14.7-11c0-2.1-.8-4-2.1-5.7 4.4-2.7 7.3-7 7.3-11.7" fill="#e0ac7e" ></path> <g fill="#3b302a" class="monkey-eye-nose"> <path d="m35.1 38.7c0 1.1-.4 2.1-1 2.1-.6 0-1-.9-1-2.1 0-1.1.4-2.1 1-2.1.6.1 1 1 1 2.1" ></path> <path d="m30.9 38.7c0 1.1-.4 2.1-1 2.1-.6 0-1-.9-1-2.1 0-1.1.4-2.1 1-2.1.5.1 1 1 1 2.1" ></path> <ellipse cx="40.7" cy="31.7" rx="3.5" ry="4.5" class="monkey-eye-r" ></ellipse> <ellipse cx="23.3" cy="31.7" rx="3.5" ry="4.5" class="monkey-eye-l" ></ellipse> </g> <path fill="#89664C" d="M9.4,32.5L2.1,61.9H14c-1.6-7.7,4-21,4-21L9.4,32.5z" ></path> <path fill="#FFD6BB" d="M15.8,24.8c0,0,4.9-4.5,9.5-3.9c2.3,0.3-7.1,7.6-7.1,7.6s9.7-8.2,11.7-5.6c1.8,2.3-8.9,9.8-8.9,9.8 s10-8.1,9.6-4.6c-0.3,3.8-7.9,12.8-12.5,13.8C11.5,43.2,6.3,39,9.8,24.4C11.6,17,13.3,25.2,15.8,24.8" ></path> <path fill="#89664C" d="M54.8,32.5l7.3,29.4H50.2c1.6-7.7-4-21-4-21L54.8,32.5z" ></path> <path fill="#FFD6BB" d="M48.4,24.8c0,0-4.9-4.5-9.5-3.9c-2.3,0.3,7.1,7.6,7.1,7.6s-9.7-8.2-11.7-5.6c-1.8,2.3,8.9,9.8,8.9,9.8 s-10-8.1-9.7-4.6c0.4,3.8,8,12.8,12.6,13.8c6.6,1.3,11.8-2.9,8.3-17.5C52.6,17,50.9,25.2,48.4,24.8" ></path> React组件代码：{hide}import React from 'react'; import styled from 'styled-components'; const Form = () => { return ( <StyledWrapper> Hide Show Sign In Email Password <a href>Forgot password? Submit <ellipse cx="53.7" cy={33} rx="8.3" ry="8.2" fill="#89664c" /> <ellipse cx="53.7" cy={33} rx="5.4" ry="5.4" fill="#ffc5d3" /> <ellipse cx="10.2" cy={33} rx="8.2" ry="8.2" fill="#89664c" /> <ellipse cx="10.2" cy={33} rx="5.4" ry="5.4" fill="#ffc5d3" /> <g fill="#89664c"> <path d="m43.4 10.8c1.1-.6 1.9-.9 1.9-.9-3.2-1.1-6-1.8-8.5-2.1 1.3-1 2.1-1.3 2.1-1.3-20.4-2.9-30.1 9-30.1 19.5h46.4c-.7-7.4-4.8-12.4-11.8-15.2" /> <path d="m55.3 27.6c0-9.7-10.4-17.6-23.3-17.6s-23.3 7.9-23.3 17.6c0 2.3.6 4.4 1.6 6.4-1 2-1.6 4.2-1.6 6.4 0 9.7 10.4 17.6 23.3 17.6s23.3-7.9 23.3-17.6c0-2.3-.6-4.4-1.6-6.4 1-2 1.6-4.2 1.6-6.4" /> </g> <path d="m52 28.2c0-16.9-20-6.1-20-6.1s-20-10.8-20 6.1c0 4.7 2.9 9 7.5 11.7-1.3 1.7-2.1 3.6-2.1 5.7 0 6.1 6.6 11 14.7 11s14.7-4.9 14.7-11c0-2.1-.8-4-2.1-5.7 4.4-2.7 7.3-7 7.3-11.7" fill="#e0ac7e" /> <g fill="#3b302a" className="monkey-eye-nose"> <path d="m35.1 38.7c0 1.1-.4 2.1-1 2.1-.6 0-1-.9-1-2.1 0-1.1.4-2.1 1-2.1.6.1 1 1 1 2.1" /> <path d="m30.9 38.7c0 1.1-.4 2.1-1 2.1-.6 0-1-.9-1-2.1 0-1.1.4-2.1 1-2.1.5.1 1 1 1 2.1" /> <ellipse cx="40.7" cy="31.7" rx="3.5" ry="4.5" className="monkey-eye-r" /> <ellipse cx="23.3" cy="31.7" rx="3.5" ry="4.5" className="monkey-eye-l" /> </g> <path fill="#89664C" d="M9.4,32.5L2.1,61.9H14c-1.6-7.7,4-21,4-21L9.4,32.5z" /> <path fill="#FFD6BB" d="M15.8,24.8c0,0,4.9-4.5,9.5-3.9c2.3,0.3-7.1,7.6-7.1,7.6s9.7-8.2,11.7-5.6c1.8,2.3-8.9,9.8-8.9,9.8 s10-8.1,9.6-4.6c-0.3,3.8-7.9,12.8-12.5,13.8C11.5,43.2,6.3,39,9.8,24.4C11.6,17,13.3,25.2,15.8,24.8" /> <path fill="#89664C" d="M54.8,32.5l7.3,29.4H50.2c1.6-7.7-4-21-4-21L54.8,32.5z" /> <path fill="#FFD6BB" d="M48.4,24.8c0,0-4.9-4.5-9.5-3.9c-2.3,0.3,7.1,7.6,7.1,7.6s-9.7-8.2-11.7-5.6c-1.8,2.3,8.9,9.8,8.9,9.8 s-10-8.1-9.7-4.6c0.4,3.8,8,12.8,12.6,13.8c6.6,1.3,11.8-2.9,8.3-17.5C52.6,17,50.9,25.2,48.4,24.8" /> </StyledWrapper> ); } const StyledWrapper = styled.div` .card { --p: 32px; --h-form: auto; --w-form: 380px; --input-px: 0.75rem; --input-py: 0.65rem; --submit-h: 38px; --blind-w: 64px; --space-y: 0.5rem; width: var(--w-form); height: var(--h-form); max-width: 100%; border-radius: 16px; background: white; position: relative; display: flex; align-items: center; justify-content: space-evenly; flex-direction: column; overflow-y: auto; padding: var(--p); scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; } .avatar { --sz-avatar: 166px; order: 0; width: var(--sz-avatar); min-width: var(--sz-avatar); max-width: var(--sz-avatar); height: var(--sz-avatar); min-height: var(--sz-avatar); max-height: var(--sz-avatar); border: 1px solid #707070; border-radius: 9999px; overflow: hidden; cursor: pointer; z-index: 2; perspective: 80px; position: relative; margin: 0; display: flex; justify-content: center; align-items: center; --sz-svg: calc(var(--sz-avatar) - 10px); } .avatar svg { position: absolute; transition: transform 0.2s ease-in, opacity 0.1s; transform-origin: 50% 100%; height: var(--sz-svg); width: var(--sz-svg); pointer-events: none; } .avatar svg#monkey { z-index: 1; } .avatar svg#monkey-hands { z-index: 2; transform-style: preserve-3d; transform: translateY(calc(var(--sz-avatar) / 1.25)) rotateX(-21deg); } .avatar::before { content: ""; border-radius: 45%; width: calc(var(--sz-svg) / 3.889); height: calc(var(--sz-svg) / 5.833); border: 0; border-bottom: calc(var(--sz-svg) * (4 / 100)) solid #3c302a; bottom: 20%; position: absolute; transition: all 0.2s ease; z-index: 3; } .blind-check:checked ~ .avatar::before { width: calc(var(--sz-svg) * (9 / 100)); height: 0; border-radius: 50%; border-bottom: calc(var(--sz-svg) * (10 / 100)) solid #3c302a; } .avatar svg#monkey .monkey-eye-r, .avatar svg#monkey .monkey-eye-l { animation: blink 10s 1s infinite; transition: all 0.2s ease; } @keyframes blink { 0%, 2%, 4%, 26%, 28%, 71%, 73%, 100% { ry: 4.5; cy: 31.7; } 1%, 3%, 27%, 72% { ry: 0.5; cy: 30; } } .blind-check:checked ~ .avatar svg#monkey .monkey-eye-r, .blind-check:checked ~ .avatar svg#monkey .monkey-eye-l { ry: 0.5; cy: 30; } .blind-check:checked ~ .avatar svg#monkey-hands { transform: translate3d(0, 0, 0) rotateX(0deg); } .avatar svg#monkey, .avatar::before, .avatar svg#monkey .monkey-eye-nose, .avatar svg#monkey .monkey-eye-r, .avatar svg#monkey .monkey-eye-l { transition: all 0.2s ease; } .blind-check:checked ~ .form:focus-within ~ .avatar svg#monkey, .blind-check:checked ~ .form:focus-within ~ .avatar::before, .blind-check:checked ~ .form:focus-within ~ .avatar svg#monkey .monkey-eye-nose, .blind-check:checked ~ .form:focus-within ~ .avatar svg#monkey .monkey-eye-r, .blind-check:checked ~ .form:focus-within ~ .avatar svg#monkey .monkey-eye-l { animation: none; } .form:focus-within ~ .avatar svg#monkey { animation: slick 3s ease infinite 1s; --center: rotateY(0deg); --left: rotateY(-4deg); --right: rotateY(4deg); } .form:focus-within ~ .avatar::before, .form:focus-within ~ .avatar svg#monkey .monkey-eye-nose, .blind-check:not(:checked) ~ .form:focus-within ~ .avatar svg#monkey .monkey-eye-r, .blind-check:not(:checked) ~ .form:focus-within ~ .avatar svg#monkey .monkey-eye-l { ry: 3; cy: 35; animation: slick 3s ease infinite 1s; --center: translateX(0); --left: translateX(-0.5px); --right: translateX(0.5px); } @keyframes slick { 0%, 100% { transform: var(--center); } 25% { transform: var(--left); } 75% { transform: var(--right); } } .card label.blind_input { -webkit-user-select: none; user-select: none; cursor: pointer; z-index: 4; position: absolute; border: none; right: calc(var(--p) + (var(--input-px) / 2)); bottom: calc( var(--p) + var(--submit-h) + var(--space-y) + (var(--input-py) / 1) + 3px ); padding: 4px 0; width: var(--blind-w); border-radius: 4px; background-color: #fff; color: #4d4d4d; display: inline-flex; align-items: center; justify-content: center; } .card label.blind_input:before { content: ""; position: absolute; left: calc((var(--input-px) / 2) * -1); top: 0; height: 100%; width: 1px; background: #8f8f8f; } .card label.blind_input:hover { color: #262626; background-color: #f2f2f2; } .blind-check ~ label.blind_input span.show, .blind-check:checked ~ label.blind_input span.hide { display: none; } .blind-check ~ label.blind_input span.hide, .blind-check:checked ~ label.blind_input span.show { display: block; } .form { order: 1; position: relative; display: flex; align-items: center; justify-content: space-evenly; flex-direction: column; width: 100%; } .form .title { width: 100%; font-size: 1.5rem; font-weight: 600; margin-top: 0; margin-bottom: 1rem; padding-top: 0; padding-bottom: 1rem; color: rgba(0, 0, 0, 0.7); border-bottom: 2px solid rgba(0, 0, 0, 0.3); } .form .label_input { white-space: nowrap; font-size: 1rem; margin-top: calc(var(--space-y) / 2); color: rgba(0, 0, 0, 0.9); font-weight: 600; display: inline; text-align: left; margin-right: auto; position: relative; z-index: 99; -webkit-user-select: none; user-select: none; } .form .input { resize: vertical; background: white; border: 1px solid #8f8f8f; border-radius: 6px; outline: none; padding: var(--input-py) var(--input-px); font-size: 18px; width: 100%; color: #000000b3; margin: var(--space-y) 0; transition: all 0.25s ease; } .form .input#password-input { padding-right: calc(var(--blind-w) + var(--input-px) + 4px); } .form .input:focus { border: 1px solid #0969da; outline: 0; box-shadow: 0 0 0 2px #0969da; } .form .frg_pss { width: 100%; display: inline-flex; align-items: center; } .form .frg_pss a { background-color: transparent; cursor: pointer; text-decoration: underline; transition: color 0.25s ease; color: #000000b3; font-weight: 500; float: right; } .form .frg_pss a:hover { color: #000; } .form .submit { height: var(--submit-h); width: 100%; outline: none; cursor: pointer; background-color: #fff; background-image: linear-gradient( -180deg, rgba(255, 255, 255, 0.09) 0%, rgba(17, 17, 17, 0.04) 100% ); border: 1px solid rgba(22, 22, 22, 0.2); font-weight: 500; letter-spacing: 0.25px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; text-align: center; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.25rem; -webkit-appearance: button; appearance: button; margin: var(--space-y) 0 0; } .form .submit:hover { background-image: linear-gradient( -180deg, rgba(255, 255, 255, 0.18) 0%, rgba(17, 17, 17, 0.08) 100% ); border: 1px solid rgba(22, 22, 22, 0.2); color: #111; } .blind-check:checked ~ .form .input[type="text"] { /* text-emphasis: circle; */ -webkit-text-security: disc; }`; export default Form; {/hide}Vue组件代码：{hide} Hide Show Sign In Email Password Forgot password? Submit <ellipse cx="53.7" cy="33" rx="8.3" ry="8.2" fill="#89664c"></ellipse> <ellipse cx="53.7" cy="33" rx="5.4" ry="5.4" fill="#ffc5d3"></ellipse> <ellipse cx="10.2" cy="33" rx="8.2" ry="8.2" fill="#89664c"></ellipse> <ellipse cx="10.2" cy="33" rx="5.4" ry="5.4" fill="#ffc5d3"></ellipse> <g fill="#89664c"> <path d="m43.4 10.8c1.1-.6 1.9-.9 1.9-.9-3.2-1.1-6-1.8-8.5-2.1 1.3-1 2.1-1.3 2.1-1.3-20.4-2.9-30.1 9-30.1 19.5h46.4c-.7-7.4-4.8-12.4-11.8-15.2" ></path> <path d="m55.3 27.6c0-9.7-10.4-17.6-23.3-17.6s-23.3 7.9-23.3 17.6c0 2.3.6 4.4 1.6 6.4-1 2-1.6 4.2-1.6 6.4 0 9.7 10.4 17.6 23.3 17.6s23.3-7.9 23.3-17.6c0-2.3-.6-4.4-1.6-6.4 1-2 1.6-4.2 1.6-6.4" ></path> </g> <path d="m52 28.2c0-16.9-20-6.1-20-6.1s-20-10.8-20 6.1c0 4.7 2.9 9 7.5 11.7-1.3 1.7-2.1 3.6-2.1 5.7 0 6.1 6.6 11 14.7 11s14.7-4.9 14.7-11c0-2.1-.8-4-2.1-5.7 4.4-2.7 7.3-7 7.3-11.7" fill="#e0ac7e" ></path> <g fill="#3b302a" class="monkey-eye-nose"> <path d="m35.1 38.7c0 1.1-.4 2.1-1 2.1-.6 0-1-.9-1-2.1 0-1.1.4-2.1 1-2.1.6.1 1 1 1 2.1" ></path> <path d="m30.9 38.7c0 1.1-.4 2.1-1 2.1-.6 0-1-.9-1-2.1 0-1.1.4-2.1 1-2.1.5.1 1 1 1 2.1" ></path> <ellipse cx="40.7" cy="31.7" rx="3.5" ry="4.5" class="monkey-eye-r" ></ellipse> <ellipse cx="23.3" cy="31.7" rx="3.5" ry="4.5" class="monkey-eye-l" ></ellipse> </g> <path fill="#89664C" d="M9.4,32.5L2.1,61.9H14c-1.6-7.7,4-21,4-21L9.4,32.5z" ></path> <path fill="#FFD6BB" d="M15.8,24.8c0,0,4.9-4.5,9.5-3.9c2.3,0.3-7.1,7.6-7.1,7.6s9.7-8.2,11.7-5.6c1.8,2.3-8.9,9.8-8.9,9.8 s10-8.1,9.6-4.6c-0.3,3.8-7.9,12.8-12.5,13.8C11.5,43.2,6.3,39,9.8,24.4C11.6,17,13.3,25.2,15.8,24.8" ></path> <path fill="#89664C" d="M54.8,32.5l7.3,29.4H50.2c1.6-7.7-4-21-4-21L54.8,32.5z" ></path> <path fill="#FFD6BB" d="M48.4,24.8c0,0-4.9-4.5-9.5-3.9c-2.3,0.3,7.1,7.6,7.1,7.6s-9.7-8.2-11.7-5.6c-1.8,2.3,8.9,9.8,8.9,9.8 s-10-8.1-9.7-4.6c0.4,3.8,8,12.8,12.6,13.8c6.6,1.3,11.8-2.9,8.3-17.5C52.6,17,50.9,25.2,48.4,24.8" ></path> {/hide}效果展示用户操作的响应通过CSS的伪类和选择器，我们可以根据用户的操作（如点击、悬停或聚焦）触发不同的动画效果。例如，当用户点击某个按钮时，卡片的某些元素会产生变化，或者当用户输入密码时，输入框的内容会以特殊形式显示。这些交互设计能够显著提升用户的操作体验。结语CSS为我们提供了一种简单而强大的工具，能够轻松实现各种交互式设计效果。卡片设计只是CSS应用的冰山一角，随着技术的不断发展，我们相信CSS将在未来的网页设计中发挥更加重要的作用。希望这篇文章能为你带来一些灵感，激发你探索更多CSS设计的可能性！注意：本文旨在探讨CSS设计的设计思路和应用场景，并未深入解析具体代码实现。如果你对代码细节感兴趣，可以参考相关的CSS文档或教程进行深入学习。
用CSS打造一个充满动感的加载动画：让等待变得有趣
用CSS打造一个充满动感的加载动画：让等待变得有趣在当今快节奏的数字世界中，用户对网页加载速度的要求越来越高。然而，无论技术如何进步，加载时间始终是不可避免的。为了让用户在等待时不感到无聊或焦虑，一个精心设计的加载动画可以起到至关重要的作用。今天，我们将探讨如何通过CSS实现一个充满动感的加载动画，而无需深入代码细节。加载动画的重要性加载动画不仅仅是让用户知道页面正在加载的工具，它还可以成为品牌形象的一部分。一个独特的加载动画能够为用户留下深刻的印象，甚至成为网站的亮点。以下是设计加载动画时需要考虑的几个关键点：视觉吸引力：动画应具有足够的吸引力，能够抓住用户的注意力。流畅性：动画的过渡应平滑自然，避免卡顿或生硬的效果。与品牌一致：动画的设计应与网站的整体风格和品牌形象相协调。设计灵感：从自然到抽象在设计加载动画时，我们可以从自然界或抽象艺术中汲取灵感。例如，旋转的星系、绽放的花朵、流动的粒子等，这些动态效果都可以通过CSS动画来实现。通过模拟这些自然现象或抽象概念，我们可以为用户创造一种既熟悉又新奇的视觉体验。实现一个动感的加载动画为了实现一个动感的加载动画，我们可以利用CSS的transform属性和@keyframes规则。通过将多个元素以不同的角度和延迟进行旋转和平移，我们可以创建出一个充满活力的加载效果。动画的核心思路在这个动画中，我们使用了多个小方块作为动画的基本单元。每个小方块都通过transform属性进行旋转和平移，从而形成一个环绕的效果。通过为每个小方块设置不同的延迟时间，我们可以让它们依次启动，形成一个连贯的动画序列。关键帧动画的作用@keyframes规则定义了动画的各个阶段。在这个例子中，我们通过关键帧控制了小方块的平移距离，使得它们在动画的中间阶段向外扩展，然后再回到原位。这种来回运动的效果为动画增添了更多的动感和层次感。完整css代码：{hide}.spinner { position: absolute; width: 9px; height: 9px; } .spinner div { position: absolute; width: 50%; height: 150%; background: #000000; transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%)); animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease; } .spinner div:nth-child(1) { --delay: 0.1; --rotation: 36; --translation: 150; } .spinner div:nth-child(2) { --delay: 0.2; --rotation: 72; --translation: 150; } .spinner div:nth-child(3) { --delay: 0.3; --rotation: 108; --translation: 150; } .spinner div:nth-child(4) { --delay: 0.4; --rotation: 144; --translation: 150; } .spinner div:nth-child(5) { --delay: 0.5; --rotation: 180; --translation: 150; } .spinner div:nth-child(6) { --delay: 0.6; --rotation: 216; --translation: 150; } .spinner div:nth-child(7) { --delay: 0.7; --rotation: 252; --translation: 150; } .spinner div:nth-child(8) { --delay: 0.8; --rotation: 288; --translation: 150; } .spinner div:nth-child(9) { --delay: 0.9; --rotation: 324; --translation: 150; } .spinner div:nth-child(10) { --delay: 1; --rotation: 360; --translation: 150; } @keyframes spinner-fzua35 { 0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, 100% { transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%)); } 50% { transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%)); } }{/hide}HTML相关代码： React组件代码：{hide}import React from 'react'; import styled from 'styled-components'; const Loader = () => { return ( <StyledWrapper> </StyledWrapper> ); } const StyledWrapper = styled.div` .spinner { position: absolute; width: 9px; height: 9px; } .spinner div { position: absolute; width: 50%; height: 150%; background: #000000; transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%)); animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease; } .spinner div:nth-child(1) { --delay: 0.1; --rotation: 36; --translation: 150; } .spinner div:nth-child(2) { --delay: 0.2; --rotation: 72; --translation: 150; } .spinner div:nth-child(3) { --delay: 0.3; --rotation: 108; --translation: 150; } .spinner div:nth-child(4) { --delay: 0.4; --rotation: 144; --translation: 150; } .spinner div:nth-child(5) { --delay: 0.5; --rotation: 180; --translation: 150; } .spinner div:nth-child(6) { --delay: 0.6; --rotation: 216; --translation: 150; } .spinner div:nth-child(7) { --delay: 0.7; --rotation: 252; --translation: 150; } .spinner div:nth-child(8) { --delay: 0.8; --rotation: 288; --translation: 150; } .spinner div:nth-child(9) { --delay: 0.9; --rotation: 324; --translation: 150; } .spinner div:nth-child(10) { --delay: 1; --rotation: 360; --translation: 150; } @keyframes spinner-fzua35 { 0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, 100% { transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%)); } 50% { transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%)); } }`; export default Loader; {/hide}Vue组件代码：{hide} {/hide}效果展示结语CSS动画为我们提供了一种简单而强大的工具，能够轻松实现各种炫酷的视觉效果。加载动画只是CSS动画应用的冰山一角，随着技术的不断发展，我们相信CSS动画将在未来的网页设计中发挥更加重要的作用。希望这篇文章能为你带来一些灵感，激发你探索更多CSS动画的可能性！注意：本文旨在探讨CSS动画的设计思路和应用场景，并未深入解析具体代码实现。如果你对代码细节感兴趣，可以参考相关的CSS文档或教程进行深入学习。
用CSS打造梦幻星空与宇航员动画效果
用 CSS 打造梦幻星空与宇航员动画效果在现代网页设计中，CSS 动画已经成为提升用户体验的重要工具。今天，我们将分享一段令人惊叹的 CSS 代码，它能够为你的网页添加一个梦幻的星空背景和一个旋转的宇航员动画效果。这段代码不仅视觉效果出众，还能为你的网站增添一份科技感和趣味性。星空飘雪效果在这段代码中，我们使用了 @keyframes 来定义星空的飘雪动画。通过 animation 属性，星星从页面顶部缓缓飘落，营造出一种梦幻的氛围。每一颗星星都被精心设计，大小不一，位置各异，仿佛真实的星空一般。@keyframes snow { 0% { opacity: 0; transform: translateY(0px); } 20% { opacity: 1; } 100% { opacity: 1; transform: translateY(650px); } }旋转的宇航员除了星空效果，我们还添加了一个旋转的宇航员动画。宇航员的设计非常精致，从头盔到身体，每一个细节都通过 CSS 精心绘制。宇航员在页面中央缓缓旋转，仿佛在太空中漂浮，给人一种身临其境的感觉。@keyframes astronaut { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }完整的CSS代码：{hide}@keyframes snow { 0% { opacity: 0; transform: translateY(0px); } 20% { opacity: 1; } 100% { opacity: 1; transform: translateY(650px); } } @keyframes astronaut { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .box-of-star1, .box-of-star2, .box-of-star3, .box-of-star4 { width: 100%; position: absolute; z-index: 10; left: 0; top: 0; transform: translateY(0px); height: 700px; } .box-of-star1 { animation: snow 5s linear infinite; } .box-of-star2 { animation: snow 5s -1.64s linear infinite; } .box-of-star3 { animation: snow 5s -2.30s linear infinite; } .box-of-star4 { animation: snow 5s -3.30s linear infinite; } .star { width: 3px; height: 3px; border-radius: 50%; background-color: #FFF; position: absolute; z-index: 10; opacity: 0.7; } .star:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: #FFF; position: absolute; z-index: 10; top: 80px; left: 70px; opacity: .7; } .star:after { content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: #FFF; position: absolute; z-index: 10; top: 8px; left: 170px; opacity: .9; } .star-position1 { top: 30px; left: 20px; } .star-position2 { top: 110px; left: 250px; } .star-position3 { top: 60px; left: 570px; } .star-position4 { top: 120px; left: 900px; } .star-position5 { top: 20px; left: 1120px; } .star-position6 { top: 90px; left: 1280px; } .star-position7 { top: 30px; left: 1480px; } .astronaut { width: 250px; height: 300px; position: absolute; z-index: 11; top: calc(50% - 150px); left: calc(50% - 125px); animation: astronaut 5s linear infinite; } .schoolbag { width: 100px; height: 150px; position: absolute; z-index: 1; top: calc(50% - 75px); left: calc(50% - 50px); background-color: #94b7ca; border-radius: 50px 50px 0 0 / 30px 30px 0 0; } .head { width: 97px; height: 80px; position: absolute; z-index: 3; background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%); border-radius: 50%; top: 34px; left: calc(50% - 47.5px); } .head:after { content: ""; width: 60px; height: 50px; position: absolute; top: calc(50% - 25px); left: calc(50% - 30px); background: -webkit-linear-gradient(top, #15aece 0%, #15aece 50%, #0391bf 50%, #0391bf 100%); border-radius: 15px; } .head:before { content: ""; width: 12px; height: 25px; position: absolute; top: calc(50% - 12.5px); left: -4px; background-color: #618095; border-radius: 5px; box-shadow: 92px 0px 0px #618095; } .body { width: 85px; height: 100px; position: absolute; z-index: 2; background-color: #fffbff; border-radius: 40px / 20px; top: 105px; left: calc(50% - 41px); background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%); } .panel { width: 60px; height: 40px; position: absolute; top: 20px; left: calc(50% - 30px); background-color: #b7cceb; } .panel:before { content: ""; width: 30px; height: 5px; position: absolute; top: 9px; left: 7px; background-color: #fbfdfa; box-shadow: 0px 9px 0px #fbfdfa, 0px 18px 0px #fbfdfa; } .panel:after { content: ""; width: 8px; height: 8px; position: absolute; top: 9px; right: 7px; background-color: #fbfdfa; border-radius: 50%; box-shadow: 0px 14px 0px 2px #fbfdfa; } .arm { width: 80px; height: 30px; position: absolute; top: 121px; z-index: 2; } .arm-left { left: 30px; background-color: #e3e8eb; border-radius: 0 0 0 39px; } .arm-right { right: 30px; background-color: #fbfdfa; border-radius: 0 0 39px 0; } .arm-left:before, .arm-right:before { content: ""; width: 30px; height: 70px; position: absolute; top: -40px; } .arm-left:before { border-radius: 50px 50px 0px 120px / 50px 50px 0 110px; left: 0; background-color: #e3e8eb; } .arm-right:before { border-radius: 50px 50px 120px 0 / 50px 50px 110px 0; right: 0; background-color: #fbfdfa; } .arm-left:after, .arm-right:after { content: ""; width: 30px; height: 10px; position: absolute; top: -24px; } .arm-left:after { background-color: #6e91a4; left: 0; } .arm-right:after { right: 0; background-color: #b6d2e0; } .leg { width: 30px; height: 40px; position: absolute; z-index: 2; bottom: 70px; } .leg-left { left: 76px; background-color: #e3e8eb; transform: rotate(20deg); } .leg-right { right: 73px; background-color: #fbfdfa; transform: rotate(-20deg); } .leg-left:before, .leg-right:before { content: ""; width: 50px; height: 25px; position: absolute; bottom: -26px; } .leg-left:before { left: -20px; background-color: #e3e8eb; border-radius: 30px 0 0 0; border-bottom: 10px solid #6d96ac; } .leg-right:before { right: -20px; background-color: #fbfdfa; border-radius: 0 30px 0 0; border-bottom: 10px solid #b0cfe4; }{/hide}React组件代码：{hide}import React from 'react'; import styled from 'styled-components'; const Loader = () => { return ( <StyledWrapper> </StyledWrapper> ); } const StyledWrapper = styled.div` @keyframes snow { 0% { opacity: 0; transform: translateY(0px); } 20% { opacity: 1; } 100% { opacity: 1; transform: translateY(650px); } } @keyframes astronaut { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .box-of-star1, .box-of-star2, .box-of-star3, .box-of-star4 { width: 100%; position: absolute; z-index: 10; left: 0; top: 0; transform: translateY(0px); height: 700px; } .box-of-star1 { animation: snow 5s linear infinite; } .box-of-star2 { animation: snow 5s -1.64s linear infinite; } .box-of-star3 { animation: snow 5s -2.30s linear infinite; } .box-of-star4 { animation: snow 5s -3.30s linear infinite; } .star { width: 3px; height: 3px; border-radius: 50%; background-color: #FFF; position: absolute; z-index: 10; opacity: 0.7; } .star:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: #FFF; position: absolute; z-index: 10; top: 80px; left: 70px; opacity: .7; } .star:after { content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: #FFF; position: absolute; z-index: 10; top: 8px; left: 170px; opacity: .9; } .star-position1 { top: 30px; left: 20px; } .star-position2 { top: 110px; left: 250px; } .star-position3 { top: 60px; left: 570px; } .star-position4 { top: 120px; left: 900px; } .star-position5 { top: 20px; left: 1120px; } .star-position6 { top: 90px; left: 1280px; } .star-position7 { top: 30px; left: 1480px; } .astronaut { width: 250px; height: 300px; position: absolute; z-index: 11; top: calc(50% - 150px); left: calc(50% - 125px); animation: astronaut 5s linear infinite; } .schoolbag { width: 100px; height: 150px; position: absolute; z-index: 1; top: calc(50% - 75px); left: calc(50% - 50px); background-color: #94b7ca; border-radius: 50px 50px 0 0 / 30px 30px 0 0; } .head { width: 97px; height: 80px; position: absolute; z-index: 3; background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%); border-radius: 50%; top: 34px; left: calc(50% - 47.5px); } .head:after { content: ""; width: 60px; height: 50px; position: absolute; top: calc(50% - 25px); left: calc(50% - 30px); background: -webkit-linear-gradient(top, #15aece 0%, #15aece 50%, #0391bf 50%, #0391bf 100%); border-radius: 15px; } .head:before { content: ""; width: 12px; height: 25px; position: absolute; top: calc(50% - 12.5px); left: -4px; background-color: #618095; border-radius: 5px; box-shadow: 92px 0px 0px #618095; } .body { width: 85px; height: 100px; position: absolute; z-index: 2; background-color: #fffbff; border-radius: 40px / 20px; top: 105px; left: calc(50% - 41px); background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%); } .panel { width: 60px; height: 40px; position: absolute; top: 20px; left: calc(50% - 30px); background-color: #b7cceb; } .panel:before { content: ""; width: 30px; height: 5px; position: absolute; top: 9px; left: 7px; background-color: #fbfdfa; box-shadow: 0px 9px 0px #fbfdfa, 0px 18px 0px #fbfdfa; } .panel:after { content: ""; width: 8px; height: 8px; position: absolute; top: 9px; right: 7px; background-color: #fbfdfa; border-radius: 50%; box-shadow: 0px 14px 0px 2px #fbfdfa; } .arm { width: 80px; height: 30px; position: absolute; top: 121px; z-index: 2; } .arm-left { left: 30px; background-color: #e3e8eb; border-radius: 0 0 0 39px; } .arm-right { right: 30px; background-color: #fbfdfa; border-radius: 0 0 39px 0; } .arm-left:before, .arm-right:before { content: ""; width: 30px; height: 70px; position: absolute; top: -40px; } .arm-left:before { border-radius: 50px 50px 0px 120px / 50px 50px 0 110px; left: 0; background-color: #e3e8eb; } .arm-right:before { border-radius: 50px 50px 120px 0 / 50px 50px 110px 0; right: 0; background-color: #fbfdfa; } .arm-left:after, .arm-right:after { content: ""; width: 30px; height: 10px; position: absolute; top: -24px; } .arm-left:after { background-color: #6e91a4; left: 0; } .arm-right:after { right: 0; background-color: #b6d2e0; } .leg { width: 30px; height: 40px; position: absolute; z-index: 2; bottom: 70px; } .leg-left { left: 76px; background-color: #e3e8eb; transform: rotate(20deg); } .leg-right { right: 73px; background-color: #fbfdfa; transform: rotate(-20deg); } .leg-left:before, .leg-right:before { content: ""; width: 50px; height: 25px; position: absolute; bottom: -26px; } .leg-left:before { left: -20px; background-color: #e3e8eb; border-radius: 30px 0 0 0; border-bottom: 10px solid #6d96ac; } .leg-right:before { right: -20px; background-color: #fbfdfa; border-radius: 0 30px 0 0; border-bottom: 10px solid #b0cfe4; }`; export default Loader; {/hide}Vue组件代码：{hide} {/hide}如何使用要将这段代码应用到你的网页中，只需将 CSS 代码复制到你的样式文件中，并在 HTML 中添加相应的结构即可。你可以根据自己的需求调整动画的速度、星星的数量和宇航员的大小。 结语这段 CSS 代码不仅展示了 CSS 的强大功能，也为网页设计师提供了一种新的创意表达方式。无论是用于个人博客、科技类网站，还是作为登录页的背景，这段代码都能为你的网页增添一份独特的魅力。希望你喜欢这个效果，并能在你的项目中加以运用！如果你对这段代码感兴趣，不妨尝试将其应用到你的网页中，体验一下它带来的视觉盛宴吧！
用CSS实现一个趣味手指点击加载动画
用CSS实现一个趣味手指点击加载动画在网页设计中，加载动画不仅是提升用户体验的重要元素，还能为页面增添趣味性和互动性。今天，我们将分享一个用纯CSS实现的手指点击加载动画。这个动画通过模拟手指点击的动作，生动有趣，适合用于各种网页场景。动画效果简介这个动画展示了一只手指在屏幕上点击的效果。手指的每个关节都有细致的动画，点击动作流畅自然，背景阴影和光影效果也让整个动画更加逼真。通过CSS的关键帧动画和渐变背景，我们成功地将这一场景生动地呈现出来。完整CSS代码：{hide}.🤚 { --skin-color: #E4C560; --tap-speed: 0.6s; --tap-stagger: 0.1s; position: relative; width: 80px; height: 60px; margin-left: 80px; } .🤚:before { content: ''; display: block; width: 180%; height: 75%; position: absolute; top: 70%; right: 20%; background-color: black; border-radius: 40px 10px; filter: blur(10px); opacity: 0.3; } .🌴 { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--skin-color); border-radius: 10px 40px; } .👍 { position: absolute; width: 120%; height: 38px; background-color: var(--skin-color); bottom: -18%; right: 1%; transform-origin: calc(100% - 20px) 20px; transform: rotate(-20deg); border-radius: 30px 20px 20px 10px; border-bottom: 2px solid rgba(0, 0, 0, 0.1); border-left: 2px solid rgba(0, 0, 0, 0.1); } .👍:after { width: 20%; height: 60%; content: ''; background-color: rgba(255, 255, 255, 0.3); position: absolute; bottom: -8%; left: 5px; border-radius: 60% 10% 10% 30%; border-right: 2px solid rgba(0, 0, 0, 0.05); } .👉 { position: absolute; width: 80%; height: 35px; background-color: var(--skin-color); bottom: 32%; right: 64%; transform-origin: 100% 20px; animation-duration: calc(var(--tap-speed) * 2); animation-timing-function: ease-in-out; animation-iteration-count: infinite; transform: rotate(10deg); } .👉:before { content: ''; position: absolute; width: 140%; height: 30px; background-color: var(--skin-color); bottom: 8%; right: 65%; transform-origin: calc(100% - 20px) 20px; transform: rotate(-60deg); border-radius: 20px; } .👉:nth-child(1) { animation-delay: 0; filter: brightness(70%); animation-name: tap-upper-1; } .👉:nth-child(2) { animation-delay: var(--tap-stagger); filter: brightness(80%); animation-name: tap-upper-2; } .👉:nth-child(3) { animation-delay: calc(var(--tap-stagger) * 2); filter: brightness(90%); animation-name: tap-upper-3; } .👉:nth-child(4) { animation-delay: calc(var(--tap-stagger) * 3); filter: brightness(100%); animation-name: tap-upper-4; } @keyframes tap-upper-1 { 0%, 50%, 100% { transform: rotate(10deg) scale(0.4); } 40% { transform: rotate(50deg) scale(0.4); } } @keyframes tap-upper-2 { 0%, 50%, 100% { transform: rotate(10deg) scale(0.6); } 40% { transform: rotate(50deg) scale(0.6); } } @keyframes tap-upper-3 { 0%, 50%, 100% { transform: rotate(10deg) scale(0.8); } 40% { transform: rotate(50deg) scale(0.8); } } @keyframes tap-upper-4 { 0%, 50%, 100% { transform: rotate(10deg) scale(1); } 40% { transform: rotate(50deg) scale(1); } } {/hide}React组件代码：{hide}import React from 'react'; import styled from 'styled-components'; const Loader = () => { return ( <StyledWrapper> </StyledWrapper> ); } const StyledWrapper = styled.div` .🤚 { --skin-color: #E4C560; --tap-speed: 0.6s; --tap-stagger: 0.1s; position: relative; width: 80px; height: 60px; margin-left: 80px; } .🤚:before { content: ''; display: block; width: 180%; height: 75%; position: absolute; top: 70%; right: 20%; background-color: black; border-radius: 40px 10px; filter: blur(10px); opacity: 0.3; } .🌴 { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--skin-color); border-radius: 10px 40px; } .👍 { position: absolute; width: 120%; height: 38px; background-color: var(--skin-color); bottom: -18%; right: 1%; transform-origin: calc(100% - 20px) 20px; transform: rotate(-20deg); border-radius: 30px 20px 20px 10px; border-bottom: 2px solid rgba(0, 0, 0, 0.1); border-left: 2px solid rgba(0, 0, 0, 0.1); } .👍:after { width: 20%; height: 60%; content: ''; background-color: rgba(255, 255, 255, 0.3); position: absolute; bottom: -8%; left: 5px; border-radius: 60% 10% 10% 30%; border-right: 2px solid rgba(0, 0, 0, 0.05); } .👉 { position: absolute; width: 80%; height: 35px; background-color: var(--skin-color); bottom: 32%; right: 64%; transform-origin: 100% 20px; animation-duration: calc(var(--tap-speed) * 2); animation-timing-function: ease-in-out; animation-iteration-count: infinite; transform: rotate(10deg); } .👉:before { content: ''; position: absolute; width: 140%; height: 30px; background-color: var(--skin-color); bottom: 8%; right: 65%; transform-origin: calc(100% - 20px) 20px; transform: rotate(-60deg); border-radius: 20px; } .👉:nth-child(1) { animation-delay: 0; filter: brightness(70%); animation-name: tap-upper-1; } .👉:nth-child(2) { animation-delay: var(--tap-stagger); filter: brightness(80%); animation-name: tap-upper-2; } .👉:nth-child(3) { animation-delay: calc(var(--tap-stagger) * 2); filter: brightness(90%); animation-name: tap-upper-3; } .👉:nth-child(4) { animation-delay: calc(var(--tap-stagger) * 3); filter: brightness(100%); animation-name: tap-upper-4; } @keyframes tap-upper-1 { 0%, 50%, 100% { transform: rotate(10deg) scale(0.4); } 40% { transform: rotate(50deg) scale(0.4); } } @keyframes tap-upper-2 { 0%, 50%, 100% { transform: rotate(10deg) scale(0.6); } 40% { transform: rotate(50deg) scale(0.6); } } @keyframes tap-upper-3 { 0%, 50%, 100% { transform: rotate(10deg) scale(0.8); } 40% { transform: rotate(50deg) scale(0.8); } } @keyframes tap-upper-4 { 0%, 50%, 100% { transform: rotate(10deg) scale(1); } 40% { transform: rotate(50deg) scale(1); } }`; export default Loader; {/hide}Vue组件代码：{hide} {/hide}如何使用要将这个动画应用到你的网页中，只需将以下HTML代码添加到你的页面中： 然后将CSS代码复制到你的样式表中即可。你可以根据需要调整动画的持续时间、尺寸或颜色，使其更符合你的网页风格。适用场景这个手指点击加载动画非常适合用于以下场景：网页加载动画：当页面内容正在加载时，展示这个动画可以缓解用户的等待情绪。互动类网站：动画的趣味性非常适合用于需要用户点击操作的网站，比如表单提交或按钮点击。移动端网页：模拟手指点击的动作非常适合用于移动端网页，增强用户的互动体验。结语通过这个手指点击加载动画，我们再次见证了CSS的强大之处。仅仅使用CSS，我们就能创造出如此生动且富有创意的动画效果。希望这个动画能为你的网页设计带来灵感，并激发你探索更多CSS动画的可能性。如果你喜欢这个动画，不妨尝试调整其中的参数，创造出属于你自己的独特效果。CSS的世界充满了无限的可能，等待你去发现和创造！
用CSS打造一个可爱的仓鼠跑轮加载动画
用CSS打造一个可爱的仓鼠跑轮加载动画在网页设计中，加载动画是提升用户体验的重要元素之一。一个有趣且富有创意的加载动画不仅能缓解用户等待的焦虑，还能为页面增添独特的个性。今天，我们将分享一个用纯CSS实现的仓鼠跑轮加载动画，这个动画生动有趣，适合用于各种网页场景。动画效果简介这个动画展示了一只仓鼠在一个旋转的跑轮中奔跑的场景。仓鼠的头部、耳朵、眼睛、四肢和尾巴都有细致的动画效果，跑轮的辐条也在不断旋转，整体效果非常逼真。通过CSS的关键帧动画和渐变背景，我们成功地将这一场景生动地呈现出来。完整CSS代码：{hide}.wheel-and-hamster { --dur: 1s; position: relative; width: 12em; height: 12em; font-size: 14px; } .wheel, .hamster, .hamster div, .spoke { position: absolute; } .wheel, .spoke { border-radius: 50%; top: 0; left: 0; width: 100%; height: 100%; } .wheel { background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%); z-index: 2; } .hamster { animation: hamster var(--dur) ease-in-out infinite; top: 50%; left: calc(50% - 3.5em); width: 7em; height: 3.75em; transform: rotate(4deg) translate(-0.8em,1.85em); transform-origin: 50% 0; z-index: 1; } .hamster__head { animation: hamsterHead var(--dur) ease-in-out infinite; background: hsl(30,90%,55%); border-radius: 70% 30% 0 100% / 40% 25% 25% 60%; box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset, 0.75em -1.55em 0 hsl(30,90%,90%) inset; top: 0; left: -2em; width: 2.75em; height: 2.5em; transform-origin: 100% 50%; } .hamster__ear { animation: hamsterEar var(--dur) ease-in-out infinite; background: hsl(0,90%,85%); border-radius: 50%; box-shadow: -0.25em 0 hsl(30,90%,55%) inset; top: -0.25em; right: -0.25em; width: 0.75em; height: 0.75em; transform-origin: 50% 75%; } .hamster__eye { animation: hamsterEye var(--dur) linear infinite; background-color: hsl(0,0%,0%); border-radius: 50%; top: 0.375em; left: 1.25em; width: 0.5em; height: 0.5em; } .hamster__nose { background: hsl(0,90%,75%); border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%; top: 0.75em; left: 0; width: 0.2em; height: 0.25em; } .hamster__body { animation: hamsterBody var(--dur) ease-in-out infinite; background: hsl(30,90%,90%); border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%; box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset, 0.15em -0.5em 0 hsl(30,90%,80%) inset; top: 0.25em; left: 2em; width: 4.5em; height: 3em; transform-origin: 17% 50%; transform-style: preserve-3d; } .hamster__limb--fr, .hamster__limb--fl { clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%); top: 2em; left: 0.5em; width: 1em; height: 1.5em; transform-origin: 50% 0; } .hamster__limb--fr { animation: hamsterFRLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%); transform: rotate(15deg) translateZ(-1px); } .hamster__limb--fl { animation: hamsterFLLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%); transform: rotate(15deg); } .hamster__limb--br, .hamster__limb--bl { border-radius: 0.75em 0.75em 0 0; clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%); top: 1em; left: 2.8em; width: 1.5em; height: 2.5em; transform-origin: 50% 30%; } .hamster__limb--br { animation: hamsterBRLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%); transform: rotate(-25deg) translateZ(-1px); } .hamster__limb--bl { animation: hamsterBLLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%); transform: rotate(-25deg); } .hamster__tail { animation: hamsterTail var(--dur) linear infinite; background: hsl(0,90%,85%); border-radius: 0.25em 50% 50% 0.25em; box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset; top: 1.5em; right: -0.5em; width: 1em; height: 0.5em; transform: rotate(30deg) translateZ(-1px); transform-origin: 0.25em 0.25em; } .spoke { animation: spoke var(--dur) linear infinite; background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%), linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat; } /* Animations */ @keyframes hamster { from, to { transform: rotate(4deg) translate(-0.8em,1.85em); } 50% { transform: rotate(0) translate(-0.8em,1.85em); } } @keyframes hamsterHead { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(8deg); } } @keyframes hamsterEye { from, 90%, to { transform: scaleY(1); } 95% { transform: scaleY(0); } } @keyframes hamsterEar { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(12deg); } } @keyframes hamsterBody { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-2deg); } } @keyframes hamsterFRLimb { from, 25%, 50%, 75%, to { transform: rotate(50deg) translateZ(-1px); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-30deg) translateZ(-1px); } } @keyframes hamsterFLLimb { from, 25%, 50%, 75%, to { transform: rotate(-30deg); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(50deg); } } @keyframes hamsterBRLimb { from, 25%, 50%, 75%, to { transform: rotate(-60deg) translateZ(-1px); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(20deg) translateZ(-1px); } } @keyframes hamsterBLLimb { from, 25%, 50%, 75%, to { transform: rotate(20deg); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-60deg); } } @keyframes hamsterTail { from, 25%, 50%, 75%, to { transform: rotate(30deg) translateZ(-1px); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(10deg) translateZ(-1px); } } @keyframes spoke { from { transform: rotate(0); } to { transform: rotate(-1turn); } }{/hide}React组件代码：{hide}import React from 'react'; import styled from 'styled-components'; const Loader = () => { return ( <StyledWrapper> </StyledWrapper> ); } const StyledWrapper = styled.div` .wheel-and-hamster { --dur: 1s; position: relative; width: 12em; height: 12em; font-size: 14px; } .wheel, .hamster, .hamster div, .spoke { position: absolute; } .wheel, .spoke { border-radius: 50%; top: 0; left: 0; width: 100%; height: 100%; } .wheel { background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%); z-index: 2; } .hamster { animation: hamster var(--dur) ease-in-out infinite; top: 50%; left: calc(50% - 3.5em); width: 7em; height: 3.75em; transform: rotate(4deg) translate(-0.8em,1.85em); transform-origin: 50% 0; z-index: 1; } .hamster__head { animation: hamsterHead var(--dur) ease-in-out infinite; background: hsl(30,90%,55%); border-radius: 70% 30% 0 100% / 40% 25% 25% 60%; box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset, 0.75em -1.55em 0 hsl(30,90%,90%) inset; top: 0; left: -2em; width: 2.75em; height: 2.5em; transform-origin: 100% 50%; } .hamster__ear { animation: hamsterEar var(--dur) ease-in-out infinite; background: hsl(0,90%,85%); border-radius: 50%; box-shadow: -0.25em 0 hsl(30,90%,55%) inset; top: -0.25em; right: -0.25em; width: 0.75em; height: 0.75em; transform-origin: 50% 75%; } .hamster__eye { animation: hamsterEye var(--dur) linear infinite; background-color: hsl(0,0%,0%); border-radius: 50%; top: 0.375em; left: 1.25em; width: 0.5em; height: 0.5em; } .hamster__nose { background: hsl(0,90%,75%); border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%; top: 0.75em; left: 0; width: 0.2em; height: 0.25em; } .hamster__body { animation: hamsterBody var(--dur) ease-in-out infinite; background: hsl(30,90%,90%); border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%; box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset, 0.15em -0.5em 0 hsl(30,90%,80%) inset; top: 0.25em; left: 2em; width: 4.5em; height: 3em; transform-origin: 17% 50%; transform-style: preserve-3d; } .hamster__limb--fr, .hamster__limb--fl { clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%); top: 2em; left: 0.5em; width: 1em; height: 1.5em; transform-origin: 50% 0; } .hamster__limb--fr { animation: hamsterFRLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%); transform: rotate(15deg) translateZ(-1px); } .hamster__limb--fl { animation: hamsterFLLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%); transform: rotate(15deg); } .hamster__limb--br, .hamster__limb--bl { border-radius: 0.75em 0.75em 0 0; clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%); top: 1em; left: 2.8em; width: 1.5em; height: 2.5em; transform-origin: 50% 30%; } .hamster__limb--br { animation: hamsterBRLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%); transform: rotate(-25deg) translateZ(-1px); } .hamster__limb--bl { animation: hamsterBLLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%); transform: rotate(-25deg); } .hamster__tail { animation: hamsterTail var(--dur) linear infinite; background: hsl(0,90%,85%); border-radius: 0.25em 50% 50% 0.25em; box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset; top: 1.5em; right: -0.5em; width: 1em; height: 0.5em; transform: rotate(30deg) translateZ(-1px); transform-origin: 0.25em 0.25em; } .spoke { animation: spoke var(--dur) linear infinite; background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%), linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat; } /* Animations */ @keyframes hamster { from, to { transform: rotate(4deg) translate(-0.8em,1.85em); } 50% { transform: rotate(0) translate(-0.8em,1.85em); } } @keyframes hamsterHead { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(8deg); } } @keyframes hamsterEye { from, 90%, to { transform: scaleY(1); } 95% { transform: scaleY(0); } } @keyframes hamsterEar { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(12deg); } } @keyframes hamsterBody { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-2deg); } } @keyframes hamsterFRLimb { from, 25%, 50%, 75%, to { transform: rotate(50deg) translateZ(-1px); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-30deg) translateZ(-1px); } } @keyframes hamsterFLLimb { from, 25%, 50%, 75%, to { transform: rotate(-30deg); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(50deg); } } @keyframes hamsterBRLimb { from, 25%, 50%, 75%, to { transform: rotate(-60deg) translateZ(-1px); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(20deg) translateZ(-1px); } } @keyframes hamsterBLLimb { from, 25%, 50%, 75%, to { transform: rotate(20deg); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-60deg); } } @keyframes hamsterTail { from, 25%, 50%, 75%, to { transform: rotate(30deg) translateZ(-1px); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(10deg) translateZ(-1px); } } @keyframes spoke { from { transform: rotate(0); } to { transform: rotate(-1turn); } }`; export default Loader; {/hide}Vue组件代码：{hide} {/hide}如何使用要将这个动画应用到你的网页中，只需将以下HTML代码添加到你的页面中： 然后将CSS代码复制到你的样式表中即可。你可以根据需要调整动画的持续时间、尺寸或颜色，使其更符合你的网页风格。适用场景这个仓鼠跑轮加载动画非常适合用于以下场景：网页加载动画：当页面内容正在加载时，展示这个动画可以缓解用户的等待情绪。游戏或娱乐类网站：动画的趣味性非常适合用于游戏、儿童或宠物相关的网站。个人博客或作品集：为你的个人网站增添一抹独特的创意，吸引访客的注意力。结语通过这个仓鼠跑轮加载动画，我们再次见证了CSS的强大之处。仅仅使用CSS，我们就能创造出如此生动且富有创意的动画效果。希望这个动画能为你的网页设计带来灵感，并激发你探索更多CSS动画的可能性。如果你喜欢这个动画，不妨尝试调整其中的参数，创造出属于你自己的独特效果。CSS的世界充满了无限的可能，等待你去发现和创造！
两款用纯CSS实现动态终端加载界面：复古与科技感的碰撞
用纯CSS实现动态终端加载界面：复古与科技感的碰撞在数字时代的浪潮中，网页加载动画早已突破简单的转圈图标，成为传递品牌个性的视觉载体。今天我们将探索一款极具辨识度的CSS加载特效——它完美复刻了程序员最熟悉的终端界面，让等待过程变成充满仪式感的数字艺术体验。效果呈现：当代码美学遇上动态交互这个加载动画以经典命令行界面为蓝本，呈现三大视觉亮点：拟真窗口设计：顶部状态栏配备红黄绿三色控制按钮，还原操作系统原生体验智能光标系统：绿色竖条光标以自然频率闪烁，精准模拟真实输入场景动态文字流："正在加载..."文字以逐字输入效果出现，随后如代码执行完成般优雅消失技术亮点：CSS的魔法时刻双重动画协同：通过typeAndDelete控制文字流，blinkCursor驱动光标闪烁，两者完美同步像素级还原：使用Courier New等宽字体，0.1em超细边框呈现终端设备的锐利显示效果智能响应设计：采用em单位实现组件比例自适应，确保不同屏幕尺寸下的显示一致性即插即用代码第一款{hide}完整css代码 @keyframes blinkCursor { 50% { border-right-color: transparent; } } @keyframes typeAndDelete { 0%, 10% { width: 0; } 45%, 55% { width: 6.2em; } /* adjust width based on content */ 90%, 100% { width: 0; } } .terminal-loader { border: 0.1em solid #333; background-color: #1a1a1a; color: #0f0; font-family: "Courier New", Courier, monospace; font-size: 1em; padding: 1.5em 1em; width: 12em; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 4px; position: relative; overflow: hidden; box-sizing: border-box; } .terminal-header { position: absolute; top: 0; left: 0; right: 0; height: 1.5em; background-color: #333; border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 0 0.4em; box-sizing: border-box; } .terminal-controls { float: right; } .control { display: inline-block; width: 0.6em; height: 0.6em; margin-left: 0.4em; border-radius: 50%; background-color: #777; } .control.close { background-color: #e33; } .control.minimize { background-color: #ee0; } .control.maximize { background-color: #0b0; } .terminal-title { float: left; line-height: 1.5em; color: #eee; } .text { display: inline-block; white-space: nowrap; overflow: hidden; border-right: 0.2em solid green; /* Cursor */ animation: typeAndDelete 4s steps(11) infinite, blinkCursor 0.5s step-end infinite alternate; margin-top: 1.5em; } {/hide}相关html代码： Status Loading... Vue组件代码：{hide} Status Loading... {/hide}React组件代码：{hide}import React from 'react'; import styled from 'styled-components'; const Loader = () => { return ( <StyledWrapper> Status Loading... </StyledWrapper> ); } const StyledWrapper = styled.div` @keyframes blinkCursor { 50% { border-right-color: transparent; } } @keyframes typeAndDelete { 0%, 10% { width: 0; } 45%, 55% { width: 6.2em; } /* adjust width based on content */ 90%, 100% { width: 0; } } .terminal-loader { border: 0.1em solid #333; background-color: #1a1a1a; color: #0f0; font-family: "Courier New", Courier, monospace; font-size: 1em; padding: 1.5em 1em; width: 12em; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 4px; position: relative; overflow: hidden; box-sizing: border-box; } .terminal-header { position: absolute; top: 0; left: 0; right: 0; height: 1.5em; background-color: #333; border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 0 0.4em; box-sizing: border-box; } .terminal-controls { float: right; } .control { display: inline-block; width: 0.6em; height: 0.6em; margin-left: 0.4em; border-radius: 50%; background-color: #777; } .control.close { background-color: #e33; } .control.minimize { background-color: #ee0; } .control.maximize { background-color: #0b0; } .terminal-title { float: left; line-height: 1.5em; color: #eee; } .text { display: inline-block; white-space: nowrap; overflow: hidden; border-right: 0.2em solid green; /* Cursor */ animation: typeAndDelete 4s steps(11) infinite, blinkCursor 0.5s step-end infinite alternate; margin-top: 1.5em; }`; export default Loader; {/hide}Svelte组件代码：{hide} Status Loading... {/hide}Lit组件代码：{hide}import { LitElement, html, css } from 'lit'; import { customElement } from 'lit/decorators.js'; @customElement('my-loader') export class MyLoader extends LitElement { static styles = css` @keyframes blinkCursor { 50% { border-right-color: transparent; } } @keyframes typeAndDelete { 0%, 10% { width: 0; } 45%, 55% { width: 6.2em; } /* adjust width based on content */ 90%, 100% { width: 0; } } .terminal-loader { border: 0.1em solid #333; background-color: #1a1a1a; color: #0f0; font-family: "Courier New", Courier, monospace; font-size: 1em; padding: 1.5em 1em; width: 12em; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 4px; position: relative; overflow: hidden; box-sizing: border-box; } .terminal-header { position: absolute; top: 0; left: 0; right: 0; height: 1.5em; background-color: #333; border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 0 0.4em; box-sizing: border-box; } .terminal-controls { float: right; } .control { display: inline-block; width: 0.6em; height: 0.6em; margin-left: 0.4em; border-radius: 50%; background-color: #777; } .control.close { background-color: #e33; } .control.minimize { background-color: #ee0; } .control.maximize { background-color: #0b0; } .terminal-title { float: left; line-height: 1.5em; color: #eee; } .text { display: inline-block; white-space: nowrap; overflow: hidden; border-right: 0.2em solid green; /* Cursor */ animation: typeAndDelete 4s steps(11) infinite, blinkCursor 0.5s step-end infinite alternate; margin-top: 1.5em; }`; render() { return html` Status Loading... `; } } declare global { interface HTMLElementTagNameMap { 'my-loader': MyLoader; } } {/hide}第二款{hide}@keyframes blinkCursor { 50% { border-right-color: transparent; } } @keyframes typeAndDelete { 0%, 10% { width: 0; } 45%, 55% { width: 5em; } 90%, 100% { width: 0; } } .terminal-loader { width: 100%; max-width: 400px; height: 200px; background: #1c1c1c; border: 1px solid #ffffff3e; border-radius: 10px; overflow: hidden; margin: 20px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); } .terminal-header { position: relative; display: flex; align-items: center; justify-content: center; background-color: #343434; padding: 6px; } .terminal-controls { position: absolute; left: 10px; display: flex; gap: 7px; } .control { display: inline-block; width: 15px; height: 15px; border-radius: 50%; background-color: #777; } .control.close { background-color: #e33; } .control.minimize { background-color: #ee0; } .control.maximize { background-color: #0b0; } .terminal-title { color: #eeeeeec1; } .content { padding: 10px; } .text { display: inline-block; white-space: nowrap; overflow: hidden; border-right: 2px solid green; animation: typeAndDelete 4s steps(11) infinite, blinkCursor 0.5s step-end infinite alternate; color: rgb(0, 196, 0); font-weight: 600; } {/hide}相关html代码： Status Loading... Vue组件代码：{hide} Status Loading... {/hide}React组件代码：{hide}import React from 'react'; import styled from 'styled-components'; const Loader = () => { return ( <StyledWrapper> Status Loading... </StyledWrapper> ); } const StyledWrapper = styled.div` @keyframes blinkCursor { 50% { border-right-color: transparent; } } @keyframes typeAndDelete { 0%, 10% { width: 0; } 45%, 55% { width: 5em; } 90%, 100% { width: 0; } } .terminal-loader { width: 100%; max-width: 400px; height: 200px; background: #1c1c1c; border: 1px solid #ffffff3e; border-radius: 10px; overflow: hidden; margin: 20px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); } .terminal-header { position: relative; display: flex; align-items: center; justify-content: center; background-color: #343434; padding: 6px; } .terminal-controls { position: absolute; left: 10px; display: flex; gap: 7px; } .control { display: inline-block; width: 15px; height: 15px; border-radius: 50%; background-color: #777; } .control.close { background-color: #e33; } .control.minimize { background-color: #ee0; } .control.maximize { background-color: #0b0; } .terminal-title { color: #eeeeeec1; } .content { padding: 10px; } .text { display: inline-block; white-space: nowrap; overflow: hidden; border-right: 2px solid green; animation: typeAndDelete 4s steps(11) infinite, blinkCursor 0.5s step-end infinite alternate; color: rgb(0, 196, 0); font-weight: 600; }`; export default Loader; {/hide}Svelte组件代码：{hide} Status Loading... {/hide}Lit组件代码：{hide}import { LitElement, html, css } from 'lit'; import { customElement } from 'lit/decorators.js'; @customElement('my-loader') export class MyLoader extends LitElement { static styles = css` @keyframes blinkCursor { 50% { border-right-color: transparent; } } @keyframes typeAndDelete { 0%, 10% { width: 0; } 45%, 55% { width: 5em; } 90%, 100% { width: 0; } } .terminal-loader { width: 100%; max-width: 400px; height: 200px; background: #1c1c1c; border: 1px solid #ffffff3e; border-radius: 10px; overflow: hidden; margin: 20px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); } .terminal-header { position: relative; display: flex; align-items: center; justify-content: center; background-color: #343434; padding: 6px; } .terminal-controls { position: absolute; left: 10px; display: flex; gap: 7px; } .control { display: inline-block; width: 15px; height: 15px; border-radius: 50%; background-color: #777; } .control.close { background-color: #e33; } .control.minimize { background-color: #ee0; } .control.maximize { background-color: #0b0; } .terminal-title { color: #eeeeeec1; } .content { padding: 10px; } .text { display: inline-block; white-space: nowrap; overflow: hidden; border-right: 2px solid green; animation: typeAndDelete 4s steps(11) infinite, blinkCursor 0.5s step-end infinite alternate; color: rgb(0, 196, 0); font-weight: 600; }`; render() { return html` Status Loading... `; } } declare global { interface HTMLElementTagNameMap { 'my-loader': MyLoader; } } {/hide}应用场景推荐开发者门户网站：作为项目部署或编译时的等待动画科技产品后台：增强SAAS系统、数据分析平台的专业感极客主题页面：为个人博客/作品集注入数字美学基因终端模拟器组件：作为Web版命令行工具的加载过渡设计小贴士情绪化配色：将默认绿色(#0f0)改为青色(#0ff)可营造赛博朋克氛围多语言支持：通过调整steps()参数值适配不同文字长度沉浸式音效：搭配机械键盘音效可提升交互真实感这款加载动画证明：即便是等待时刻，也可以通过精心设计成为用户体验的加分项。期待看到您用这个代码创造出更多惊艳的数字艺术作品！
CSS特效代码星轨加载器：当CSS动画遇见银河呼吸律动
星轨加载器：当CSS动画遇见银河呼吸律动数字时代的等待仪式在界面设计的微观宇宙中，加载动画是最富诗意的时空隧道。这款星轨加载器以纯CSS创造天体运行般的曼妙节奏——八个光点沿圆形轨迹依次苏醒，在缩放间完成星际接力，最终编织成永不停歇的光之漩涡。设计哲学透视▎轨道动力学通过transform: rotate构建精密角度矩阵，每个光点以45度等差排列，形成完美的圆形路径布局▎脉冲心跳pulse0112关键帧动画创造独特的双相位呼吸：收缩期：粒子隐入虚空（scale(0) + 半透明）膨胀期：粒子绽放光芒（scale(1) + 全亮）▎星际接力animation-delay的负值设定让光点如同多米诺骨牌被依次触发，形成永不中断的循环涟漪魔幻应用时刻1. 科技仪表盘在数据可视化界面中，作为实时计算的视觉心跳：蓝色光点象征CPU波动紫色光点映射内存占用光晕半径反映网络延迟2. AR加载场景搭配镜面特效与微动效，营造全息投影般的未来感：.dot-spinner { --uib-color: hsl(270 100% 60%); filter: drop-shadow(0 0 12px #7d00ff); }3. 情绪化加载通过CSS变量实时映射用户状态：加载顺利时：光点如蔚蓝潮汐规律涨落出现错误时：红光急促闪烁形成警告漩涡document.documentElement.style.setProperty('--uib-speed', '0.6s');完整css特效代码：{hide}.dot-spinner { --uib-size: 2.8rem; --uib-speed: .9s; --uib-color: #183153; position: relative; display: flex; align-items: center; justify-content: flex-start; height: var(--uib-size); width: var(--uib-size); } .dot-spinner__dot { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: flex-start; height: 100%; width: 100%; } .dot-spinner__dot::before { content: ''; height: 20%; width: 20%; border-radius: 50%; background-color: var(--uib-color); transform: scale(0); opacity: 0.5; animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite; box-shadow: 0 0 20px rgba(18, 31, 53, 0.3); } .dot-spinner__dot:nth-child(2) { transform: rotate(45deg); } .dot-spinner__dot:nth-child(2)::before { animation-delay: calc(var(--uib-speed) * -0.875); } .dot-spinner__dot:nth-child(3) { transform: rotate(90deg); } .dot-spinner__dot:nth-child(3)::before { animation-delay: calc(var(--uib-speed) * -0.75); } .dot-spinner__dot:nth-child(4) { transform: rotate(135deg); } .dot-spinner__dot:nth-child(4)::before { animation-delay: calc(var(--uib-speed) * -0.625); } .dot-spinner__dot:nth-child(5) { transform: rotate(180deg); } .dot-spinner__dot:nth-child(5)::before { animation-delay: calc(var(--uib-speed) * -0.5); } .dot-spinner__dot:nth-child(6) { transform: rotate(225deg); } .dot-spinner__dot:nth-child(6)::before { animation-delay: calc(var(--uib-speed) * -0.375); } .dot-spinner__dot:nth-child(7) { transform: rotate(270deg); } .dot-spinner__dot:nth-child(7)::before { animation-delay: calc(var(--uib-speed) * -0.25); } .dot-spinner__dot:nth-child(8) { transform: rotate(315deg); } .dot-spinner__dot:nth-child(8)::before { animation-delay: calc(var(--uib-speed) * -0.125); } @keyframes pulse0112 { 0%, 100% { transform: scale(0); opacity: 0.5; } 50% { transform: scale(1); opacity: 1; } } {/hide}相关html代码： 视觉变形记▎星云模式为每个光点赋予独立色彩，创造彩虹星环：.dot-spinner__dot:nth-child(1)::before { --uib-color: #ff6b6b; } .dot-spinner__dot:nth-child(3)::before { --uib-color: #4ecdc4; } /* ...自定义每个光点颜色... */▎黑洞效应反转动画逻辑，模拟引力坍缩：@keyframes pulse0112 { 0%,100% { transform: scale(1); } 50% { transform: scale(0); } }▎流星尾迹添加运动模糊制造残影：.dot-spinner__dot::before { animation: pulse0112 calc(var(--uib-speed)*1.111) ease-in-out infinite, trail 1s linear infinite; } @keyframes trail { to { filter: blur(8px); opacity: 0; } }开发者手札这个加载器的精妙之处，在于用最简结构创造无限可能：CSS变量三重奏：--uib-size控制星轨直径，--uib-speed调节时空曲率，--uib-color定义星辰光谱精准的负延迟：通过calc(var(--uib-speed)*-0.875)等公式，实现光点启停的无缝衔接层级深度：box-shadow为光点注入立体光晕，避免平面化视觉当科技与艺术在代码中相遇，等待不再是时间的空白，而成为通往数字美学的任意门。星辰彩蛋：将速度设为1.8s，关闭室内灯光，凝视加载器三秒——你将看见CSS创造的银河漩涡... 🌌
css特效代码弹跳的精灵：一个让等待充满诗意的加载动画设计
弹跳的精灵：一个让等待充满诗意的加载动画设计当加载动画成为数字诗歌在这个每毫秒都珍贵的时代，我们总在寻找速度与美感的平衡点。本文介绍的这款CSS加载动画，用最简洁的代码编织出一支微型芭蕾——三个光点以不同节奏轻盈起落，投影随之呼吸般涨缩，仿佛屏幕深处藏着看不见的弹簧床。设计亮点速览灵动节奏：0.2秒的相位延迟创造出波浪般的运动韵律视觉欺骗：形变动画模拟真实弹性质感（压缩-弹起循环）氛围营造：模糊投影与透明度变化形成空气透视效果极简美学：纯CSS实现，文件大小仅相当于一张缩略图最佳应用场景1. 轻量级应用适合移动端H5页面、渐进式网页应用(PWA)，0性能负担的等待提示2. 深色模式界面白色圆点在暗色背景上跳动，如同夜空闪烁的星群3. 加载转场搭配以下场景产生奇妙化学反应：数据仪表盘加载时图片画廊缓冲期间长表单提交过程中完整css特效代码：{hide}.wrapper { width: 200px; height: 60px; position: relative; z-index: 1; } .circle { width: 20px; height: 20px; position: absolute; border-radius: 50%; background-color: #fff; left: 15%; transform-origin: 50%; animation: circle7124 .5s alternate infinite ease; } @keyframes circle7124 { 0% { top: 60px; height: 5px; border-radius: 50px 50px 25px 25px; transform: scaleX(1.7); } 40% { height: 20px; border-radius: 50%; transform: scaleX(1); } 100% { top: 0%; } } .circle:nth-child(2) { left: 45%; animation-delay: .2s; } .circle:nth-child(3) { left: auto; right: 15%; animation-delay: .3s; } .shadow { width: 20px; height: 4px; border-radius: 50%; background-color: rgba(0,0,0,0.9); position: absolute; top: 62px; transform-origin: 50%; z-index: -1; left: 15%; filter: blur(1px); animation: shadow046 .5s alternate infinite ease; } @keyframes shadow046 { 0% { transform: scaleX(1.5); } 40% { transform: scaleX(1); opacity: .7; } 100% { transform: scaleX(.2); opacity: .4; } } .shadow:nth-child(4) { left: 45%; animation-delay: .2s } .shadow:nth-child(5) { left: auto; right: 15%; animation-delay: .3s; } {/hide}相关html代码 视觉变形记通过简单修改CSS变量，这个基础动画可以蜕变成不同性格的角色：/* 霓虹夜店风 */ .circle { background: #ff08e6; box-shadow: 0 0 15px #ff08e6; } .shadow { background: rgba(255,8,230,0.3); } /* 森系呼吸感 */ .circle { background: #a8e6cf; height: 15px; } .shadow { filter: blur(2px); } /* 故障艺术版 */ .circle { animation: circle7124 .3s steps(2) infinite; }设计师备忘录节奏控制秘籍 调整animation-duration值：0.8s：慵懒的月球弹跳0.3s：急促的雨滴坠落搭配animation-iteration-count可制作进度完成动画悬浮魔法 添加鼠标互动：.wrapper:hover .circle { animation-play-state: paused; transform: translateY(-10px); }高级延展增加第四个圆点制作跑马灯效果为投影添加渐变制造立体感组合多个wrapper制作矩阵动画写给开发者的情书这个不足50行代码的动画，藏着CSS动画的精髓： 用transform代替位置变化保障性能， 用alternate参数实现自动往返运动， 用infinite ease创造永续的弹性循环。下次当用户等待时， 让这些跳跃的光点代替进度条， 用机械运动演绎生命感， 让等待时光成为界面叙事的一部分。创意彩蛋：在满月之夜将动画速度调至2倍，据说能看到像素精灵的舞蹈... ✨
两款科技感十足的WiFi动态CSS加载特性效果代码
动态加载特效的应用场景1. 网页加载指示动态加载特效，如上述的 WiFi 加载动画，非常适合用于网页或应用程序的加载过程中。当用户访问一个页面或提交表单时，可能会有短暂的延迟，尤其是在数据从服务器获取的过程中。此时展示一个吸引人的加载动画可以提高用户体验，减少等待的焦虑感。WiFi 加载动画以其简洁而富有科技感的设计，能够很好地融入现代网站和应用界面。2. 增强互动体验在需要强调某些操作正在进行的情况下，比如文件上传、下载进度、后台任务处理等，使用这种类型的加载动画可以增加视觉反馈，让用户知道系统正在工作。它不仅告知用户当前状态，还能通过其流畅且优雅的动作设计来提升整体的交互体验。3. 移动应用中的加载提示对于移动应用程序来说，网络条件不稳定可能导致资源加载时间延长。在这个时候，提供一个美观且不占用太多屏幕空间的加载指示器非常重要。WiFi 加载动画紧凑的设计正好满足这一需求，同时它的色彩搭配与动画效果也能为移动界面增添活力。4. 软件安装或更新过程无论是桌面软件还是移动应用，在进行安装或更新时通常会有较长的等待期。利用这样的加载动画可以帮助缓解用户的等待情绪，并且由于其独特的外观，还可以作为品牌识别的一部分，强化品牌形象。5. 游戏开发中的加载画面在游戏开发中，特别是在切换关卡或者加载大型资源包时，精美的加载动画不仅可以填补空白时间，还可以用来设置氛围，预热玩家的情绪。WiFi 加载动画的流线型设计和柔和的颜色过渡非常适合用作游戏内的加载元素。6. 在线服务的状态显示一些在线服务平台（如云存储、视频会议）可能需要频繁地与服务器通信以保持同步。使用个性化的加载动画来表示这些活动可以让用户更加直观地了解当前的服务状态，例如连接质量、数据传输进度等。7. 营销和广告页面在创建营销或广告页面时，设计师常常寻找能快速抓住观众注意力的方法。一个新颖且引人注目的加载动画可以在页面完全呈现之前就吸引到访客的目光，从而提高他们停留在页面上的可能性。WiFi 加载动画以其简约而不失时尚的特点，能够在众多静态内容中脱颖而出。8. 物联网设备的状态指示第一款效果演示第一款动态加载效果代码第一款css代码：{hide}#wifi-loader { --background: #62abff; --front-color: #4f29f0; --back-color: #c3c8de; --text-color: #414856; width: 64px; height: 64px; border-radius: 50px; position: relative; display: flex; justify-content: center; align-items: center; } #wifi-loader svg { position: absolute; display: flex; justify-content: center; align-items: center; } #wifi-loader svg circle { position: absolute; fill: none; stroke-width: 6px; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-100deg); transform-origin: center; } #wifi-loader svg circle.back { stroke: var(--back-color); } #wifi-loader svg circle.front { stroke: var(--front-color); } #wifi-loader svg.circle-outer { height: 86px; width: 86px; } #wifi-loader svg.circle-outer circle { stroke-dasharray: 62.75 188.25; } #wifi-loader svg.circle-outer circle.back { animation: circle-outer135 1.8s ease infinite 0.3s; } #wifi-loader svg.circle-outer circle.front { animation: circle-outer135 1.8s ease infinite 0.15s; } #wifi-loader svg.circle-middle { height: 60px; width: 60px; } #wifi-loader svg.circle-middle circle { stroke-dasharray: 42.5 127.5; } #wifi-loader svg.circle-middle circle.back { animation: circle-middle6123 1.8s ease infinite 0.25s; } #wifi-loader svg.circle-middle circle.front { animation: circle-middle6123 1.8s ease infinite 0.1s; } #wifi-loader svg.circle-inner { height: 34px; width: 34px; } #wifi-loader svg.circle-inner circle { stroke-dasharray: 22 66; } #wifi-loader svg.circle-inner circle.back { animation: circle-inner162 1.8s ease infinite 0.2s; } #wifi-loader svg.circle-inner circle.front { animation: circle-inner162 1.8s ease infinite 0.05s; } #wifi-loader .text { position: absolute; bottom: -40px; display: flex; justify-content: center; align-items: center; text-transform: lowercase; font-weight: 500; font-size: 14px; letter-spacing: 0.2px; } #wifi-loader .text::before, #wifi-loader .text::after { content: attr(data-text); } #wifi-loader .text::before { color: var(--text-color); } #wifi-loader .text::after { color: var(--front-color); animation: text-animation76 3.6s ease infinite; position: absolute; left: 0; } @keyframes circle-outer135 { 0% { stroke-dashoffset: 25; } 25% { stroke-dashoffset: 0; } 65% { stroke-dashoffset: 301; } 80% { stroke-dashoffset: 276; } 100% { stroke-dashoffset: 276; } } @keyframes circle-middle6123 { 0% { stroke-dashoffset: 17; } 25% { stroke-dashoffset: 0; } 65% { stroke-dashoffset: 204; } 80% { stroke-dashoffset: 187; } 100% { stroke-dashoffset: 187; } } @keyframes circle-inner162 { 0% { stroke-dashoffset: 9; } 25% { stroke-dashoffset: 0; } 65% { stroke-dashoffset: 106; } 80% { stroke-dashoffset: 97; } 100% { stroke-dashoffset: 97; } } @keyframes text-animation76 { 0% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0); } 100% { clip-path: inset(0 0 0 100%); } } {/hide}第一款配套html全局代码 <circle class="back" cx="43" cy="43" r="40"></circle> <circle class="front" cx="43" cy="43" r="40"></circle> <circle class="new" cx="43" cy="43" r="40"></circle> <circle class="back" cx="30" cy="30" r="27"></circle> <circle class="front" cx="30" cy="30" r="27"></circle> <circle class="back" cx="17" cy="17" r="14"></circle> <circle class="front" cx="17" cy="17" r="14"></circle> 第二款效果演示第二款css动态代码{hide}#wifi-loader { --background: #62abff; --front-color: #ef4d86; --front-color-in: #fbb216; --back-color: #c3c8de; --text-color: #414856; width: 64px; height: 64px; border-radius: 50px; position: relative; display: flex; justify-content: center; align-items: center; } #wifi-loader svg { position: absolute; display: flex; justify-content: center; align-items: center; } #wifi-loader svg circle { position: absolute; fill: none; stroke-width: 6px; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-100deg); transform-origin: center; } #wifi-loader svg circle.back { stroke: var(--back-color); } #wifi-loader svg circle.front { stroke: var(--front-color); } #wifi-loader svg.circle-outer { height: 86px; width: 86px; } #wifi-loader svg.circle-outer circle { stroke-dasharray: 62.75 188.25; } #wifi-loader svg.circle-outer circle.back { animation: circle-outer135 1.8s ease infinite 0.3s; } #wifi-loader svg.circle-outer circle.front { animation: circle-outer135 1.8s ease infinite 0.15s; } #wifi-loader svg.circle-middle { height: 60px; width: 60px; } #wifi-loader svg.circle-middle circle { stroke: var(--front-color-in); stroke-dasharray: 42.5 127.5; } #wifi-loader svg.circle-middle circle.back { animation: circle-middle6123 1.8s ease infinite 0.25s; } #wifi-loader svg.circle-middle circle.front { animation: circle-middle6123 1.8s ease infinite 0.1s; } #wifi-loader svg.circle-inner { height: 34px; width: 34px; } #wifi-loader svg.circle-inner circle { stroke-dasharray: 22 66; } #wifi-loader svg.circle-inner circle.back { animation: circle-inner162 1.8s ease infinite 0.2s; } #wifi-loader svg.circle-inner circle.front { animation: circle-inner162 1.8s ease infinite 0.05s; } #wifi-loader .text { position: absolute; bottom: -40px; display: flex; justify-content: center; align-items: center; text-transform: lowercase; font-weight: 500; font-size: 14px; letter-spacing: 0.2px; } #wifi-loader .text::before, #wifi-loader .text::after { content: attr(data-text); } #wifi-loader .text::before { color: var(--text-color); } #wifi-loader .text::after { color: var(--front-color-in); animation: text-animation76 3.6s ease infinite; position: absolute; left: 0; } @keyframes circle-outer135 { 0% { stroke-dashoffset: 25; } 25% { stroke-dashoffset: 0; } 65% { stroke-dashoffset: 301; } 80% { stroke-dashoffset: 276; } 100% { stroke-dashoffset: 276; } } @keyframes circle-middle6123 { 0% { stroke-dashoffset: 17; } 25% { stroke-dashoffset: 0; } 65% { stroke-dashoffset: 204; } 80% { stroke-dashoffset: 187; } 100% { stroke-dashoffset: 187; } } @keyframes circle-inner162 { 0% { stroke-dashoffset: 9; } 25% { stroke-dashoffset: 0; } 65% { stroke-dashoffset: 106; } 80% { stroke-dashoffset: 97; } 100% { stroke-dashoffset: 97; } } @keyframes text-animation76 { 0% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0); } 100% { clip-path: inset(0 0 0 100%); } } {/hide}第二款配套html代码 <circle r="40" cy="43" cx="43" class="back"></circle> <circle r="40" cy="43" cx="43" class="front"></circle> <circle r="40" cy="43" cx="43" class="new"></circle> <circle r="27" cy="30" cx="30" class="back"></circle> <circle r="27" cy="30" cx="30" class="front"></circle> 随着 IoT 设备越来越普及，如何有效地向用户传达设备的工作状态成为一个重要的考虑因素。WiFi 加载动画可以被应用于智能家电、穿戴式设备等产品的配套应用中，作为连接状态或数据同步过程的可视化表示。总之，WiFi 加载动画凭借其精致的设计和流畅的动画效果，适用于各种数字产品和服务中，既提升了用户体验，又增强了品牌的视觉表达。无论是在传统网站、移动应用还是新兴的物联网领域，这类动态加载特效都能找到合适的应用场景。