* { margin: 0; padding: 0; box-sizing: border-box; font-family: 微軟正黑體; } .body{ background-color: #000 !important; } .propertytitle{ -webkit-text-stroke:0.7px #fff; -moz-text-stroke:0.7px #fff; } p{ font-size: 24px; } .bgslider{ position: relative; width: 100% !important; } ul{ list-style-type: none; width: 100% !important; } ul>li{ position: absolute; width: 100% !important; } ul>li:nth-child(3){ animation: li3 12s infinite; } ul>li:nth-child(2){ animation: li2 12s infinite; } ul>li:nth-child(1){ animation: li1 12s infinite; } @keyframes li3{ 0%{ opacity: 1; } 35%{ opacity: 0; } 75%{ opacity: 0; } } @keyframes li2{ 40%{ opacity: 1; } 80%{ opacity: 0; } 75%{ opacity: 0; } } @keyframes li1{ 80%{ opacity: 1; } 95%{ opacity: 0; } } .bg-item{ display: none; // img{ // // opacity: 0; // // animation-name:BgFadein; // // animation-duration: 5s; // // animation-delay: -3s; // // animation-fill-mode:forwards; // // animation-fill-mode:backwards; // // animation-timing-function:ease-out; // } } .bg-item3{ display: none; img{ animation-name:BgFadein; animation-duration: 1s; animation-timing-function:ease-out; } } .bg-item2{ display: none; img{ animation-name:BgFadein; animation-duration: 1s; animation-timing-function:ease-out; } } .bg-active{ display: block; } @keyframes BgFadein { 0% { opacity: 0.5; } 50% {opacity: 0.8;} // 50% {opacity: 1;} 100%{ opacity: 1; } }