gsap+flip实现一个圣诞节礼物盒子拆开公告效果代码
代码语言:html
所属分类:动画
代码描述:gsap+flip实现一个圣诞节礼物盒子拆开公告效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* @link https://utopia.fyi/type/calculator?c=320,21,1.2,1140,24,1.778,2,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */ @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400&family=Signika+Negative:wght@600;700&display=swap"); :root { --fluid-min-width: 320; --fluid-max-width: 1140; --fluid-screen: 100vw; --fluid-bp: calc( (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)) ); } @media screen and (min-width: 1140px) { :root { --fluid-screen: calc(var(--fluid-max-width) * 1px); } } :root { --f-0-min: 16; --f-0-max: 24; --step-0: calc( ((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp) ); --f-1-min: 20; --f-1-max: 42.67; --step-1: calc( ((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp) ); --f-2-min: 30.24; --f-2-max: 60; --step-2: calc( ((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp) ); } /* @link https://utopia.fyi/space/calculator?c=320,21,1.2,1140,24,1.778,2,0,&s=,1.5|1.5,s-l */ :root { --fluid-min-width: 320; --fluid-max-width: 1140; --fluid-screen: 100vw; --fluid-bp: calc( (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)) ); } @media screen and (min-width: 1140px) { :root { --fluid-screen: calc(var(--fluid-max-width) * 1px); } } :root { --fc-s-min: (var(--f-0-min, 21)); --fc-s-max: (var(--f-0-max, 24)); --fc-m-min: (var(--fc-s-min) * 1.5); --fc-m-max: (var(--fc-s-max) * 1.5); --fc-l-min: (var(--fc-s-min) * 2.5); --fc-l-max: (var(--fc-s-max) * 2.5); --fc-xl-min: (var(--fc-s-min) * 2.5); --fc-xl-max: (var(--fc-s-max) * 5); /* T-shirt sizes */ --space-s: calc( ((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp) ); --space-m: calc( ((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp) ); --space-l: calc( ((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp) ); --space-xl: calc( ((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp) ); /* One-up pairs */ --space-s-m: calc( ((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp) ); --space-m-l: calc( ((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp) ); /* Custom pairs */ --space-s-l: calc( ((var(--fc-s-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-s-min)) * var(--fluid-bp) ); --space-s-xl: calc( ((var(--fc-s-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-s-min)) * var(--fluid-bp) ); --space-l-xl: calc( ((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp) ); } * { box-sizing: border-box; } body { font-family: "Signika Negative", sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; padding: 0; margin: 0; background-color: #1d1e22; color: #23272a; font-size: var(--step-0); line-height: 1.34; overflow: hidden; --one: hsl(192deg 40% 43%); --two: hsl(268deg 45% 46%); --three:hsl(268deg 45% 42%); --four: hsl(192deg 40% 43%); --five: hsl(356deg 80% 25%); } h1, h2 { margin: 0; } p { margin-top: 0.75em; color: #4c4c52; } a { color: #61AC27; font-weight: bold; } h1 { font-size: var(--step-2); } h2 { font-size: var(--step-1); } .content--open { display: none; max-width: 750px; margin: 0 auto; } .open .content--open { display: block; } .open .content--closed { display: none; visibility: hidden; } .card { position: relative; background: #fff; padding: var(--space-s-l); padding-top: 80px; width: 90vw; max-width: 580px; border-radius: 16px; margin-top: 120px; cursor: pointer; } .flipping.card { max-width: unset; } .open .card { position: fixed; bottom: 0; left: 0; right: 0; border-radius: 0; width: 100%; max-width: 100%; height: 40vh; padding: var(--space-s-xl); padding-top: 90px; } @media only screen and (max-width: 600px) { .open .card { height: 65vh; padding-top: 75px; } .card { padding-top: 65px; } } .gift-container { position: absolute; bottom: calc(100% - 120px); z-index: 3; opacity: 0; left: calc(50% - 125px); } .open .gift-container { left: 8rem; } .bottom { --width: 20; --height: 15; --depth: 20; } .top { --width: 22; --height: 5; --depth: 22; } /* mad props to Jhey for this article https://css-tricks.com/css-in-3d-learning-to-think-in-cubes-instead-of-boxes/ */ .plane { height: 250px; width: 250px; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(314deg) rotateX(90deg) translate3d(0, 0, 0); --size: 8px; } @media only screen and (max-width: 600px) { .plane { --size: 5px; } .gift-container { bottom: calc(100% - 150px); left: calc(50% - 125px); } .open .gift-container { left: -2rem; } } .box > div { background: linear-gradient(to right, var(--three), var(--three) 42%, var(--one) 42%, var(--one) 58%, var(--three) 58%); } .top { transform: translate3d(0, 0, calc(8 * var(--size))); } .top > div:nth-of-type(5) { background: linear-gradient(to bottom, transparent, transparent 42%, var(--one) 42%, var(--one) 58%, transparent 58%), linear-gradient(to right, var(--two), var(--two) 42%, var(--one) 42%, var(--one) 58%, var(--two) 58%); } .bottom > div:nth-of-type(5) { background: transparent; } .bottom > div:nth-of-type(2), .bottom > div:nth-of-type(4) { background: #422e61; border: solid 0.2px #341d1d; z-index: -200; } .box { height: calc(var(--depth) * var(--size)); width: calc(var(--width) * var(--size)); transform-style: preserve-3d; position: absolute; font-size: 1rem; } .box > div:nth-of-type(1) { height: calc(var(--height) * var(--size)); width: 100%; transform-origin: 50% 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / 2) * var(--size))); background: linear-gradient(to right, var(--three), var(--three) 42%, var(--one) 42%, var(--one) 58%, var(--three) 58%); } .box > div:nth-of-type(2) { height: calc(var(--height) * var(--size)); width: 100%; transform-origin: 50% 50%; transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * var(--size))); position: absolute; top: 50%; left: 50%; } .box > div:nth-of-type(3) { height: calc(var(--height) * var(--size)); width: calc(var(--depth) * var(--size)); transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * var(--size))); position: absolute; top: 50%; left: 50%; } .box > div:nth-of-type(4) { height: calc(var(--height) * var(--size)); width: calc(var(--depth) * var(--size)); transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * var(--size))); position: absolute; top: 50%; left: 50%;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0