CSS实现边框动画效果

 

 

实现方法

 【html】

<!DOCTYPE html><html><head><title>【每日一练】34—CSS实现边框动画效果</title></head><body>  <div class="box">    <h2>01</h2>  </div>  <div class="box">    <h2>02</h2>  </div>  <div class="box">    <h2>03</h2>  </div>  <div class="box">    <h2>04</h2>  </div></body></html>

 

 

【css】

*{  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: 'Poppins', sans-serif;}body{  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;  background: #0e1538;}.box{  position: relative;  width: 300px;  height: 400px;  display: flex;  justify-content: center;  align-items: center;  background: rgba(0,0,0,0.5);  overflow: hidden;  border-radius: 20px;  margin-left:40px;}.box:before{  content: '';  position: absolute;  width: 150px;  height: 125%;  background: linear-gradient(315deg,#00ccff,#d400d4);  animation: animate 4s linear infinite}@keyframes animate {  0%  {    transform: rotate(0deg);  }  100%  {    transform: rotate(360deg);  }}.box:after{  content: '';  position: absolute;  inset : 6px;  background: #0e1538;  border-radius: 15px;  z-index: 2;}h2{  position: relative;  z-index: 2;  font-size: 10em;  color: #fff;  z-index: 4;}
posted @ 2022-07-26 09:11  桂长江  阅读(1234)  评论(0)    收藏  举报