纯静态CSS+JS动态闪卡效果

最新推荐文章于 2024-07-25 15:36:30 发布

曾小乙

最新推荐文章于 2024-07-25 15:36:30 发布

阅读量420

点赞数 6

本文链接：https://blog.csdn.net/weixin_44301780/article/details/135859277

版权

先看效果：

上代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<div id="element">
    	<div id="g-img"></div>
	</div>
</body>
</html>
<style type="text/css">
	// @property --per {
	//   syntax: '<percentage>';
	//   inherits: false;
	//   initial-value: 30%;
	// }
	body {
	    width: 100vw;
	    height: 100vh;
	    display: flex;
	    transform-style: preserve-3d;
	    perspective: 500px;
	    cursor: pointer;
	    background: #000;
	}

	#element {
	    margin: auto;
	    width: 250px;
	    height: 400px;
	    background: #000;
	    border-radius: 10px;
	    transform-style: preserve-3d;
	    transition: all .1s;
	    // background: linear-gradient(45deg, black, deeppink, #6006ff);
	}

	#g-img {
	    position: relative;
	    width: 100%;
	    height: 100%;
	    background: 
	        url('C:/Users/Administrator/Pictures/宇宙之塔.jpg');
	    background-size: cover;
	    background-position: center;
	    border-radius: 10px;
	    filter: brightness(1.2);
	    
	    &::after {
	        content: "";
	        display: none;
	        position: absolute;
	        inset: 0;
	        border-radius: 10px;
	        mix-blend-mode: color-dodge;
	    }
	    
	    &::before {
	        content: "";
	        display: none;
	        position: absolute;
	        inset: 0;
	        border-radius: 10px;
	        background: 
	            linear-gradient(120deg, 
	                transparent 0%, 
	                #06e8ff var(--per), 
	                #ffab2e calc(var(--per) + 25%), 
	                #ff2212 calc(var(--per) + 50%),
	                transparent 100%);
	        mix-blend-mode: overlay;
	    }
	    
	    &:hover::after,
	    &:hover::before {
	        display: block;
	    }
	}
</style>
<script type="text/javascript">
	const multiple = 20;
	const mouseOverContainer = document.getElementById("g-img");
	const element = document.getElementById("element");
	const img = document.getElementById("g-img");

	function transformElement(x, y) {
	    let box = element.getBoundingClientRect();
	    const calcX = -(y - box.y - box.height / 2) / multiple;
	    const calcY = (x - box.x - box.width / 2) / multiple;
	    const percentage = parseInt((x - box.x) / box.width * 1000) / 10;
	    
	    element.style.transform = "rotateX(" + calcX + "deg) " + "rotateY(" + calcY + "deg)";
	    img.style = `--per: ${percentage}%`;
	}

	mouseOverContainer.addEventListener("mousemove", (e) => {
	    window.requestAnimationFrame(function () {
	        transformElement(e.clientX, e.clientY);
	    });
	});

	mouseOverContainer.addEventListener("mouseleave", (e) => {
	    window.requestAnimationFrame(function () {
	        element.style.transform = "rotateX(0) rotateY(0)";
	    });
	});
</script>

谢谢观看！！