這篇文章主要為大家介紹了利用CSS3實現進度條的兩種姿勢，文中給出了詳細的示例代碼和圖文介紹，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。
效果圖如下：
#
##
第一種姿勢如下
#先上程式碼
/*对应CSS*/ #progress{ width: 300px; height: 30px; border:1px solid #ccc; border-radius: 15px; overflow: hidden; /*注意这里*/ box-shadow: 0 0 5px 0px #ddd inset; } #progress span { display: inline-block; width: 70%; height: 100%; background: linear-gradient(45deg, #2989d8 30%,#7db9e8 31%,#7db9e8 58%,#2989d8 59%); background-size: 60px 30px; text-align: center; color:#fff; animation:load 3s ease-in; } @keyframes load{ 0%{ width: 0%; } 100%{ width:70%; } }
linear-gradient語法
= linear-gradient([ [ | to ] ,]? [, ]+) = [left | right] || [top | bottom] = [ | ]?
栗子：
.test1{ background: linear-gradient(#EA2000, #E5A399); } .test2 { background: linear-gradient(45deg,#EA2000 20%,#E5632D 50%, #E5B12D 80%); } .test3 { background: linear-gradient(to top right, #000, #416796 50%, #B5CAE4); } .test4{ background: linear-gradient(45deg, #2989d8 30%,#7db9e8 31%,#7db9e8 58%,#2989d8 59%); }
動畫透過keyframes來實現，透過改變span的寬度來實現進度的效果，素不素hin簡單？ ！
第二個姿勢
.progress2{ width: 200px; height: 200px; margin: 100px auto; position: relative; border:1px solid #ddd; } .rect{ width: 100px; height: 200px; position: absolute; top:0; overflow: hidden; /*注意这里*/ } .right{ right:0; } .left{ left:0; }
.circle{ width: 160px; height: 160px; border:20px solid #ccc; border-radius: 50%; position: absolute; top:0; } .rightcircle{ border-top:20px solid rgb(41,137,216); border-right:20px solid rgb(41,137,216); right:0; }
class：rect中，將overflow設定成了hidden ，使得溢出的部分被遮蓋了，之後的效果實現與這個屬性關係也緊密相連。
.circle{ width: 160px; height: 160px; border:20px solid #ccc; border-radius: 50%; position: absolute; top:0; transform: rotate(45deg); /*注意这里*/ }
先给这右半边设置动画效果，即一开始让其旋转45度，然后旋转180度，由于这只是右半边，所以在50%的时候就应该旋转完毕，之后一直保持不变。
.rightcircle{ border-top:20px solid rgb(41,137,216); border-right:20px solid rgb(41,137,216); right:0; animation: load_right 5s linear infinite; } @keyframes load_right{ 0%{ transform: rotate(45deg); } 50%{ transform: rotate(225deg); } 100%{ transform: rotate(225deg); } }
这是没有在class rect中设置overflow：hidden的效果
这是在class rect中设置了overflow：hidden的效果
现在，我们就可以把左半边也凑上了，同理，动画效果一开始先旋转45度，调正，然后一直保持不变，到50%之后，再开始旋转180度。这样就与右半边衔接上了。
.leftcircle{ border-bottom:20px solid rgb(41,137,216); border-left:20px solid rgb(41,137,216); left:0; animation: load_left 5s linear infinite; } @keyframes load_left{ 0%{ transform: rotate(45deg); } 50%{ transform: rotate(45deg); } 100%{ transform: rotate(225deg); } }
这是整体的效果
可以调整角度或者调整颜色即可实现反向的效果。
我是调整了颜色就可以得到最开始的动画效果啦,下面是完整的代码
.progress2{ width: 200px; height: 200px; margin: 100px auto; position: relative; } .rect{ width: 100px; height: 200px; position: absolute; top:0; overflow: hidden; } .right{ right:0; } .left{ left:0; } .circle{ width: 160px; height: 160px; border:20px solid rgb(41,137,216); border-radius: 50%; position: absolute; top:0; transform: rotate(45deg); } .rightcircle{ border-top:20px solid #ccc; border-right:20px solid #ccc; right:0; animation: load_right 5s linear infinite; } .leftcircle{ border-bottom:20px solid #ccc; border-left:20px solid #ccc; left:0; animation: load_left 5s linear infinite; } @keyframes load_right{ 0%{ transform: rotate(45deg); } 50%{ transform: rotate(225deg); } 100%{ transform: rotate(225deg); } } @keyframes load_left{ 0%{ transform: rotate(45deg); } 50%{ transform: rotate(45deg); } 100%{ transform: rotate(225deg); } }
以上是利用CSS3實現進度條的兩方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
