<!DOCTYPE html>
<html>

<head>
<title>酷炫的CSS3</title>
<meta charset="utf-8">
</head>
<style>
@keyframes ants {
to {
background-position: 100%;
}
}

.demo {
display: block;
margin: 200px auto;
width: 300px;
height: 200px;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;
animation: ants 12s linear infinite;
}
</style>
<body>
<div class="demo"></div>
</body>

</html>

静态效果图:

CSS3边框会动的信封

 


 
                    
            
                

相关文章:

  • 2021-08-17
  • 2021-12-08
  • 2021-12-08
  • 2021-10-25
  • 2022-02-01
  • 2022-12-23
  • 2021-06-03
  • 2022-02-07
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-13
  • 2022-01-07
  • 2021-12-21
相关资源
相似解决方案