从Codepen复制时，JS或CSS无法正常工作

时间：2019-07-02 10:18:33

标签： javascript html css

我一直在网上寻找优质的图像动画，但是发现这一点，但是当我下载复制所有html css和js以及笔设置中隐藏的css和js时，它在本地文件中根本不起作用。< / p>

https://codepen.io/anon/pen/MMGYwN

我尝试下载js和css并将其全部放入html文件中

index.html：

</html>
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/splitting@1.0.5/dist/splitting-cells.css">

</head>
<body>
<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1067" />
</div>

<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1061" />
</div>

<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1057" />
</div>


<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1052" />
</div>


<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1043" />
</div>


<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1055" />
</div>


<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1036" />
</div>


<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1037" />
</div>


<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1039" />
</div>
<script src="https://unpkg.com/splitting@1.0.5/dist/splitting.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

main.js：

console.clear();

Splitting({
  target: '.tiler',
  by: 'cells',
  rows: 3,
  columns: 3,
  image: true
}); //Image('.tiler-overlay', { rows: 3, cols: 3 });

style.css：

.tiler {
  display: inline-block;
  cursor: pointer;
  visibility: hidden;
  width: 33.3%;
  margin: auto;
}

.tiler img { 
  display: block;  
  margin: auto; 
  max-width: 100%;
  visibility: visible;
}

.tiler .cell-grid {
  background-position: center center;
  margin: auto;
  position: fixed;
  top: 1em;
  bottom: 1em;
  left: 1em;
  right: 1em;
  z-index: 10;

  max-width: 1000px;
  max-height: 600px;

  perspective: 30px;

  // &:before {
  //   content: '';
  //   display: block;
  //   visibility: visible;
  //   position: absolute;
  //   top: 0; right: 0; bottom: 0; left: 0;
  //   margin: auto;
  //   box-shadow: 0 1em 2em rgba(0,0,0,0.3);
  // }
}

.tiler .cell { 
  pointer-events: none;
  opacity: 0;

  transform: translateZ(-15px);
  transform-style: preserve-3d;

  transition-property: transform, opacity;
  transition-duration: 0.5s, 0.4s;
  transition-timing-function: cubic-bezier(.65,.01,.15,1.33);//, linear;

  /* The center character index */
  --center-x: calc((var(--col-total) - 1) / 2);
  --center-y: calc((var(--row-total) - 1) / 2);

  /* Offset from center, positive & negative */
  --offset-x: calc(var(--col-index) - var(--center-x));
  --offset-y: calc(var(--row-index) - var(--center-y));

  /* Absolute distance from center, only positive */
  --distance-x: calc(
    (var(--offset-x) * var(--offset-x)) / var(--center-x)
  );

  /* Absolute distance from center, only positive */
  --distance-y: calc(
    (var(--offset-y) * var(--offset-y)) / var(--center-y)
  );

  transition-delay: calc( 0.1s * var(--distance-y) + 0.1s * var(--distance-x) );
}

// .tiler { transition: z-index 0.3s linear; }

.tiler-overlay { z-index: 2; }
.tiler:hover {

  .cell { 
    // pointer-events: auto;
    transform: scale(1);
    opacity: 1; 

  }
}


html { height: 100%; display: flex; background: #323643; }
body { display: flex; flex-wrap: wrap; max-width: 800px; padding: 2em; margin: auto; }

3 个答案:

答案 0 :(得分：0)

这是相同的工作片段。您需要将Saas转换为CSS 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://unpkg.com/splitting@1.0.5/dist/splitting-cells.css">
  <script src="https://unpkg.com/splitting@1.0.5/dist/splitting.js"></script>
  <style>
 /*convert saas to css*/
    .tiler {
      display: inline-block;
      cursor: pointer;
      visibility: hidden;
      width: 33.3%;
      margin: auto;
    }
    
    .tiler img {
      display: block;
      margin: auto;
      max-width: 100%;
      visibility: visible;
    }
    
    .tiler .cell-grid {
      background-position: center center;
      margin: auto;
      position: fixed;
      top: 1em;
      bottom: 1em;
      left: 1em;
      right: 1em;
      z-index: 10;
      max-width: 1000px;
      max-height: 600px;
      -webkit-perspective: 30px;
      perspective: 30px;
    }
    
    .tiler .cell {
      pointer-events: none;
      opacity: 0;
      -webkit-transform: translateZ(-15px);
      transform: translateZ(-15px);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      transition-property: opacity, -webkit-transform;
      transition-property: transform, opacity;
      transition-property: transform, opacity, -webkit-transform;
      transition-duration: 0.5s, 0.4s;
      transition-timing-function: cubic-bezier(0.65, 0.01, 0.15, 1.33);
      /* The center character index */
      --center-x: calc((var(--col-total) - 1) / 2);
      --center-y: calc((var(--row-total) - 1) / 2);
      /* Offset from center, positive & negative */
      --offset-x: calc(var(--col-index) - var(--center-x));
      --offset-y: calc(var(--row-index) - var(--center-y));
      /* Absolute distance from center, only positive */
      --distance-x: calc((var(--offset-x) * var(--offset-x)) / var(--center-x));
      /* Absolute distance from center, only positive */
      --distance-y: calc((var(--offset-y) * var(--offset-y)) / var(--center-y));
      transition-delay: calc(0.1s * var(--distance-y) + 0.1s * var(--distance-x));
    }
    
    .tiler-overlay {
      z-index: 2;
    }
    
    .tiler:hover .cell {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
    }
    
    html {
      height: 100%;
      display: flex;
      background: #323643;
    }
    
    body {
      display: flex;
      flex-wrap: wrap;
      max-width: 800px;
      padding: 2em;
      margin: auto;
    }
  </style>
</head>

<body>
  <div class="tiler">
    <img src="https://picsum.photos/1000/600?image=1067" />
  </div>

  <div class="tiler">
    <img src="https://picsum.photos/1000/600?image=1061" />
  </div>

  <div class="tiler">
    <img src="https://picsum.photos/1000/600?image=1057" />
  </div>


  <div class="tiler">
    <img src="https://picsum.photos/1000/600?image=1052" />
  </div>


  <div class="tiler">
    <img src="https://picsum.photos/1000/600?image=1043" />
  </div>


  <div class="tiler">
    <img src="https://picsum.photos/1000/600?image=1055" />
  </div>


  <div class="tiler">
    <img src="https://picsum.photos/1000/600?image=1036" />
  </div>


  <div class="tiler">
    <img src="https://picsum.photos/1000/600?image=1037" />
  </div>


  <div class="tiler">
    <img src="https://picsum.photos/1000/600?image=1039" />
  </div>
  <script>
    console.clear();

    Splitting({
      target: '.tiler',
      by: 'cells',
      rows: 3,
      columns: 3,
      image: true
    }); //Image('.tiler-overlay', { rows: 3, cols: 3 });
  </script>

</body>

</html>

希望您使用正确的路径导入样式表

答案 1 :(得分：0)

您可以尝试这个.............. 

//<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
//<script src="./js/main.js"></script>
<script src="js/main.js"></script>

答案 2 :(得分：0)

首次添加

<!doctype html>

在html文件的第一行。 将style.css写入splitting-cells.css 

<link rel="stylesheet" type="text/css" href="https://unpkg.com/splitting@1.0.5/dist/splitting-cells.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

如果同一目录中的css文件夹无需使用./ 如果同一文件夹中的js文件夹也可以删除./

相关问题
最新问题