存档2020-09-27

Css流动边框效果

作者 在 Css 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div></div>
	</body>
	<style>
		div{
  width: 190px;
  height: 190px;
  background: #00ff00;
  position: relative;
background-image: linear-gradient(to right, transparent, rgba(31, 149, 151, 0.43), transparent);
}
 
div:before,
div:after{
  position: absolute;
  content: "";
  left: -5px;
  right: -5px;
  top: -5px;
  bottom: -5px;
  border: 5px solid #FF33FF;
}
div:before{
  animation: move 5s linear infinite;
}
div:after{
  border-color: #FF33FF;
  animation: move 5s linear infinite normal -2.5s;
}
 
@keyframes move{
  0%,100%{
    clip: rect(0,200px,5px,0);
  }
  25%{
    clip: rect(0,200px,200px,195px);
  }
  50%{
    border-color: #00ff0088;
    clip: rect(195px,200px,200px,0);
  }
  75%{
    clip: rect(0,5px,200px,0px);
  }
}
	</style>
</html>

Css点闪烁

作者 在 Css 
.point,.point::before,.point::after{position: absolute;width: 12px; height: 12px; border-radius: 50%;content: ''; }
        .point::before{animation: scale 2s infinite; }
        .point::after{animation: scale2 2s infinite; }
        @keyframes scale{0%{ transform: scale(1); opacity:.9}100%{ transform: scale(6); opacity: 0;}}
        @keyframes scale2{0%{ transform: scale(1);opacity:.9;}100%{ transform: scale(12);opacity:0;}}
        

        .point,.point::before,.point::after{
        /* 设置颜色 */
        background-color: rgba(241, 34, 30, .9);}