CSS3:實現圖片輪播
阿新 • • 發佈:2019-02-08
/** login頁面圖片切換 */ @-webkit-keyframes slide { 0% { background-image: url(../images/background/login_background1.jpg); } 10%, 25% { background-image: url(../images/background/login_background2.jpg); } 35%, 50% { background-image: url(../images/background/login_background3.jpg); } 60%, 75% { background-image: url(../images/background/login_background4.jpg); } 85%, 100% { background-image: url(../images/background/login_background1.jpg); } } @-moz-keyframes slide { 0% { background-image: url(../images/background/login_background1.jpg); } 10%, 25% { background-image: url(../images/background/login_background2.jpg); } 35%, 50% { background-image: url(../images/background/login_background3.jpg); } 60%, 75% { background-image: url(../images/background/login_background4.jpg); } 85%, 100% { background-image: url(../images/background/login_background1.jpg); } } @-o-keyframes slide { 0% { background-image: url(../images/background/login_background1.jpg); } 100% { background-image: url(../images/background/login_background1.jpg); } } @keyframes slide { 0% { background-image: url(../images/background/login_background1.jpg); } 10%, 25% { background-image: url(../images/background/login_background2.jpg); } 35%, 50% { background-image: url(../images/background/login_background3.jpg); } 60%, 75% { background-image: url(../images/background/login_background4.jpg); } 85%, 100% { background-image: url(../images/background/login_background1.jpg); } } #login-full-wrapper {
background: url(../images/background/login_background1.jpg) no-repeat center center; background-size: cover; width: 100%; height: 100%; position: absolute; -webkit-animation: slide 8s linear infinite; -o-animation: slide 8s linear infinite; animation: slide 8s linear infinite; }