001.png
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.bling-1 {
width: 15px;
height: 15px;
border-radius: 100%;
background-color: rgb(0, 160, 233);
animation: blings-1 2s linear infinite;
position: absolute;
left: 5px;
top: 5px;
z-index: 3;
}
.bling-2 {
width: 25px;
height: 25px;
border-radius: 100%;
background-color: rgba(0, 160, 233, .8);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#c800a0e9, endcolorstr=#c800a0e9);
animation: blings-2 2s linear infinite;
opacity: .5;
}
.bling-3 {
width: 35px;
height: 35px;
border-radius: 100%;
background-color: rgba(0, 160, 233, .5);
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-1 {
0% {
transform: scale(0);
opacity: 0
}
25% {
transform: scale(0);
opacity: 1
}
100% {
transform: scale(1);
opacity: 0
}
}
@-moz-keyframes blings-1 {
0% {
transform: scale(0);
opacity: 0
}
25% {
transform: scale(0);
opacity: 1
}
100% {
transform: scale(1);
opacity: 0
}
}
@-webkit-keyframes blings-1 {
0% {
transform: scale(0);
opacity: 0
}
25% {
transform: scale(0);
opacity: 1
}
100% {
transform: scale(1);
opacity: 0
}
}
@-o-keyframes blings-1 {
0% {
transform: scale(0);
opacity: 0
}
25% {
transform: scale(0);
opacity: 1
}
100% {
transform: scale(1);
opacity: 0
}
}
@keyframes blings-2 {
0% {
transform: scale(0);
opacity: 0
}
25% {
transform: scale(0);
opacity: 1
}
100% {
transform: scale(1.2);
opacity: 0
}
}
@-moz-keyframes blings-2 {
0% {
transform: scale(0);
opacity: 0
}
25% {
transform: scale(0);
opacity: 1
}
100% {
transform: scale(1.2);
opacity: 0
}
}
@-webkit-keyframes blings-2 {
0% {
transform: scale(0);
opacity: 0
}
25% {
transform: scale(0);
opacity: 1
}
100% {
transform: scale(1.2);
opacity: 0
}
}
@-o-keyframes blings-2 {
0% {
transform: scale(0);
opacity: 0
}
25% {
transform: scale(0);
opacity: 1
}
100% {
transform: scale(1.2);
opacity: 0
}
}
@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>
<div class="bling">
<div class="bling-1"></div>
<div class="bling-2"></div>
<div class="bling-3"></div>
</div>
</body>
</html>
网友评论