收藏本站回蘭中首頁蘭中六十週年校慶
開啟輔助訪問 切換到寬版

蘭庭論壇

 找回密碼
 立即註冊
搜索
熱搜: 活動 交友 discuz
蘭庭論壇»首頁 › 學習領域【領域會議、共備、活動、研習】 › 科技 › 伺服器及資訊技術 › CSS3 & jQuery~全螢幕自動變換背景
返回列表 發新帖
查看: 1243|回復: 0
打印 上一主題 下一主題

CSS3 & jQuery~全螢幕自動變換背景

[複製鏈接]
李亮寬
跳轉到指定樓層
樓主
發表於 2016-2-18 22:37:59 | 只看該作者 回帖獎勵 |正序瀏覽 |閱讀模式
http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index2.html

本校範例http://120.101.203.1/iljhs/%E5%B ... %E8%A6%BD%E6%9C%83/


html語法    demo.html:


        <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Fullscreen Background Image Slideshow with CSS3</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" />
        <meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, images, content" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico">
        <link rel="stylesheet" type="text/css" href="css/style2.css" />
               
    </head>
    <body id="page">
        <ul class="cb-slideshow">
            <li><span>Image 01</span><div><h3>serenity</h3></div></li>
            <li><span>Image 02</span><div><h3>composure</h3></div></li>
            <li><span>Image 03</span><div><h3>e.qua.nim.i.ty</h3></div></li>
            <li><span>Image 04</span><div><h3>bal繚ance</h3></div></li>
            <li><span>Image 05</span><div><h3>qui繚e繚tude</h3></div></li>
            <li><span>Image 06</span><div><h3>re繚lax繚a繚tion</h3></div></li>
        </ul>
    </body>
</html>

css3語法  style.css:

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}


.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(../images/pattern.png) 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;
-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 10px;
    left: 0px;
    width: 100%;
    text-align: right;
    opacity: 0;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 160px;
    padding: 0 30px;
    line-height: 120px;
    color: rgba(169,3,41, 0.8);
}
.cb-slideshow li:nth-child(1) span { background-image: url(../images/6.jpg) }
.cb-slideshow li:nth-child(2) span {
    background-image: url(../images/5.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(../images/4.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(../images/3.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
    background-image: url(../images/2.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
    background-image: url(../images/1.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% {
     opacity: 0;
     -webkit-animation-timing-function: ease-in;
}
8% {
     opacity: 1;
     -webkit-transform: scale(1.05);
     -webkit-animation-timing-function: ease-out;
}
17% {
     opacity: 1;
     -webkit-transform: scale(1.1) rotate(3deg);
}
25% {
     opacity: 0;
     -webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
     opacity: 0;
     -moz-animation-timing-function: ease-in;
}
8% {
     opacity: 1;
     -moz-transform: scale(1.05);
     -moz-animation-timing-function: ease-out;
}
17% {
     opacity: 1;
     -moz-transform: scale(1.1) rotate(3deg);
}
25% {
     opacity: 0;
     -moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
     opacity: 0;
     -o-animation-timing-function: ease-in;
}
8% {
     opacity: 1;
     -o-transform: scale(1.05);
     -o-animation-timing-function: ease-out;
}
17% {
     opacity: 1;
     -o-transform: scale(1.1) rotate(3deg);
}
25% {
     opacity: 0;
     -o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
     opacity: 0;
     -ms-animation-timing-function: ease-in;
}
8% {
     opacity: 1;
     -ms-transform: scale(1.05);
     -ms-animation-timing-function: ease-out;
}
17% {
     opacity: 1;
     -ms-transform: scale(1.1) rotate(3deg);
}
25% {
     opacity: 0;
     -ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
     opacity: 0;
     animation-timing-function: ease-in;
}
8% {
     opacity: 1;
     transform: scale(1.05);
     animation-timing-function: ease-out;
}
17% {
     opacity: 1;
     transform: scale(1.1) rotate(3deg);
}
25% {
     opacity: 0;
     transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
0% {
     opacity: 0;
     -webkit-transform: translateX(200px);
}
8% {
     opacity: 1;
     -webkit-transform: translateX(0px);
}
17% {
     opacity: 1;
     -webkit-transform: translateX(0px);
}
19% {
     opacity: 0;
     -webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
     opacity: 0;
     -moz-transform: translateX(200px);
}
8% {
     opacity: 1;
     -moz-transform: translateX(0px);
}
17% {
     opacity: 1;
     -moz-transform: translateX(0px);
}
19% {
     opacity: 0;
     -moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
     opacity: 0;
     -o-transform: translateX(200px);
}
8% {
     opacity: 1;
     -o-transform: translateX(0px);
}
17% {
     opacity: 1;
     -o-transform: translateX(0px);
}
19% {
     opacity: 0;
     -o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
     opacity: 0;
     -ms-transform: translateX(200px);
}
8% {
     opacity: 1;
     -ms-transform: translateX(0px);
}
17% {
     opacity: 1;
     -ms-transform: translateX(0px);
}
19% {
     opacity: 0;
     -ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
     opacity: 0;
     transform: translateX(200px);
}
8% {
     opacity: 1;
     transform: translateX(0px);
}
17% {
     opacity: 1;
     transform: translateX(0px);
}
19% {
     opacity: 0;
     transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}


CSS3FullscreenSlideshow.zip

506.47 KB, 下載次數: 287
回復

使用道具 舉報

返回列表 發新帖
高級模式
B Color Image Link Quote Code Smilies
您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

Archiver|手機版|小黑屋|蘭庭論壇

GMT+8, 2024-11-23 19:48 , Processed in 0.045735 second(s), 18 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表