*{ padding: 0; margin: 0; } @font-face { font-family: "font-main"; src:url("../../font/Simply\ Rounded\ Bold.ttf"); font-weight: normal; font-style: normal; } /* nav */ .nav-switch{ width: 100px; margin: 40px 0 0 40px; } /* Banner */ .banner .animate img{ width: 100%; } .banner{ width: 100%; padding: 0; } .banner .title p{ font-size: 5em; font-family: font-main; } .banner .desc p{ font-size: 2em; font-family: font-main; color: rgb(243,164,170); text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } /* 第1部分:数据 */ .seg-data{ padding: 0; } .seg-data img{ width: 400px; height: 400px; } .seg-data .number{ font-size: 2em; } .seg-data .img-decr{ font-size: 2.5em; } /* 第1部分:肝病恶化 */ .seg-deter{ } .seg-deter .clock{ } /* 过渡1 */ .trisi{ position: relative; } .trisi p{ font-size: 5em; font-family: font-main; } .trisi .box1{ margin-bottom: 40%; position: relative; } .falling-box{ margin-top: 10%; position: absolute; height: 250%; width: 100%; z-index: 1; } .falling-fix{ height: 500px; position: sticky; top: 30%; } .falling{ width: 100%; } .falling img{ width: 50%; position: absolute; left: 25%; } .falling1{ opacity: 1; } .falling2{ opacity: 0; } .trisi .wave-box{ overflow: hidden; } .trisi .wave-box img{ position: absolute; bottom: -5%; z-index: -1; } .trisi .wave1{ animation: wave 5s -2s infinite ease-in-out; } .trisi .wave2{ animation: wave 5s -4s infinite ease-in-out; } .trisi .wave3{ animation: wave 5s -6s infinite ease-in-out; } .trisi .wave4{ animation: wave 5s -8s infinite ease-in-out; } @keyframes wave { 50%{ bottom: -10%; } } /* 第2部分:肝病的问题所在 */ .seg-res{ padding: 0; background-image: linear-gradient( rgb(151,248,244),20%,rgb(0,0,36),rgb(0,0,33) ); } .seg-res .imgbox{ margin-top: 600px; height: 1200px; } /* 过渡2 */ .trisi2{ position: relative; margin-top: 8%; } .trisi2 p{ font-size: 6em; font-family: font-main; position: relative; margin-top: 50px; color: rgb(243,164,170); text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;; bottom: 200px; z-index: -1; transition: 0.2s; } .trisi2 .wave-box img{ position: absolute; bottom: 0; } .trisi2 .wave1{ animation: wave2 5s -2s infinite ease-in-out; } .trisi2 .wave2{ animation: wave2 5s -4s infinite ease-in-out; } .trisi2 .wave3{ animation: wave2 5s -6s infinite ease-in-out; } @keyframes wave2 { 50%{ bottom: 20%; } } .trisi2 p{ position: relative; } /* 第3部分:我们的努力 */ .seg-weare{ padding: 0; } .seg-weare .weare{ padding: 0; } .seg-weare .potraiy{ width: 100%; height: 450px; } .seg-weare .desc p{ font-size: 1.5em; } /* 第3部分:我们的设计 */ .stiky-box{ height: 1200px; } .line{ height: 120px; background-color: brown; outline: 1px solid; margin: 0 auto; position: sticky; text-align: center; } .line p{ font-size: 2em; } .line1{ position: sticky; top: 20px; background-color: bisque; } .line2 { background-color: aquamarine; top: 140px; } .line3 { background-color: azure; top: 260px; z-index: 20; } .line-1{ width: 100%; height: 400px; } .dexc-box{ width: 75%; } .footer{ width: 800px; height: 200px; background-color: blue; margin: 0 auto; } .seg-design .desc{ width: 100%; height: 200px; position: sticky; margin-top: 40px; top: 530px; background-color: antiquewhite; display: flex; justify-items: center; justify-content: center; text-align: center; } .dexc-box{ height: 120px; background-color: cadetblue; opacity: 0; transition: 0.3s 0.1s; position: absolute; top: 60px; } .rxr-box{ background-color: yellowgreen; } .mach-box{ background-color: rosybrown; } .box-show{ opacity: 1; transition: 0.3s 0.1s; } /* 第4部分:detail */ .seg-detail{ height: 300px; background-color: rgb(243,145,170); } .jump img{ width: 200px; height: 200px; background-color: rebeccapurple; }