.worth-main-2 { z-index: 1000; position: absolute; left: 0; top: 0; right: 0; bottom: 0; color: white; background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .8) 100%); display: flex; align-items: center; justify-content: center; } .worth-main-2 h3 { margin-bottom: 1rem; font-size: 1.4rem; } .main-2 { position: relative; width: calc(100vw - 4rem); } .worth-content-2 > div{ position: absolute; -webkit-animation-name: kenburns-5-text; animation-name: kenburns-5-text; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 45s; animation-duration: 45s; opacity: 0; top: 0; width: calc(100vw - 2rem); left: -2rem; } .worth-content-2 h5 { padding-bottom: .5rem; color: #ffc000; font-size: 1.8rem; line-height: 2rem; font-weight: bold; } .worth-content-2 label { color: white; font-size: 1rem; font-weight: bold; } .worth-content-2 p { line-height: 1.6rem; color: white; opacity: .8; } .worth-content-2 > div:nth-child(1){ -webkit-animation-name: kenburns-5-text-1; animation-name: kenburns-5-text-1; z-index: 4; } .worth-content-2 > div:nth-child(2){ -webkit-animation-name: kenburns-5-text-2; animation-name: kenburns-5-text-2; z-index: 3; } .worth-content-2 > div:nth-child(3){ -webkit-animation-name: kenburns-5-text-3; animation-name: kenburns-5-text-3; z-index: 2; } .worth-content-2 > div:nth-child(4){ -webkit-animation-name: kenburns-5-text-4; animation-name: kenburns-5-text-4; z-index: 1; } .worth-content-2 > div:nth-child(5){ -webkit-animation-name: kenburns-5-text-5; animation-name: kenburns-5-text-5; z-index: 0; } @keyframes kenburns-5-text-1 { 0% { opacity: 0; left: -2rem; } 5% { opacity: 1; left: 0; } 15% { opacity: 1; left: 0; } 20% { opacity: 0; left: 2rem; } 95% { opacity: 0; left: -2rem; } 100% { opacity: 0; left: -2rem; } } @keyframes kenburns-5-text-2 { 20% { opacity: 0; left: -2rem; } 25% { opacity: 1; left: 0; } 35% { opacity: 1; left: 0; } 40% { opacity: 0; left: 2rem; } 100% { opacity: 0; left: -2rem; } } @keyframes kenburns-5-text-3 { 40% { opacity: 0; left: -2rem; } 45% { opacity: 1; left: 0; } 55% { opacity: 1; left: 0; } 60% { opacity: 0; left: 2rem; } 100% { opacity: 0; left: -2rem; } } @keyframes kenburns-5-text-4 { 60% { opacity: 0; left: -2rem; } 65% { opacity: 1; left: 0; } 75% { opacity: 1; left: 0; } 80% { opacity: 0; left: 2rem; } 100% { opacity: 0; left: -2rem; } } @keyframes kenburns-5-text-5 { 80% { opacity: 0; left: -2rem; } 85% { opacity: 1; left: 0; } 95% { opacity: 1; left: 0; } 100% { opacity: 0; left: 2rem; } } .block-worth-1 { height: calc(100vh - 80px); } .main-worth { z-index: 30; position: relative; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .7) 100%); } .main-worth .container { /* display: flex; align-items: center; justify-content: center; width: 100%; */ color: rgba(255, 255, 255, .9); } .worth-content-1 { position: absolute; left: 1rem; right: 1rem; top: 50%; transform: translateY(-50%); } .worth-content-1 > div { padding: 2rem .5rem; width: 90%; text-align: right; } .worth-content-1 > div:nth-child(2n) { margin-left: 10%; } .worth-content-1 span { display: inline-block; width: 100%; font-size: 2rem; } .worth-content-1 small { color: #ffc000; font-size: 1.2rem; line-height: 1.2rem; text-align: right; } .worth-main-2 .content { position: absolute; top: 50%; left: 1rem; right: 1rem; transform: translateY(-50%); } .worth-main-2 .content > div { min-height: 13rem; } @media (max-width: 767.98px) { /*陪伴*/ .block-worth-1 { height: calc(100vh - 65px); } .worth-main-1 .content { width: auto; } .worth-main-1 .content label { font-size: 2rem; line-height: 2rem; } .worth-content-1 > div { padding: 1rem .5rem; } .worth-content-1 span { font-size: 1.1rem; } .worth-content-1 small { display: block; font-size: .9rem; line-height: .9rem; } .slideshow-5-image { position: absolute; width: 100%; height: 100%; background: no-repeat 50% 50%; background-size: cover; -webkit-animation-name: kenburns-5; animation-name: kenburns-5; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 45s; animation-duration: 45s; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .slideshow-5-image:nth-child(1) { -webkit-animation-name: kenburns-5-1; animation-name: kenburns-5-1; z-index: 4; } .slideshow-5-image:nth-child(2) { -webkit-animation-name: kenburns-5-2; animation-name: kenburns-5-2; z-index: 3; } .slideshow-5-image:nth-child(3) { -webkit-animation-name: kenburns-5-3; animation-name: kenburns-5-3; z-index: 2; } .slideshow-5-image:nth-child(4) { -webkit-animation-name: kenburns-5-4; animation-name: kenburns-5-4; z-index: 1; } .slideshow-5-image:nth-child(5) { -webkit-animation-name: kenburns-5-5; animation-name: kenburns-5-5; z-index: 0; } @keyframes kenburns-5-1 { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 5% { opacity: 1; } 15% { opacity: 1; } 20.5625% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 90.4375% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; } } @keyframes kenburns-5-2 { 10.4375% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 20.5625% { opacity: 1; } 35% { opacity: 1; } 40.5625% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @keyframes kenburns-5-3 { 30.4375% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 40.5625% { opacity: 1; } 55% { opacity: 1; } 60.5625% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @keyframes kenburns-5-4 { 50.4375% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 60.5625% { opacity: 1; } 75% { opacity: 1; } 80.5625% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @keyframes kenburns-5-5 { 70.4375% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 80.5625% { opacity: 1; } 95.4375% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } } }