css闪烁圆点

怼烎@ 2022-11-06 07:55 314阅读 0赞

<html>
    
    <head>
        <style>
            .bling-2 {
                width: 10px;
                height: 10px;
                border-radius: 100%;      
                filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#c800a0e9, endcolorstr=#c800a0e9);
                animation: blings 2s linear infinite;
                opacity: .5;
            }
            .bling-3 {
                width: 20px;
                height: 20px;
                border-radius: 100%;    
                filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f00a0e9, endcolorstr=#7f00a0e9);
                animation: blings-3 2s linear infinite;
                position: absolute;
                left: -5px;
                top: -5px;
            }
            .bling{
                position: relative;
            }
           
            @keyframes blings-3 {
                0% {
                    transform: scale(0);
                    opacity: 0
                }
                25% {
                    transform: scale(0);
                    opacity: 1
                }
                100% {
                    transform: scale(1.3);
                    opacity: 0
                }
            }
            @-moz-keyframes blings-3 {
                0% {
                    transform: scale(0);
                    opacity: 0
                }
                25% {
                    transform: scale(0);
                    opacity: 1
                }
                100% {
                    transform: scale(1.3);
                    opacity: 0
                }
            }
            @-webkit-keyframes blings-3 {
                0% {
                    transform: scale(0);
                    opacity: 0
                }
                25% {
                    transform: scale(0);
                    opacity: 1
                }
                100% {
                    transform: scale(1.3);
                    opacity: 0
                }
            }
            @-o-keyframes blings-3 {
                0% {
                    transform: scale(0);
                    opacity: 0
                }
                25% {
                    transform: scale(0);
                    opacity: 1
                }
                100% {
                    transform: scale(1.3);
                    opacity: 0
                }
            }
        </style>
    </head>
    
    <body>
    
    	<table>
    		<tr>
    			<td>
    				<div class="bling">
    					<div class="bling-2" style="background-color: rgba(255, 0, 0, 1);"></div>
    					<div class="bling-3" style="background-color: rgba(255, 0, 0, 1);"></div>
    				</div>
    			</td>
    			<td>
    				红
    			</td>
    		</tr>
    		<tr>
    			<td>
    				<div class="bling">
    					<div class="bling-2" style="background-color: rgba(255, 150, 0, 1);"></div>
    					<div class="bling-3" style="background-color: rgba(255, 150, 0, 1);"></div>
    				</div>
    			</td>
    			<td>
    				橙
    			</td>
    		</tr>
    		<tr>
    			<td>
    				<div class="bling">
    					<div class="bling-2" style="background-color: rgba(255, 255, 0, 1);"></div>
    					<div class="bling-3" style="background-color: rgba(255, 255, 0, 1);"></div>
    				</div>
    			</td>
    			<td>
    				黄
    			</td>
    		</tr>
    		<tr>
    			<td>
    				<div class="bling">
    					<div class="bling-2" style="background-color: rgba(0, 0, 255, 1);"></div>
    					<div class="bling-3" style="background-color: rgba(0, 0, 255, 1);"></div>
    				</div>
    			</td>
    			<td>
    				绿
    			</td>
    		</tr>
    	</table>
    	
        
    </body>
    
    </html>

![2021030818180869.png][]

![20210308181822136.png][]

[2021030818180869.png]: /images/20221023/874fced352e946bfad4e7b0ee0672805.png
[20210308181822136.png]: /images/20221023/6d5867d2c8964023af3a96a5d039ad21.png