今天找素材的时候,发现明天(1月5日)是宫崎骏爷爷80岁生日,祝宫崎骏爷爷福如东海,寿比南山。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>1.4</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="cont">
<h1>宫崎骏</h1>
<div class="demo one">
<img class="img" src="img/img1.png">
<div class="text">
<p class="title">幽灵公主</p>
</div>
</div>
<div class="demo two">
<img class="img" src="img/img2.png">
<div class="text">
<p class="title">千与千寻</p>
</div>
</div>
<div class="demo three">
<img class="img" src="img/img3.png">
<div class="text">
<p class="title">移动的城堡哈尔</p>
</div>
</div>
</div>
<script>
var cards = document.querySelector(".cont");
var images = document.querySelectorAll(".img");
var range = 40;
var calcValue = function calcValue(a, b) {
return(a / b * range - range / 2).toFixed(1);
};
var timeout = void 0;
document.addEventListener('mousemove', function(_ref) {
var x = _ref.x,
y = _ref.y;
if(timeout) {
window.cancelAnimationFrame(timeout);
}
timeout = window.requestAnimationFrame(function() {
var yValue = calcValue(y, window.innerHeight);
var xValue = calcValue(x, window.innerWidth);
console.log(xValue, yValue);
cards.style.transform = "rotateX(" + yValue + "deg) rotateY(" + xValue + "deg)";
[].forEach.call(images, function(image) {
image.style.transform = "translateX(" + -xValue + "px) translateY(" + yValue + "px)";
});
[].forEach.call(backgrounds, function(background) {
background.style.backgroundPosition = xValue * .45 + "px " + -yValue * .45 + "px";
});
});
}, false);
</script>
</body>
</html>
html, body {
height: 100%;
}
body {
align-items: center;
background: linear-gradient(to bottom, #ecb390, #949cdf);
display: flex;
justify-content: center;
overflow: hidden;
-webkit-perspective: 1800px;
perspective: 1800px;
margin: 0 20px;
}
h1 {
transform: translateZ(50px);
text-align: center;
}
.cont {
background: #fff;
border-radius: 15px;
box-shadow: 0px 10px 20px 20px rgba(255, 255, 255, 0.37);
display: inline-block;
padding: 30px 35px;
-webkit-perspective: 1800px;
perspective: 1800px;
text-align: left;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(11deg) rotateY(16.5deg);
transform: rotateX(11deg) rotateY(16.5deg);
min-width: 595px;
}
.demo {
border-radius: 15px;
box-shadow: 0px 0px 1px -0px rgba(0, 0, 0, 0.6);
display: inline-block;
height: 250px;
overflow: hidden;
-webkit-perspective: 1200px;
perspective: 1200px;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translatez(35px);
transform: translatez(35px);
transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
width: 175px;
text-align: center;
}
.demo:not(:last-child) {
margin-right: 30px;
}
.img {
position: relative;
height: 100%;
}
.one .img {
top: 14px;
right: -10px;
height: 110%;
}
.two .img {
top: 25px;
}
.three .img {
top: 5px;
left: -4px;
height: 110%;
}
.text {
align-items: center;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
bottom: 0;
display: flex;
flex-direction: column;
height: 70px;
justify-content: center;
position: absolute;
width: 100%;
z-index: 2;
}
.title {
color: #fff;
font-size: 18px;
font-weight: 700;
padding: 0 10px;
margin-bottom: 3px;
}