CSS3边框会动的信封 

<!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>

静态效果图：

 







            

            
posted @ 
 
SKILL·NULL 
阅读(848) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· .NET Core 中如何实现缓存的预热？
    

· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
    

· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
    

· 基于Microsoft.Extensions.AI核心库实现RAG应用
    

· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
    



    

    阅读排行：
    

 ·          TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
        

 ·          阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
        

 ·          【译】Visual Studio 中新的强大生产力特性
        

 ·          【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
        

 ·          10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
        



    

    



	

	

	
	

	

	

	





    

    
    








  

  
点击右上角即可分享

  微信分享提示

   
    
SQL AI 助手