前端特效学习1

用户7162790

发布于 2022-03-23 14:32:08

5870

发布于 2022-03-23 14:32:08

文章被收录于专栏：森屿暖树

前言

今天找素材的时候，发现明天（1月5日）是宫崎骏爷爷80岁生日，祝宫崎骏爷爷福如东海，寿比南山。

效果图

HTML代码

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

css代码

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;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css