您现在的位置是：网站首页> 编程资料编程资料

CSS3 实现的加载动画纯CSS3进度条渐变加载特效代码纯css3巫师法术加载特效代码一组纯css3加载图标动画特效代码大全纯css3加载loading发光变色动画特效代码纯css3制作的发光loading图标加载动画特效源码CSS3实现渐变的loading加载进度条特效代码jQuery+CSS3实现的双层圆环形进度条加载动画特效CSS3+SVG实现的电影摄影机loading加载动画效果源码纯CSS3 实现的速度仪表盘加载动画效果源码CSS3实现的彩色粗线条爱心形状加载动画特效源码

2023-10-17 543人已围观

简介 这篇文章主要介绍了CSS3 实现的加载动画的示例代码，帮助大家更好的理解和使用CSS3，感兴趣的朋友可以了解下

实现效果

实现代码

JB51.net

CSS3

 @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotate2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); border-top-color: rgba(0, 0, 0, 0.5); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); border-top-color: rgba(0, 0, 255, 0.5); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); border-top-color: rgba(0, 0, 0, 0.5); } } @keyframes rotate2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); border-top-color: rgba(0, 0, 0, 0.5); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); border-top-color: rgba(0, 0, 255, 0.5); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); border-top-color: rgba(0, 0, 0, 0.5); } } * { box-sizing: border-box; } body { background: #f9f9f9; padding-bottom: 100px; } h1, h3 { display: block; margin: 0px auto; text-align: center; font-family: 'Tahoma'; font-weight: lighter; color: rgba(0, 0, 0, 0.5); letter-spacing: 1.5px; } h1 { margin: 50px auto; } .loader { position: relative; margin: 75px auto; width: 150px; height: 150px; display: block; overflow: hidden; } .loader div { height: 100%; } /* loader 1 */ .loader1, .loader1 div { border-radius: 50%; padding: 8px; border: 2px solid transparent; -webkit-animation: rotate linear 3.5s infinite; animation: rotate linear 3.5s infinite; border-top-color: rgba(0, 0, 0, 0.5); border-bottom-color: rgba(0, 0, 255, 0.5); } /*loader 2 */ .loader2, .loader2 div { border-radius: 50%; padding: 8px; border: 2px solid transparent; -webkit-animation: rotate linear 3.5s infinite; animation: rotate linear 3.5s infinite; border-top-color: rgba(0, 0, 255, 0.5); border-left-color: rgba(0, 0, 0, 0.5); border-right-color: rgba(0, 0, 0, 0.5); } /*loader 3 */ .loader3, .loader3 div { border-radius: 50%; padding: 8px; border: 2px solid transparent; -webkit-animation: rotate linear 3.5s infinite; animation: rotate linear 3.5s infinite; border-top-color: rgba(0, 0, 0, 0.5); border-left-color: rgba(0, 0, 255, 0.5); -webkit-animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88); animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88); -webkit-animation-duration: 3s; animation-duration: 3s; } /* loader 4 */ .loader4, .loader4 div { border-radius: 50%; padding: 8px; border: 2px solid transparent; -webkit-animation: rotate linear 3.5s infinite; animation: rotate linear 3.5s infinite; border-radius: 50%; padding: 4px; -webkit-animation: rotate2 4s infinite linear; animation: rotate2 4s infinite linear; } div:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } .loader, .loader * { will-change: transform; }

以上就是CSS3 实现的加载动画的详细内容，更多关于CSS3 加载动画的资料请关注其它相关文章！

上一篇：子元素margin-top导致父元素移动的问题解决css中子元素设置margin-top为什么影响了父元素CSS 同级元素position:fixed和margin-top共同使用的问题margin-top塌陷问题的现象与解决的具体方法margin-top负值解决label 文字与input 垂直居中对齐问题父元素与子元素之间的margin-top问题(css hack)

下一篇：CSS实现背景图片屏幕自适应的实现css display table 自适应高度、宽度问题的解决详解CSS多种三列自适应布局实现css3实现自适应浏览器图片布局特效CSS实现表格首行首列固定和自适应窗口的实例代码css实现六种自适应两栏布局方式CSS将img图片填满父容器div并自适应容器大小css实现两栏布局，左侧固定宽，右侧自适应的多种方法

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网