tofacebook.com -专业IT技术社区 【百家号】脸书百科,css中的视距perspective Web程序 - tofacebook.com-专业IT技术社区
74°

【百家号】脸书百科,css中的视距perspective Web程序

标签:动效   overflow   元素   query   blog   res   round   有一个   center   

概述

之前觉得2个效果很叼,一个是3D翻转效果,另一个是视差效果。今天好好的研究一下,把心得记录下来,供以后开发时参考,相信对其他人也有用。

3D翻转

3D翻转效果其实非常简单,其实就是perspective属性的一个运用。perspective属性就是视距的意思。下面是一个鼠标放上去图片就会翻转的小示例,看看就会了:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  div {
    margin: 200px 0 0 200px;
    width: 200px;
    height: 200px;
  }
  i {
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: 10px 10px 150px #5fbdff;
    transition: all 2s;
    -webkit-transform: perspective(800px);
    -ms-transform: perspective(800px);
    -o-transform: perspective(800px);
    transform: perspective(800px);
  }
  div:hover i {
    -webkit-transform: perspective(800px) rotateY(180deg);
    -ms-transform: perspective(800px) rotateY(180deg);
    -o-transform: perspective(800px) rotateY(180deg);
    transform: perspective(800px) rotateY(180deg);
  }
  </style>
</head>
<body>
  <div>
    <i></i>
  </div>
</body>
</html>

这里有一个更加好看的开门效果例子

视差效果

所谓的视差效果,就是在鼠标或滚轮进行移动的时候,多层次的背景进行不同程度的变换(有的是位移,有的是翻转等)。

这里有一个鼠标位移进行翻转视差的例子,主要是监听鼠标进入元素并移动的事件,检查鼠标在元素内部的位置,从而进行不同程度的翻转

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
  }

  body {
    color: white;
    font-family: sans-serif;
    font-size: 1.8em;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .content {
    margin: 1px;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  </style>
</head>
<body>
  <div class="wowpanel">
    <div class="content">move</div>
  </div>
  <div class="wowpanel">
    <div class="content">your</div>
  </div>
  <div class="wowpanel">
    <div class="content">cursor</div>
  </div>
  <div class="wowpanel">
    <div class="content">over</div>
  </div>
  <script>
    const ANGLE = 45;

    let wowpanels = document.querySelectorAll(".wowpanel");
    let colors = ['#4975FB', '#924DE6', '#EF5252', '#F59500'];

    wowpanels.forEach((element, i) => {
      floatable(element, colors[i]);
    });

    function floatable (panel, color) {
      let content = panel.querySelector(".content");
      content.style.backgroundColor = color;

      panel.addEventListener('mouseout', e => {
        content.style.transform = `perspective(300px)
                       rotateX(0deg)
                       rotateY(0deg)
                       rotateZ(0deg)`;
      });

      panel.addEventListener('mousemove', e => {
        let w = panel.clientWidth;
        let h = panel.clientHeight;
        let y = (e.offsetX - w * 0.5) / w * ANGLE;
        let x = (1 - (e.offsetY - h * 0.5)) / h * ANGLE;

        content.style.transform = `perspective(300px)
                       rotateX(${x}deg)
                       rotateY(${y}deg)`;
      });
    }
  </script>
</body>
</html>

类似地,我们也可以不用翻转,而是用位移。当鼠标向左移动的时候,图片向右移动;当鼠标向右移动的时候,图片向左移动;当鼠标向上移动的时候,图片向下移动等等,这样就能做出比较好看的位移视差效果了。

这里有2篇关于视差效果的文章,很有启发性:

视差滚动效果原理解析和效果实现
小tip: 纯CSS实现视差滚动效果

css中的视距perspective

标签:动效   overflow   元素   query   blog   res   round   有一个   center   

原文地址:https://www.cnblogs.com/yangzhou33/p/9375137.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: