css动画提交按钮省略号加载动画

不念不忘少年蓝@ 2021-07-24 19:58 488阅读 0赞

做法:
    	给按钮的文字添加伪类,然后利用阴影是移动和原本元素大小相同的原理
    	在动画中依次添加多个水平方向移动的阴影

代码示例:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	<link rel="stylesheet" href="./index.css">
    	<style>
    		.box{ 
    			width: 400px;
    			height: 400px;
    			border: solid 1px blueviolet;
    			display: flex;
    			align-items: center;
    			justify-content: center;
    			margin: 100px auto;
    			perspective: 900px;
    		}
    		.box>div{ 
    			width: 200px;
    			height: 200px;
    			position: absolute;
    			display: flex;
    			justify-content: center;
    			align-items: center;
    			font-size: 4em;
    			background-color: #8A2BE2;
    		}
    		.box>div::after{ 
    			content: '';
    			width: 4px;
    			height: 4px;
    			animation-name:hd;
    			animation-duration: 1s;
    			animation-iteration-count: infinite;
    		}
    		@keyframes hd{ 
    			from{ 
    				box-shadow:none;
    			}
    			30%{ 
    				box-shadow: 4px 0 0 currentColor;
    			}
    			60%{ 
    				box-shadow: 4px 0 0 currentColor,12px 0 0 currentColor;
    			}
    			90%{ 
    				box-shadow: 4px 0 0 currentColor,12px 0 0 currentColor,20px 0 0 currentColor;
    			}
    		}
    
    		
    
    		
    		 
    	</style>
    	</head>
    	<body class='me'>
    		<div class='box'>
    			<div class='heart'>内容</div>
    			
    	
    
    		</div>
    		
    	</body>
    </html>

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200622100457279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200622100508630.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]: /images/20210724/a98a93f9b9f54a0a8154e31339146321.png