css幽灵按钮

最新推荐文章于 2024-11-20 10:04:26 发布

原创最新推荐文章于 2024-11-20 10:04:26 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css幽灵按钮

html+css 专栏收录该内容

29 篇文章

订阅专栏

博客主要展示了CSS幽灵按钮相关代码，聚焦于信息技术领域中前端开发的CSS应用，为开发者提供了关于幽灵按钮的代码参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        *{ margin:0;
        padding:0; }
        	.wrap{
        		height: 471px;
        		width: 1330px;
        		
        		margin:100px auto;
        	}
        	body{ background:#000; }
        	.img{
        		list-style:none;
        		display:flex;/*弹性盒子*/
        		flex-wrap:wrap;/*换行显示*/
        		justify-content:space-around;/*从左到右平分*/
        		align-items:center;/*从上到下平分*/
        		width:100%;
        		height: 100%;

        	}
        	.img li{ 
        	width: 418px;
            height: 213px;
            background:url('index.jpg') no-repeat 0 13px/418px 213px;
            transition: 0.7s;
            position:relative;
        	 }
        	 .img li:nth-of-type(2){
        	 	background-image:url('index.jpg');
        	 }

        	 .img li:hover{
        	 	background-position:0px;
        	 }
        	 svg{
        	 	height: 213px;
        	 	width: 428px;
        	 	position:absolute;
        	 }
        	 polyline{
        	 	stroke:#a57c47;
        	 	fill:none;/*无填充  只显示边框*/
        	 	stroke-width:2px;/*粗细*/
        	 	stroke-dasharray:1180;/*线段长度*/
        	 	stroke-dashoffset:1180;/*线段未绘制长度*/
        	 	transition:1s;

        	 }
        	 .img li:hover polyline{
        	 	stroke-dashoffset:0;
        	 }
        </style>
    </head>
    <body>
    	<div class="wrap">
    		<ul class="img">
    			<li>
    				<svg>
    					<polyline points='9,9 409,9 409,199 9,199 9,9'/>
    				</svg>
    			</li>
    			<li>
    				<svg>
    					<polyline points='9,9 409,9 409,199 9,199 9,9'/>
    				</svg>
    			</li>
    			<li>
    				<svg>
    					<polyline points='9,9 409,9 409,199 9,199 9,9'/>
    				</svg>
    			</li>
    			<li>
    				<svg>
    					<polyline points='9,9 409,9 409,199 9,199 9,9'/>
    				</svg>
    			</li>
    			<li>
    				<svg>
    					<polyline points='9,9 409,9 409,199 9,199 9,9'/>
    				</svg>
    			</li>
    			<li>
    				<svg>
    					<polyline points='9,9 409,9 409,199 9,199 9,9'/>
    				</svg>
    			</li>
    		</ul>
    	</div>
    </body>
</html>