CSS 图像映射远距离翻转

浅浅的花香味﹌ 2024-04-20 08:47 100阅读 0赞

[CSS 图像映射 远距离翻转][CSS _]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0luSmF2YVdlVHJ1c3Q_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html>
    	<head>
    	  <style> 
    		div {
    			width: 750px;
    			height: 150px;
    			box-shadow: 3px 3px 5px gray;
    		}
    		ul {
    			list-style: none;
    		}
    		a {
    			text-decoration: none;
    		}
    		.hot {
    			width: 100px;
    			height: 50px;
    		}
    		a[href~="a"] .hot {
    			position: absolute;
    			top: 40px;
    			left: 170px;
    		}
    		a[href~="b"] .hot {
    			position: absolute;
    			top: 40px;
    			left: 325px;
    		}
    		a[href~="c"] .hot {
    			position: absolute;
    			top: 40px;
    			left: 475px;
    		}
    		a[href~="d"] .hot {
    			position: absolute;
    			top: 40px;
    			left: 620px;
    		}
    		a:hover .hot {
    			display: block;
    			border: 1px solid #fff;
    		}
    		a:hover .link {
    			color: red;
    			font-weight: bold;
    		}
    	  </style>
    	</head>
    	<body>
    		<div id="pic">
    			<img src="img.png" alt="test"></img>
    			<ul>
    				<li class="a">
                    	<a href="a">
                        	<span class="hot"></span>
    						<span class="link">»about</span>
                        </a>
    				</li>
    				<li class="b">
                    	<a href="b">
                        	<span class="hot"></span>
                            <span class="link">»live</span>
                        </a>
    				</li>
    				<li class="c">
                    	<a href="c">
                        	<span class="hot"></span>
                            <span class="link">»photos</span>
                        </a>
    				</li>
    				<li class="d">
    					<a href="d">
    						<span class="hot"></span>
    						<span class="link">»contact</span>
    					</a>
    				</li>
    			</ul>
    		</div>
    	</body>
    </html>

[CSS _]: https://blog.csdn.net/InJavaWeTrust/article/details/101063633
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0luSmF2YVdlVHJ1c3Q_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e027ceab6d9b48858fff3334b8d6f351.png