CSS(层叠样式表)是网页设计中的必要技术之一,能够为HTML网页增加样式和布局,使其更加美观和易于阅读。而CSS加载特效代码则是在加载网页时,为页面添加动画效果,让用户体验更加出色。下面我们来看一些CSS加载特效代码。
.loading { height: 50px; width: 50px; border: 5px solid rgba(0, 0, 0, 0.2); border-radius: 50%; border-top-color: #3498db; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } }
这段代码能够创建一个圆形的加载图标,其外观会在1秒内旋转一周,一直重复该动画。使用时只需将相应的HTML元素赋予类名 “.loading” 即可。
.loader { display: inline-block; position: relative; width: 80px; height: 80px; } .loader div { position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: #fff; animation-timing-function: cubic-bezier(0, 1, 1, 0); } .loader div:nth-child(1) { left: 8px; animation: lds-ellipsis1 0.6s infinite; } .loader div:nth-child(2) { left: 8px; animation: lds-ellipsis2 0.6s infinite; } .loader div:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite; } .loader div:nth-child(4) { left: 56px; animation: lds-ellipsis3 0.6s infinite; } @keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } }
这段代码能够创建一个由四个圆点组成的加载动画。使用时将该代码块嵌入到HTML中,并为相应的HTML元素赋予类名 “.loader” 即可。
这些CSS加载特效代码能够使页面更加精彩,提升用户体验,是Web设计常用的范例之一。使用时应当根据需要进行定制化处理,以达到最佳的效果。