CINXE.COM
福建省福州儿童医院
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>福建省福州儿童医院</title> <style type="text/css"> * { margin: 0; padding: 0; } .slideshow { position: absolute; width: 100vw; height: 100vh; overflow: hidden; } .slideshow-image { position: absolute; width: 100%; height: 100%; background: no-repeat 50% 50%; background-size: cover; -webkit-animation-name: kenburns; animation-name: kenburns; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 16s; animation-duration: 16s; opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } .slideshow-image:nth-child(1) { -webkit-animation-name: kenburns-1; animation-name: kenburns-1; z-index: 3; } .slideshow-image:nth-child(2) { -webkit-animation-name: kenburns-2; animation-name: kenburns-2; z-index: 2; } .slideshow-image:nth-child(3) { -webkit-animation-name: kenburns-3; animation-name: kenburns-3; z-index: 1; } .slideshow-image:nth-child(4) { -webkit-animation-name: kenburns-4; animation-name: kenburns-4; z-index: 0; } @-webkit-keyframes kenburns-1 { 0% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 1.5625% { opacity: 1; } 23.4375% { opacity: 1; } 26.5625% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } 98.4375% { opacity: 0; -webkit-transform: scale(1.21176); transform: scale(1.21176); } 100% { opacity: 1; } } @keyframes kenburns-1 { 0% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 1.5625% { opacity: 1; } 23.4375% { opacity: 1; } 26.5625% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } 98.4375% { opacity: 0; -webkit-transform: scale(1.21176); transform: scale(1.21176); } 100% { opacity: 1; } } @-webkit-keyframes kenburns-2 { 23.4375% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 26.5625% { opacity: 1; } 48.4375% { opacity: 1; } 51.5625% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes kenburns-2 { 23.4375% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 26.5625% { opacity: 1; } 48.4375% { opacity: 1; } 51.5625% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } } @-webkit-keyframes kenburns-3 { 48.4375% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 51.5625% { opacity: 1; } 73.4375% { opacity: 1; } 76.5625% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes kenburns-3 { 48.4375% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 51.5625% { opacity: 1; } 73.4375% { opacity: 1; } 76.5625% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } } @-webkit-keyframes kenburns-4 { 73.4375% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 76.5625% { opacity: 1; } 98.4375% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @keyframes kenburns-4 { 73.4375% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 76.5625% { opacity: 1; } 98.4375% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } .index_h1 { position: absolute; bottom: 0; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); z-index: 99; text-align: center; font-family: Raleway, sans-serif; font-weight: 300; text-transform: uppercase; line-height: 1.5; } .index_h1 img { margin-right: 10px; } </style> </head> <body> <!-- 文字区不需要请连css部分代码一并删除 --> <div class="index_h1"> <a href="/node/584.jspx"><img src="/resources/images/index/zw.png" width="100" height="100" alt="" /></a> <a href="/"><img src="/resources/images/index/yw.png" width="100" height="100" alt="" /></a> </div> <!-- 你可以添加个多“.slideshow-image”项目, 记得修改CSS --> <div class="slideshow"> <div class="slideshow-image" style="background-image: url('/resources/images/index/1.jpg')"></div> <div class="slideshow-image" style="background-image: url('/resources/images/index/2.jpg')"></div> <div class="slideshow-image" style="background-image: url('/resources/images/index/1.jpg')"></div> <div class="slideshow-image" style="background-image: url('/resources/images/index/2.jpg')"></div> </div> </body> </html>