Question

我无法实现我在codepen上找到的此页面转换效果。我已将所有外部资源和所有内容联系起来，但由于某种原因它无法正常工作。它实际上在JSFiddle中工作，但不在我的代码编辑器中，它是括号。

＆＃13;

/* JS scripts are added see github repo for more
https://github.com/fralec/ElegantJS */
 
$('#stay').elegant({
    clickNextToClose: true,
    newTab: true,
    facebook: {
        id: 'alec.vonbarnekow'
    },
    twitter: {
        id: 'fralec_'
    },
    github: {
        id: 'fralec'
    },
    website: {
        id: 'https://fralec.com'
    },
    instagram: {
        id: 'fralec__'
    }
});

＆＃13;

body {
  background-color: black;
  font-family: "Source Sans Pro", sans-serif;
  color: #ccc;
}
 
canvas {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
 
h3 {
  position: absolute;
  font-size: 90px;
  font-weight: 100;
  color: white;
  margin-top: 70px;
  margin-left: 80px;
}
 
img {
    position: fixed;
    margin-top: 280px;
    margin-left: 860px;
    z-index: 5000;
    width: 276px;
    height: 431px;
}
 
.box1 {
  position: absolute;
  vertical-align: middle;
  color: whitesmoke;
  display: inline-block;
  height: 60px;
  width: 240px;
  font-size: 20px;
  line-height: 60px;
  text-align: center;
  transition: 0.5s;
  margin-top: 180px;
  margin-left: 450px;
  cursor: pointer;
  border: 2px solid #c4c4c4;
  -webkit-transition: 0.5s;
}
 
.box2 {
  position: absolute;
  vertical-align: middle;
  color: whitesmoke;
  display: inline-block;
  height: 60px;
  width: 240px;
  font-size: 20px;
  line-height: 60px;
  text-align: center;
  transition: 0.5s;
  margin-top: 180px;
  margin-left: 750px;
  cursor: pointer;
  border: 2px solid #c4c4c4;
  -webkit-transition: 0.5s;
}
 
.box3 {
  position: absolute;
  vertical-align: middle;
  color: whitesmoke;
  display: inline-block;
  height: 60px;
  width: 240px;
  font-size: 20px;
  line-height: 60px;
  text-align: center;
  transition: 0.5s;
  margin-top: 180px;
  margin-left: 1050px;
  cursor: pointer;
  border: 2px solid #c4c4c4;
  -webkit-transition: 0.5s;
}
 
.box4 {
  position: absolute;
  vertical-align: middle;
  color: whitesmoke;
  display: inline-block;
  height: 60px;
  width: 240px;
  font-size: 20px;
  line-height: 60px;
  text-align: center;
  transition: 0.5s;
  margin-top: 180px;
  margin-left: 1350px;
  cursor: pointer;
  border: 2px solid #c4c4c4;
  -webkit-transition: 0.5s;
}
 
.box1:hover, .box2:hover, .box3:hover, .box4:hover {
  border: 2px solid #FFF;
  color: #FFF;
}
 
.box1::before,
.box2::before,
.box3::before,
.box4::before,
.box1::after,
.box2::after,
.box3::after,
.box4::after {
  width: 100%;
  height: 100%;
  z-index: 3;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  -webkit-transform: scale(0);
  transition: 0.5s;
}
 
.foo::before {
  border-bottom: 3px solid ;
  border-left: 3px solid #FFF;
  -webkit-transform-origin: 0 100%;
}
 
.foo::after {
  border-top: 3px solid #FFF;
  border-right: 3px solid #FFF;
  -webkit-transform-origin: 100% 0%;
}
 
.box1:hover::after,
.box2:hover::after,
.box3:hover::after,
.box4:hover::after,
.box1:hover::before,
.box2:hover::before,
.box3:hover::before,
.box4:hover::before {
  -webkit-transform: scale(1);
}

＆＃13;

<!DOCTYPE html>
 
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="//rawgit.com/fralec/elegantShareJS/master/css/elegant.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="background.js"></script>
    <script type="text/javascript" src="transition.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="//rawgit.com/fralec/elegantShareJS/master/script/elegant.js"></script>
    <title>Home</title>
</head>  
<body>
    <button id="stay">Stay connected</button>
   
    <h3>السبع</h3>
   
    <div class='box1 foo'>Home</div>
    <div class='box2 foo'>About</div>
    <div class='box3 foo'>Projects</div>
    <div class='box4 foo'>Contact</div>
   
    <img src="astronaut.png">
</body>
</html>

＆＃13;

我该如何正确实现此代码？

0 个答案: