码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift

  • 通过使用css样式来做到2D动画的进度条加载的效果

    目录

            首先：第一步：老规矩，上框架

            第三步：然后的话我们加一些css样式

             第四步，接下来我们做出圆角的效果，这里要用到border-radius

             第五步：接下来我们就要让他动起来

            第六步：加过渡

            最后我们加一个溢出隐藏，防止宽设多了

    Video_2022-07-20_171724

            我们先看一下动画效果

            大家可以看得见我把鼠标一放到进度条上，进度条就开始动了，这和我们平时看电视时的进度条效果很像，接下来就带大家制作，并进行优化

            首先：第一步：老规矩，上框架

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 	body>
    9. html>

            第二步：然后我们写两个div

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<div id="bodys">
    9. 			<div class="box">div>
    10. 		div>
    11. 	body>
    12. html>

            第三步：然后的话我们加一些css样式

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			* {
    8. 				margin: 0;
    9. 				padding: 0;
    10. 			}
    11.  
    12. 			#bodys {
    13. 				width: 300px;
    14. 				height: 30px;
    15. 				border: 1px solid red;	
    16. 			}
    17.  
    18. 			.box {
    19. 				background: #12c2e9;
    20. 				background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
    21. 				background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
    22.  
    23. 				width: 100px;
    24. 				height: 30px;
    25. 			}
    26.  
    27. 		style>
    28. 	head>
    29. 	<body>
    30.  
    31. 		<div id="bodys">
    32. 			<div class="box">div>
    33. 		div>
    34.  
    35. 	body>
    36. html>
    37. 


    
    
    
    

      
    
      
        
      
            
      
                
      
                    Copyright © 2022 侵权请联系2656653265@qq.com   
                    京ICP备2022015340号-1
                
      
                
      
                    正则表达式工具
                    cron表达式工具
                    密码生成工具
                
      
                
      
                    
                    
      京公网安备 11010502049817号