私はここで見つけることができる本当に素晴らしいCSS3アニメーション背景チュートリアルに取り組んでいます
唯一の問題は、それが機能しないことです。残念ながら、このチュートリアルはコード付きの単なるブログ投稿であり、特定の名前がないため、問題のサポートを見つけるのに苦労しています.
シンプルな html マークアップを使用します。
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 02</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 03</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 04</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 05</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 06</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 07</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 08></span>
<div>
<h3></h3>
</div>
</li>
そして、残りはCSS3で行われます
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url() repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 40s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 40s linear infinite 0s;
-moz-animation: titleAnimation 40s linear infinite 0s;
-o-animation: titleAnimation 40s linear infinite 0s;
-ms-animation: titleAnimation 40s linear infinite 0s;
animation: titleAnimation 40s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/homepage/img01.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/homepage/img02.jpg);
animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/homepage/img03.jpg);
animation-delay: 10s;
-webkit-animation-delay: 10s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/homepage/img04.jpg);
animation-delay: 15s;
-webkit-animation-delay: 15s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/homepage/img05.jpg);
animation-delay: 20s;
-webkit-animation-delay: 20s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/homepage/img06.jpg);
animation-delay: 25s;
-webkit-animation-delay: 25s;
}
.cb-slideshow li:nth-child(7) span {
background-image: url(../images/homepage/img07.jpg);
animation-delay: 30s;
-webkit-animation-delay: 30s;
}
.cb-slideshow li:nth-child(8) span {
background-image: url(../images/homepage/img08.jpg);
animation-delay: 35s;
-webkit-animation-delay: 35s;
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
ブラウザが CSS3 アニメーションをサポートしていない場合に備えて、バックアップもあります。
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
これは、私が持っている空白のページにならないようにするためのものです。リンクを再確認し、デモをほぼ完全にコピーしましたが、ページに表示されません。誰もが CSS3 に精通しており、私の問題が何であるかについて何か考えがありますか?