CSS3实现光感圆圈动画效果

2017年07月26日 22:45:19益点益滴4106

CSS3实现光感圆圈动画效果全部代码

Markup

<!DOCTYPE html>    
<html >    
<head>    
<meta charset="UTF-8">    
<title>CSS3实现光感圆圈动画效果</title>    
<style>
body {
  background: #111;
}

.halo {
  transition: .4s all;
}
.halo.input {
  width: 100px;
  height: 100px;
}
.halo.input:before {
  width: 100px;
  height: 100px;
}

.ring-1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}
.ring-1:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate 2s infinite alternate;
}
.ring-2:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-3 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate-2 4s infinite alternate;
}
.ring-3:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-4 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate 7s infinite alternate-reverse;
}
.ring-4:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-5 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(255, 0, 255, 0.3);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate-2 5s infinite alternate;
}
.ring-5:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(255, 0, 255, 0.3);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-6 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate 2s infinite alternate-reverse;
}
.ring-6:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-7 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate-2 5s infinite alternate;
}
.ring-7:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-8 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(255, 0, 255, 0.3);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate 10s infinite alternate-reverse;
}
.ring-8:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(255, 0, 255, 0.3);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(360deg) scaleX(1);
  }
  100% {
    -webkit-transform: rotate(0deg) scaleX(1.1);
  }
}
@-webkit-keyframes rotate-2 {
  0% {
    -webkit-transform: rotate(360deg) scaleX(0.9);
  }
  100% {
    -webkit-transform: rotate(90deg) scaleX(1.1);
  }
}
</style>    
</head>    
<body>    
<div class="halo ring-1"></div>    
<div class="halo ring-2"></div>    
<div class="halo ring-3"></div>    
<div class="halo ring-4"></div>    
<div class="halo ring-5"></div>    
<div class="halo ring-6"></div>    
<div class="halo ring-7"></div>    
<div class="halo ring-8"></div>    
</body>    
</html>

本段代码来自 https://yiwuku.com/a/545.html

<!DOCTYPE html>    
<html >    
<head>    
<meta charset="UTF-8">    
<title>CSS3实现光感圆圈动画效果</title>    
<style>
body {
  background: #111;
}

.halo {
  transition: .4s all;
}
.halo.input {
  width: 100px;
  height: 100px;
}
.halo.input:before {
  width: 100px;
  height: 100px;
}

.ring-1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}
.ring-1:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate 2s infinite alternate;
}
.ring-2:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-3 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate-2 4s infinite alternate;
}
.ring-3:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-4 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate 7s infinite alternate-reverse;
}
.ring-4:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-5 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(255, 0, 255, 0.3);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate-2 5s infinite alternate;
}
.ring-5:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(255, 0, 255, 0.3);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-6 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate 2s infinite alternate-reverse;
}
.ring-6:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-7 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate-2 5s infinite alternate;
}
.ring-7:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-8 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(255, 0, 255, 0.3);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate 10s infinite alternate-reverse;
}
.ring-8:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(255, 0, 255, 0.3);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(360deg) scaleX(1);
  }
  100% {
    -webkit-transform: rotate(0deg) scaleX(1.1);
  }
}
@-webkit-keyframes rotate-2 {
  0% {
    -webkit-transform: rotate(360deg) scaleX(0.9);
  }
  100% {
    -webkit-transform: rotate(90deg) scaleX(1.1);
  }
}
</style>    
</head>    
<body>    
<div class="halo ring-1"></div>    
<div class="halo ring-2"></div>    
<div class="halo ring-3"></div>    
<div class="halo ring-4"></div>    
<div class="halo ring-5"></div>    
<div class="halo ring-6"></div>    
<div class="halo ring-7"></div>    
<div class="halo ring-8"></div>    
</body>    
</html>