css发光动画

最新推荐文章于 2024-04-26 17:50:52 发布

付月半子

最新推荐文章于 2024-04-26 17:50:52 发布

阅读量609

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_34169240/article/details/102368277

版权

css 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
 
<head>
<meta charset="UTF-8">
    <title>横向滑动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
     .Twinkle {
	  animation: mytwinkle 1s infinite;
	  -moz-animation: mytwinkle 1s infinite;
	  -webkit-animation: mytwinkle 1s infinite;
	  -o-animation: mytwinkle 1s infinite;
	}
	
	@keyframes mytwinkle
	{
	0% {box-shadow:0 0 5px 0px #FF4500;}
	25% {box-shadow:0 0 15px 2px #FF4500;}
	50% {box-shadow:0 0 25px 10px #FF4500;}
	75% {box-shadow:0 0 15px 2px #FF4500;}
	100% {box-shadow:0 0 5px 0px #FF4500;}
	}
	
	@-moz-keyframes mytwinkle /* Firefox */
	{
	0% {box-shadow:0 0 5px 0px #FF4500;}
	25% {box-shadow:0 0 15px 2px #FF4500;}
	50% {box-shadow:0 0 25px 10px #FF4500;}
	75% {box-shadow:0 0 15px 2px #FF4500;}
	100% {box-shadow:0 0 5px 0px #FF4500;}
	}
	
	
	@-webkit-keyframes mytwinkle /* Safari and Chrome */
	{
	0% {box-shadow:0 0 5px 0px #FF4500;}
	25% {box-shadow:0 0 15px 2px #FF4500;}
	50% {box-shadow:0 0 25px 10px #FF4500;}
	75% {box-shadow:0 0 15px 2px #FF4500;}
	100% {box-shadow:0 0 5px 0px #FF4500;}
	}
	
	@-o-keyframes mytwinkle /* Opera */
	{
	0% {box-shadow:0 0 5px 0px #FF4500;}
	25% {box-shadow:0 0 15px 2px #FF4500;}
	50% {box-shadow:0 0 25px 10px #FF4500;}
	75% {box-shadow:0 0 15px 2px #FF4500;}
	100% {box-shadow:0 0 5px 0px #FF4500;}
	} 
	</style>
</head>
<body>
<div class="Twinkle" style="width: 200px;">
 123
</div>

</body>
</html>

<!DOCTYPE html>
<html>
 
<head>
<meta charset="UTF-8">
    <title>横向滑动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
	.radius{
    width: 100px;
    height: 100px;
    margin: 100px auto;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background-color: red;
    position: relative;
}
.animate-radius{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    border-radius: 50%;
    background-color: #ff8533;
    animation:radius 1.5s ease-out infinite forwards;
    -webkit-animation: radius 1.5s ease-out infinite forwards;
    -moz-animation:radius 1.5s ease-out infinite forwards;
    -ms-animation:radius 1.5s ease-out infinite forwards;
}
@keyframes radius {
    0%{  transform: scale(1,1);
        -webkit-transform:scale(1,1) ;
        -moz-transform:scale(1,1) ;
        -ms-transform:scale(1,1) ;
        opacity: 0.6;
        }
    50%{
        transform: scale(1.4,1.4);
        -webkit-transform:scale(1.4,1.4) ;
        -moz-transform:scale(1.4,1.4) ;
        -ms-transform:scale(1.4,1.4) ;
        opacity: 0;
    }
}
@-webkit-keyframes radius {
    0%{
        transform: scale(1,1);
        -webkit-transform:scale(1,1) ;
        -moz-transform:scale(1,1) ;
        -ms-transform:scale(1,1) ;
        opacity: 0.6;
    }
    100%{
        transform: scale(1.4,1.4);
        -webkit-transform:scale(1.4,1.4) ;
        -moz-transform:scale(1.4,1.4) ;
        -ms-transform:scale(1.4,1.4) ;
        opacity: 0;
    }
}
@-moz-keyframes radius {
    0%{  transform: scale(1,1);
        -webkit-transform:scale(1,1) ;
        -moz-transform:scale(1,1) ;
        -ms-transform:scale(1,1) ;
        opacity: 0.6;
    }
    50%{
        transform: scale(1.4,1.4);
        -webkit-transform:scale(1.4,1.4) ;
        -moz-transform:scale(1.4,1.4) ;
        -ms-transform:scale(1.4,1.4) ;
        opacity: 0;
    }
}
@-ms-keyframes radius {
    0%{  transform: scale(1,1);
        -webkit-transform:scale(1,1) ;
        -moz-transform:scale(1,1) ;
        -ms-transform:scale(1,1) ;
        opacity: 0.6;
    }
    50%{
        transform: scale(1.4,1.4);
        -webkit-transform:scale(1.4,1.4) ;
        -moz-transform:scale(1.4,1.4) ;
        -ms-transform:scale(1.4,1.4) ;
        opacity: 0;
    }
}

    </style>
</head>
<body>
<div class="radius">
    <span class="animate-radius"></span>
    888
</div>
</body>
</html>