Элементы не отображаются

-1

Существует <p>, что не отображается, я также пробовал с <div>, но это ничего не меняет. Так почему он не показывает?Элементы не отображаются

#loader-wrapper { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1000; 
 
} 
 

 
#loader { 
 
    -webkit-animation: rotateplane 1.2s infinite ease-in-out; 
 
    animation: rotateplane 1.2s infinite ease-in-out; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #00c4ff; 
 
    position: absolute; 
 
    z-index: 1001; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -50px; 
 
    margin-top: -50px; 
 
} 
 

 
@-webkit-keyframes rotateplane { 
 
    0% { -webkit-transform: perspective(120px) } 
 
    50% { -webkit-transform: perspective(120px) rotateY(180deg) } 
 
    100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } 
 
} 
 

 
@keyframes rotateplane { 
 
    0% { 
 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg); 
 
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
 
    } 50% { 
 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 
 
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
 
    } 100% { 
 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 
 
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 
 
    } 
 
} 
 

 
#loader-wrapper .loader-section { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 50%; 
 
    height: 100%; 
 
    z-index: 1000; 
 
    background-image: url(http://i.imgur.com/Sb2b3fQ.jpg); 
 
} 
 

 
#loader-wrapper .loader-section.section-left { 
 
    left: 0; 
 
} 
 
    
 
#loader-wrapper .loader-section.section-right { 
 
    right: 0; 
 
} 
 

 
.loaded #loader-wrapper .loader-section.section-left { 
 
    -webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ 
 
    -ms-transform: translateX(-100%); /* IE 9 */ 
 
    transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */ 
 
} 
 
    
 
.loaded #loader-wrapper .loader-section.section-right { 
 
    -webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */ 
 
    -ms-transform: translateX(100%); /* IE 9 */ 
 
    transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */ 
 
} 
 

 
.loaded #loader { 
 
    opacity: 0; 
 
} 
 

 
.loaded #loader-wrapper { 
 
    visibility: hidden; 
 
} 
 

 
.loaded #loader { 
 
    opacity: 0; 
 
    -webkit-transition: all 0.3s ease-out; 
 
      transition: all 0.3s ease-out; 
 
} 
 

 
.loaded #loader-wrapper .loader-section.section-right, 
 
.loaded #loader-wrapper .loader-section.section-left { 
 
    
 
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
 
       transition: all 0.3s 0.3s ease-out; 
 
} 
 

 
.loaded #loader-wrapper { 
 
     -webkit-transform: translateY(-100%); 
 
      -ms-transform: translateY(-100%); 
 
       transform: translateY(-100%); 
 
    
 
     -webkit-transition: all 0.3s 1s ease-out; 
 
       transition: all 0.3s 1s ease-out; 
 
} 
 
.content { 
 
    width: 100%; 
 
    height: 5000px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: radial-gradient(circle farthest-corner at center, #3C4B57 0%, #1C262B 100%); 
 
} 
 

 
@font-face { 
 
    font-family: patate; 
 
    src: url(../fonts/patate.woff); 
 
} 
 

 
@font-face { 
 
    font-family: reis; 
 
    src: url(../fonts/reis.otf); 
 
} 
 

 
@font-face { 
 
    font-family: bizon; 
 
    src: url(../fonts/bizon.otf); 
 
} 
 

 
.white { 
 
    background-color: white; 
 
    width: 100%; 
 
    height: 100vh; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(http://p1.pichost.me/640/69/1942134.png); 
 
    background-size: cover; 
 
} 
 

 
.1ce { 
 
    width: 100%; 
 
    color: white; 
 
    font-size: 100px; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 50%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <link href="css/main.css" rel="stylesheet" type="text/css"> 
 
     <script> 
 
      var startTime = Date.now(); 
 
      window.addEventListener("load", function(){ 
 
       var load_screen = document.getElementById("load_screen"); 
 
       setTimeout(function() { 
 
        document.getElementsByTagName("BODY")[0].setAttribute("class", "loaded"); 
 
       }, Math.max(0, 10000 - (Date.now() - startTime))); 
 
      }); 
 
     </script> 
 
    </head> 
 
    <body> 
 
     <div id="loader-wrapper"> 
 
      <div class="loader-section section-left"></div> 
 
      <div class="loader-section section-right"></div> 
 
      <div id="loadingbar-frame"></div> 
 
      <div id="loader"></div> 
 
     </div> 
 
     <div class="content"> 
 
      <div class="white"></div> 
 
      <p class="1ce">BlaBlaBla</p> 
 
     </div> 
 
    </body> 
 
</html>

источник

2015-03-25 HellixS

До сих пор не работает – HellixS

Переименуйте свой класс от '.1ce' к действительным имя (не начиная с номера), например '.ice', см., если это работает –

AHahahh это сработало спасибо: D – HellixS

Переименовать класс от .1ce к действительному имени (не начиная с номера), как .ice

источник

2015-03-25 18:16:45

Элементы не отображаются

ответ

Смежные вопросы