CSS之animation提示灯闪烁动态效果最简单使用解析附代码

最新推荐文章于 2024-03-23 01:03:32 发布

置顶 beliveぃmyself

最新推荐文章于 2024-03-23 01:03:32 发布

阅读量4.1k

点赞数 2

分类专栏： css3 文章标签：前端 css html css3

本文链接：https://blog.csdn.net/h__z__q/article/details/121494252

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

主要用途：

H5消息角标闪烁。

思路分析解释：

图标角标不可能是一个，多个那么选择器必然用class。动画使用必不可少

选择器（class）解释：

class选择器：用于描述一组元素的样式，html元素通过class属性来设置class选择器，可以用于多个html原色，一个元素可以有多个class选择器，以“.”点符号来定义。

什么是css动画：

动画使元素逐渐从一种样式变为另外一种样式，可以随意更改任意数量的css属性，使用css动画，必须首先为动画指定关键帧，关键帧包含元素在特定时间所拥有的样式。

如何实现：

1.首先定义一个div给div设置一个class

<div class="flashing"></div>

2.定义动画规则（@keyframes） from从某个属性to变为某个属性当然也可以使用0%{}20%{}30%{}。。。。。。这种形式

@keyframes hzfirst {
	from {
		background-color: #F40002
	}
	to {
		background-color: rgba(51, 79, 247, 0.46)
	}
}

3.将动画绑定到元素上adimation属性使用，这里可以控制动画次数animation-iteration-count: 60;我这里定义的60次过后恢复原属性,简单定义一点属性使用时自己把样式加图标左上角或左下角。

.flashing{
     display:block;
     width: 100px;
     height: 100px;
     /*设置圆角*/
     border-radius:50px;
     /*默认背景颜色*/
     background-color: red;
     /*动画元素名-动画整个过程的时间*/
     animation: hzfirst 2s;
     /*动画次数*/
     animation-iteration-count: 60;
}

4.最终实现图标闪烁代码

<!DOCTYPE html>
<html>
<head>
<style>
    @keyframes hzfirst {
	    from {
		    background-color: #F40002
	    }
    	to {
		    background-color: rgba(51, 79, 247, 0.46)
	    }
    }
   
    /*@keyframes hzfirst {
    	0% {
		    background-color: #F40002
    	}
    	100% {
		    background-color: rgba(51, 79, 247, 0.46)
	    }
    }
    */
   .flashing{
         display:block;
         width: 100px;
         height: 100px;
         /*设置圆角*/
         border-radis:50px;
         /*默认背景颜色*/
         background-color: red;
         /*动画元素名-动画整个过程的时间*/
         animation: hzfirst 2s;
         /*动画次数*/
         animation-iteration-count: 60;
    }
</style>
</head>
<body>
     <div class="flashing"></div>
</body>
</html>