CSS动画效果呼吸灯示例

最新推荐文章于 2023-07-12 16:33:27 发布

快看，我会发光

最新推荐文章于 2023-07-12 16:33:27 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签： css 呼吸灯 animation

本文链接：https://blog.csdn.net/qq_36132599/article/details/90780934

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

主要使用的css属性
属性：animation
使用语法如下：

animation: name duration timing-function delay iteration-count direction;

name：规定需要绑定到选择器的 keyframe 名称。（此项为自定义）
duration：规定完成动画所花费的时间，以秒或毫秒计。
timing-function：规定动画的速度曲线
timing-function的值有
在这里插入图片描述
delay：规定在动画开始之前的延迟。（动画在规定的延迟时间后开始）
iteration-count：规定动画应该播放的次数。（动画循环播放的次数）

direction：规定是否应该轮流反向播放动画。

属性：opacity （表示元素的透明度值在0 到1之间）
属性：border-radius（通过设置此值来变化元素的角为圆角）
属性：box-shadow (元素周围的阴影)
使用语法：box-shadow: 水平位移垂直位移模糊半径颜色
示例：
-moz-box-shadow:0px 0px 20px #00c1de;
-webkit-box-shadow:0px 0px 20px #00c1de;
box-shadow:0px 0px 20px #00c1de;
border-radius: 10px;

演示代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>呼吸灯示例</title>
	<style type="text/css">
		.light-background{
			width: 400px;
    		height: 200px;
   			margin: auto;
   			background-color: black;
   			position: relative;
		}
		.breath-light{
			width: 100px;
		    height: 14px;
		    position: absolute;
		    top: 90px;
		    left: 130px;
		    background-color: #00c1de;
    		opacity: 0.3;
    		-moz-box-shadow:0px 0px 20px #00c1de; 
    		-webkit-box-shadow:0px 0px 20px #00c1de; 
    		box-shadow:0px 0px 20px #00c1de;
    		border-radius: 10px;
		}
		.star-breath{
			opacity: 0.1;
			animation:breath 3s ease-in-out infinite;/* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
			-webkit-animation:breath 3s ease-in-out infinite; /*Safari and Chrome*/ 
		}
		@keyframes breath {
		    from { opacity: 0.3; }                          /* 动画开始时的不透明度 */
		    50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
		    to   { opacity: 0.3; }                          /* 动画结束时的不透明度 */    
		}
		 
		@-webkit-keyframes breath {
		    from { opacity: 0.3; }                          /* 动画开始时的不透明度 */
		    50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
		    to   { opacity: 0.3; }                          /* 动画结束时的不透明度 */
		}
	</style>
	</head>
	<body>
		<div class="light-background">
			<div class="breath-light star-breath">
			</div>
		</div>
	</body>
</html>

快看，我会发光

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS动画效果呼吸灯示例

主要使用的css属性属性：animation使用语法如下：animation: name duration timing-function delay iteration-count direction;name：规定需要绑定到选择器的 keyframe 名称。（此项为自定义）duration：规定完成动画所花费的时间，以秒或毫秒计。timing-function：规定动画的速度曲线...
复制链接

扫一扫