gsap实现全屏动感饮料幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:gsap实现全屏动感饮料幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap"); /* Common Style */ * { margin: 0; padding: 0; box-sizing: border-box; } img { width: 100%; height: auto; } body { overflow: hidden !important; } a:focus { outline: none; box-shadow: none; } input:focus { outline: none; border: none; box-shadow: none; } input:focus-visible { outline: none; border: none; box-shadow: none; } button:focus, :focus-visible { outline: none; border: none; } /* Root*/ :root { --pear-can: #e6ffde; --pear-logo: #03403f; --apple-can: #f2675a; --apple-logo: #ec4458; --exotic-can: #9590f1; --black-color: #000000; --white-color: #ffffff; --exotic-logo: #6464ff; --pear-background: #c9e78a; --apple-background: #ffb2b2; --exotic-background: #c1bff2; } /* Typography */ h1 { font-family: "Lexend"; font-size: 449px !important; line-height: normal !important; color: var(--white-color) !important; margin: 0 !important; } h2 { font-family: "Lexend"; font-size: 40px; line-height: normal; margin: 0; font-weight: 900; } /* Header */ header { padding: 22px 28px 0; position: fixed; top: 0; left: 0; width: 100vw; z-index: 99; text-align: center; } .logo { color: var(--pear-logo); } h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Cane Image and Wrapper Image */ .cane-image { max-width: 265px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); mask-image: url(//repo.bfw.wiki/bfwrepo/images/fruts/cane.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 100% auto; mask-size: 100% auto; overflow: hidden; } .cane-image img { width: 100%; } .cane-labels { position: absolute; top: 0; left: 0; width: 300% !important; mix-blend-mode: multiply; transition: all ease-in-out 0.3s; } /*Fruits Images */ .fruit-image { opacity: 1; position: absolute; } .image-one { max-width: 282px; bottom: 100px; } .image-two { max-width: 247px; top: 23%; left: 25%; } .image-three { max-width: 211px; top: 23%; right: 25%; } .image-four { max-width: 294px; bottom: 100px; right: 0; } /* After */ .fruit-image::after { content: ""; position: absolute; background: linear-gradient(90deg, #000 3.66%, rgba(0, 0, 0, 0) 92.35%); opacity: 0.43; filter: blur(7.5px); transform: rotate(-6.941deg); right: 0; width: 173px; height: 30px; } .image-one::after { bottom: -50px; } .image-two::after { bottom: -200px; height: 22px; } .image-three::after { bottom: -280px; width: 103px; } .image-four::after { bottom: -50px; } /*Section */ .section-container-main { width: 100vw; overflow: hidden; position: relative; z-index: -1; } .section-container { width: 300vw; display: flex; position: relative; transition: all ease-in-out 0.5s; align-items: center; } .section { min-width: 100vw; height: 100vh; position: relative; overflow: hidden; z-index: -1; background: var(--pear-background); } .section:nth-child(2) { background-color: var(--apple-background); } .section:nth-child(3) { background-color: var(--exotic-background); } /* Add this to your CSS */ /* Buttons */ button { position: fixed; top: 50%; right: 30px; z-index: 99; transform: translateY(-50%); border-radius: 50%; height: 80px; width: 80px; background-color: var(--white-color); border: none; font-size: 40px; color: var(--apple-logo); transition: all ease-in-out 0.3s; cursor: pointer; } #prevButton { left: 30px; right: unset; display: none; transition: all ease-in 0.3s; } .wave { animation: wave-apple-effect 4s linear infinite; animation-direction: normal; } @keyframes wave-pear-effect { 0% { box-shadow: 0 0 0 0px var(--pear-background), 0 0 0 0px var(--pear-background); } 40% { box-shadow: 0 0 0 50px rgba(60, 41, 188, 0), 0 0 0 0px var(--pear-background); } 80% { box-shadow: 0 0 0 50px rgba(60, 41, 188, 0), 0 0 0 30px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0px rgba(60, 41, 188, 0), 0 0 0 30px rgba(0, 230, 118, 0); } } @keyframes wave-apple-effect { 0% { box-shadow: 0 0 0 0px var(--apple-background), 0 0 0 0px var(--apple-background); } 40% { box-shadow: 0 0 0 50px rgba(60, 41, 188, 0), 0 0 0 0px var(--apple-background); } 80% { box-shadow: 0 0 0 50px rgba(60, 41, 188, 0), 0 0 0 30px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0px rgba(60, 41, 188, 0), 0 0 0 30px rgba(0, 230, 118, 0); } } @keyframes wave-exotic-effect { 0% { box-shadow: 0 0 0 0px var(--exotic-background), 0 0 0 0px var(--exotic-background); } 40% { box-shadow: 0 0 0 50px rgba(60, 41, 188, 0), 0 0 0 0px var(--exotic-background); } 80% { box-shadow: 0 0 0 50px rgba(60, 41, 188, 0), 0 0 0 30px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0px rgba(60, 41, 188, 0), 0 0 0 30px rgba(0, 230, 118, 0); } } /*.......... Responsive.............. */ @media screen and (max-width: 1550px) { h1 { font-size: 350px !important; } .cane-image { max-width: 280px; } .image-one { max-width: 250px; } .image-two { max-width: 215px; left: 22%; top: 10%; } .image-three { max-width: 180px; } .image-four { max-width: 260px; right: 40px; } } @media screen and (max-width: 1199px) { h1 { font-size: 300px !important; } .cane-image::after { width: 150%; } .image-one { max-width: 220px; } .image-two { max-width: 185px; left: 18%; top: 10%; } .image-three { max-width: 180px; right: 18%; } .image-four { max-width: 230px; } } @media screen and (max-width: 991px) { h1 { font-size: 240px !important; } .cane-image { max-width: 250px; } button { height: 80px; width: 80px; top: 90%; } .image-one { max-width: 180px; } .image-two { max-width: 165px; left: 12%; top: 12%; } .image-three { max-width: 150px; right: 12%; } .image-four { max-width: 200px; } } @media screen and (max-width: 767px) { h1 { font-size: 180px !important; } h2 { font-size: 30px; } .cane-image { max-width: 180px; } button { height: 60px; width: 60px; font-size: 20px; } .image-one { max-width: 180px; bottom: 150px; } .image-two { max-width: 145px; left: 12%; top: 15%; } .image-three { max-width: 130px; right: 10%; } .image-four { max-width: 180px; bottom: 150px; } } @media screen and (max-width: 575px) { h1 { font-size: 100px !important; } .cane-image::after { width: 100%; } .image-one { max-width: 150px; } .image-two { max-width: 115px; left: 4%; top: 18%; } .image-three { max-width: 100px; right: 4%; } .image-four { max-width: 150px; right: 0; } } </style> </head> <body> <!-- header --> <header> <h2 class="logo"> Fruity </h2> </header> <!-- main --> <main> <!-- Buttons --> <div> <button id="prevButton" class="wave"><i class="fa-solid fa-chevron-left"></i></button> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0