Question

我正在尝试将此http://codepen.io/digitalcraft/pen/yydpbB放入我的网站，但我无法弄清楚如何。我试图复制所有的html，css和java但不起作用，然后我尝试复制html的基本部分，没有 <h4>DC YOLO BOX v1</h4> 并通过修复括号来复制css但无所事事，为什么？

$(document).mousemove(rotateScene);

function rotateScene(e) {
	var horizontal = e.pageX / $(document).width();
	var vertical = e.pageY / $(document).height();	
	$('.panel').css({
		'-webkit-transform': 'rotateX(' + (10 - (vertical * 17)) + 'deg) rotateY(' + (-20 + (horizontal * 40)) + 'deg)'
	});
}

html{
	height:100%;
	min-height: 100%;
  overflow:hidden;
    }
    body{font: 14px/21px Monaco, sans-serif;
  color: #999;
  font-smoothing: antialiased;
  text-size-adjust: 100%;
  height:100%;
  min-height: 100%;
    }
    
    $color: cyan;
$spectrum: 15%;
$duration: 8s;
    
    .scene {
  width: 100%;
  height: 100%;
  perspective: 600;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;}
    
    .panel {
    width: 320px;
    height: 240px;
    background: #c5c5c5;
    box-shadow: 0 20px 30px -10px rgba(0,0,0,0.3);
    /*Start hardware acceleration*/
    transform: translate3d(0, 0, 0);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    animation: colorfader $duration ease-in-out infinite;}
    
    h1 {
      font-family: "Lato",sans-serif;
      font-size:60px;
      font-weight:300;
      color:rgba(255,255,255,0.6);
      text-align:center;
      margin-top:33%;
      }

<div class="scene">
  <div class="panel"><h1>YOLO</h1></div>  
</div>

Answer 1

您还没有使用图书馆提供jquery的链接尝试类似这样的内容

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

在头部

Answer 2

您需要添加html。

如果您希望它完全正常运行，您需要添加：

<!doctype html>
<html>
  <head>
    <title>Your Title</title>
    <style>
html{
    height:100%;
    min-height: 100%;
  overflow:hidden;
    }
    body{font: 14px/21px Monaco, sans-serif;
  color: #999;
  font-smoothing: antialiased;
  text-size-adjust: 100%;
  height:100%;
  min-height: 100%;
    }

    $color: cyan; /* <- You need to change from whatever preprocessor you're using to css*/ 
$spectrum: 15%; /* <- You need to change from whatever preprocessor you're using to css*/ 
$duration: 8s; /* <- You need to change from whatever preprocessor you're using to css*/ 

    .scene {
  width: 100%;
  height: 100%;
  perspective: 600;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;}

    .panel {
    width: 320px;
    height: 240px;
    background: #c5c5c5;
    box-shadow: 0 20px 30px -10px rgba(0,0,0,0.3);
    /*Start hardware acceleration*/
    transform: translate3d(0, 0, 0);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    animation: colorfader $duration ease-in-out infinite;} /* <- You need to change from whatever preprocessor you're using to css*/ 

    h1 {
      font-family: "Lato",sans-serif;
      font-size:60px;
      font-weight:300;
      color:rgba(255,255,255,0.6);
      text-align:center;
      margin-top:33%;
      }
    </style>
  </head>
  <body>
    <div class="scene">
      <div class="panel"><h1>YOLO</h1></div>
    </div>
  </body>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).mousemove(rotateScene);

function rotateScene(e) {
    var horizontal = e.pageX / $(document).width();
    var vertical = e.pageY / $(document).height();  
    $('.panel').css({
        '-webkit-transform': 'rotateX(' + (10 - (vertical * 17)) + 'deg) rotateY(' + (-20 + (horizontal * 40)) + 'deg)'
    });
}
</script>
</html>

您似乎使用预处理器而不是 css 。

head中的style标记包含 css ，而结束body标记正下方的jquery包含js。

jquery库正好位于你的js上方。原因是加载时间和性能。

无法复制笔

2 个答案: