0
我的網站未全部載入內容。 這是它看起來應該像上CodePen：https://codepen.io/ArchivalBoat50/full/mWjRqK/網站並未加載全部內容
但是，這是它真正的樣子： https://archivalboat50.github.io/marsproject/intro/
我檢查了控制檯，它說，它有一個HTTPS錯誤
這裏是我的代碼：
$(document).ready(function() {
setTimeout(function() {
$('.alpha').addClass('in');
},1000)
$(".main-button").click(function(event) {
this.style.transform = "rotate(360deg)";
})
})@font-face {
font-family: 'agency';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.eot'); /* IE9 Compat Modes */
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.woff') format('woff'), /* Modern Browsers */
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.svg#7adfd2e465e5a5494cfebbc2416928d9') format('svg'); /* Legacy iOS */
font-style: normal;
font-weight: 400;
}
html {
font-size: 20px
}
body {
height: 100vh;
overflow: hidden;
background-color: #000;
background-image: url("http://www.newforestobservatory.com/wordpress/wp-content/gallery/starclusters/m56_hsiii_nfo.jpg")
}
.alpha {
position: absolute;
top: 50%;
left: 50%;
font-family: 'agency';
text-transform: uppercase;
color: #fff;
font-weight: 100;
font-size: 5em;
transform-origin: center center;
transform: translate3d(-50%,-50%,0)scale(1.4);
opacity: 0;
transition: opacity 4s ease-out, transform 4s ease-out, letter-spacing 4s ease-out, -webkit-filter 3s ease-out, filter 3s ease-out;
filter: blur(20px);
-webkit-filter: blur(20px);
white-space: nowrap;
&.in {
transform: translate3d(-50%,-50%,0)scale(1);
letter-spacing: 0.1em;
opacity: 1;
filter: blur(0px);
-webkit-filter: blur(0px);
}
}
red-highlight {
background-color: rgba(255,0,3,0.3);
}
.mars {
width: 75%;
display: block;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, 0);
animation: mars 30s infinite linear;
}
@keyframes mars {
0% {
transform: translate(-50%, 0)rotate(0deg);
}
100% {
transform: translate(-50%, 0)rotate(360deg);
}
}
.center-element {
text-align: center;
}
.main-button {
padding: 17px;
background-color: rgba(0, 0, 0,0);
border: 3px solid white;
color: white;
font-weight: bold;
font-size: 16px;
transition: background-color 0.5s, color .5s, transform 1s
}
.main-button:hover {
background-color: white;
color: black;
// transform: rotate(5deg)
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alpha ">
<h1>
Welcome to <span style="background-color:red;">Mars</span>
</h1>
<div class="center-element">
<a href="https://archivalboat50.github.io/allpagesDavidsGMO/">
<a href="https://codepen.io/ArchivalBoat50/full/gmQyZQ/" target="_blank"><button type ="button" class= "main-button">CLICK TO BEGIN AN AWESOME JOURNEY</button></a>
</a>
</div>
</div>
<img class="mars" src="http://now.space/wp-content/themes/twentyfifteen/images/planets/mars.png" alt="" />我該如何解決這個問題？
Cross Origin問題..您正在從HTTPS請求文件，而您的網站僅爲HTTP，請移除「s」或使用子資源完整性（SRI） – moped
'http：// now.space'您混合了您的loading協議。 – zero298