css闪烁圆点

最新推荐文章于 2024-09-03 15:48:07 发布

大风起曦云飞扬

最新推荐文章于 2024-09-03 15:48:07 发布

阅读量1k

点赞数

分类专栏：前端 css js

本文链接：https://blog.csdn.net/cndn20120225/article/details/114542147

版权

css 同时被 3 个专栏收录

11 篇文章

订阅专栏

9 篇文章

订阅专栏

前端

2 篇文章

订阅专栏

这段HTML代码展示了如何使用CSS创建动态效果。通过`@keyframes`定义动画，配合`filter`属性和`border-radius`，实现了不同颜色圆点的缩放和透明度变化，用于展示红、橙、黄、绿四种颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>