3D拖动商品展示详情页特效
代码语言:html
所属分类:电商
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D Drag out menu with guitar</title> <style> @import url("https://fonts.googleapis.com/css?family=Heebo:400,500,800,900&display=swap"); :root { --bg: #efdece; } h4 { color: white; margin: 0; padding-top: 20px; text-align: center; } canvas { position: absolute; z-index: 1; opacity: 0.6; pointer-events: none; } .dynamicCursor { max-width: 50px; min-width: 18px; transition: width 0s; background: transparent !important; border: 2px solid white !important; } @-webkit-keyframes in { from { opacity: 0; } to { opacity: 1; } } @keyframes in { from { opacity: 0; } to { opacity: 1; } } body { padding: 0; background: #a92913; padding: 0; margin: 0; box-shadow: 50vw 0 #381313 inset; height: 100vh; font-family: 'Heebo', sans-serif; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ } body .phone { position: absolute; left: 0; right: 0; margin: auto; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } body .guitar { width: 85px; height: 175px; z-index: 10; position: absolute; transition: all 0.7s 0.3s cubic-bezier(0.5, 0.005, 0.075, 0.985), transform 0.1s 0.7s, -webkit-transform 0.1s; left: 92px; -webkit-transform: scale(1.8); transform: scale(1.8); top: 130px; background-size: 1920px !important; background: url(http://repo.bfw.wiki/bfwrepo/image/gt.png); -webkit-animation: guitar2 0.5s 0s steps(23, end) forwards; animation: guitar2 0.5s 0s steps(23, end) forwards; } @-webkit-keyframes guitar { 0% { background-position: 0 0; -webkit-transform: scale(1.8); transform: scale(1.8); } 10% { -webkit-transform: scale(1.8); transform: scale(1.8); } 100% { background-position: -1840px 0; -webkit-transform: scale(1.8); transform: scale(1.8); } } @keyframes guitar { 0% { background-position: 0 0; -webkit-transform: scale(1.8); transform: scale(1.8); } 10% { -webkit-transform: scale(1.8); transform: scale(1.8); } 100% { background-position: -1840px 0; -webkit-transform: scale(1.8); transform: scale(1.8); } } @-webkit-keyframes guitar2 { 0% { background-position: -1840px 0; -webkit-transform: scale(1.8); transform: scale(1.8); } 10% { -webkit-transform: scale(1.8); transform: scale(1.8); } 100% { background-position: 0 0; -webkit-transform: scale(1.8); transform: scale(1.8); } } @keyframes guitar2 { 0% { background-position: -1840px 0; -webkit-transform: scale(1.8); transform: scale(1.8); } 10% { -webkit-transform: scale(1.8); transform: scale(1.8); } 100% { background-position: 0 0; -webkit-transform: scale(1.8); transform: scale(1.8); } } body .phone { opacity: 0; -webkit-animation: in 1s .5s forwards; animation: in 1s .5s forwards; width: 245px; height: 489px; -webkit-perspective: 900; perspective: 900; border-radius: 24px; overflow: hidden; border-radius: 40px; box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.3); -webkit-box-reflect: below 4px linear-gradient(to top, white -120%, rgba(255, 255, 255, 0) 25%); } body .phone.open .guitar { -webkit-animation: guitar 0.5s 0s steps(23, end) forwards; animation: guitar 0.5s 0s steps(23, end) forwards; } body .phone.open .phone_inner__nav { left: 170px; } body .phone.open .phone_inner__nav h3 { opacity: 0; } body .phone.open .phone_inner__cube { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); left: 50px; } body .phone.open .phone_inner__cube h2 { opacity: 0; -webkit-transform: translateZ(50px); transform: translateZ(50px); } body .phone_frame { width: 245px; height: 489px; position: absolute; z-index: 2; background: url("http://repo.bfw.wiki/bfwrepo/image/frameIphone.png"); pointer-events: none; } body .phone_inner { width: 225px; height: 475px; position: relative; left: 10px; top: 6px; overflow: hidden; -webkit-transform-style: preserve-3D; transform-style: preserve-3D; background: #ada59c; } body .phone_inner__nav { position: absolute; z-index: 2; text-transform: uppercase; text-align: center; width: 100%; font-weight: 400; transition: all 0.5s cubic-bezier(0.615, 0, 0.28, 1.005); top: 39px; left: 0; } body .phone_inner__nav h3 { margin: 0; font-size: 9px; opacity: 1; transition: all 0.5s cubic-bezier(0.615, 0, 0.28, 1.005); } body .phone_inner__nav .menu { width: 18px; height: 2px; background: #111114; position: absolute; left: 16px; } body .phone_inner__nav .menu:after { content: ''; display: block; position: relative; top: 2px; width: 18px; height: 2px; background: #111114; } body .phone_inner__nav .menu:before { content: ''; display: block; position: relative; top: 9px; width: 10px; height: 2px; background: #111114; } body .phone_inner__cube { -webkit-transform-style: preserve-3D; transform-style: preserve-3D; height: 100%; position: relative; left: 0; transition: all 0.509s cubic-bezier(0.615, 0, 0.28, 1.005); } body .phone_inner__cube .shadow img { position: absolute; width: 210px; top: 90px; left: 20px; } body .phone_inner__cube h1 { text-transform: uppercase; margin: 0; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; position: absolute; line-height: 0; left: 47px; letter-spacing: 3px; top: 92px; color: #c6bdad; font-size: 55px; text-shadow: 0 0 1px #bdb5ad; -webkit-transform-style: preserve-3D; transform-style: preserve-3D; } body .phone_inner__cube h1:nth-of-type(1) { -webkit-transform: rotate(90deg) translateZ(-0.9583333333px); transform: rotate(90deg) translateZ(-0.9583333333px); } body .phone_inner__cube h1:nth-of-type(2) { -webkit-transform: rotate(90deg) translateZ(-0.9166666667px); transform: rotate(90deg) translateZ(-0.9166666667px); } body .phone_inner__cube h1:nth-of-type(3) { -webkit-transform: rotate(90deg) translateZ(-0.875px); transform: rotate(90deg) translateZ(-0.875px); } body .phone_inner__cube h1:nth-of-type(4) { -webkit-transform: rotate(90deg) translateZ(-0.8333333333px); transform: rotate(90deg) translateZ(-0.8333333333px); } body .phone_inner__cube h1:nth-of-type(5) { -webkit-transform: rotate(90deg) translateZ(-0.7916666667px); transform: rotate(90deg) translateZ(-0.7916666667px); } body .phone_inner__cube h1:nth-of-type(6) { -webkit-transform: rotate(90deg) translateZ(-0.75px); transform: rotate(90deg) translateZ(-0.75px); } body .phone_inner__cube h1:nth-of-type(7) { -webkit-transform: rotate(90deg) translateZ(-0.7083333333px); transform: rotate(90deg) translateZ(-0.7083333333px); } body .phone_inner__cube h1:nth-of-type(8) { -webkit-transform: rotate(90deg) translateZ(-0.6666666667px); transform: rotate(90deg) translateZ(-0.6666666667px); } body .phone_inner__cube h1:nth-of-type(9) { -webkit-transform: rotate(90deg) translateZ(-0.625px); transform: rotate(90deg) translateZ(-0.625px); } body .phone_inner__cube h1:nth-of-type(10) { -webkit-transform: rotate(90deg) translateZ(-0.5833333333px); transform: rotate(90deg) translateZ(-0.5833333333px); } body .phone_inner__cube h1:nth-of-type(11) { -webkit-transform: rotate(90deg) translateZ(-0.5416666667px); transform: rotate(90deg) translateZ(-0.5416666667px); } body .phone_inner__cube h1:nth-of-type(12) { -webkit-transform: rotate(90deg) translateZ(-0.5px); transform: rotate(90deg) translateZ(-0.5px); } body .phone_inner__cube h1:nth-of-type(13) { -webkit-transform: rotate(90deg) translateZ(-0.4583333333px); transform: rotate(90deg) translateZ(-0.4583333333px); } body .phone_inner__cube h1:nth-of-type(14) { -webkit-transform: rotate(90deg) translateZ(-0.4166666667px); transform: rotate(90deg) translateZ(-0.4166666667px); } body .phone_inner__cube h1:nth-of-type(15) { -webkit-transform: rotate(90deg) translateZ(-0.375px); transform: rotate(90deg) translateZ(-0.375px); } body .phone_inner__cube h1:nth-of-type(16) { -webkit-transform: rotate(90deg) translateZ(-0.3333333333px); transform: rotate(90deg) translateZ(-0.3333333333px); } body .phone_inner__cube h1:nth-of-type(17) { -webkit-transform: rotate(90deg) translateZ(-0.2916666667px); transform: rotate(90deg) translateZ(-0.2916666667px); } body .phone_inner__cube h1:nth-of-type(18) { -webkit-transform: rotate(90deg) translateZ(-0.25px); transform: rotate(90deg) translateZ(-0.25px); } body .phone_inner__cube h1:nth-of-type(19) { -webkit-transform: rotate(90deg) translateZ(-0.2083333333px); transform: rotate(90deg) translateZ(-0.2083333333px); } body .phone_inner__cube h1:nth-of-type(20) { -webkit-transform: rotate(90deg) translateZ(-0.1666666667px); transform: rotate(90deg) translateZ(-0.1666666667px); } body .phone_inner__cube h1:nth-of-type(21) { -webkit-transform: rotate(90deg) translateZ(-0.125px); transform: rotate(90deg) translateZ(-0.125px); } body .phone_inner__cube h1:nth-of-type(22) { -webkit-transform: rotate(90deg) translateZ(-0.0833333333px); transform: rotate(90deg) translateZ(-0.0833333333px); } body .phone_inner__cube h1:nth-of-type(23) { -webkit-transform: rotate(90deg) translateZ(-0.0416666667px); transform: rotate(90deg) translateZ(-0.0416666667px); } body .phone_inner__cube h1:nth-of-type(24) { -webkit-transform: rotate(90deg) translateZ(0px); transform: rotate(90deg) translateZ(0px); } body .phone_inner__cube h1:nth-of-type(25) { -webkit-transform: rotate(90deg) translateZ(0.0416666667px); transform: rotate(90deg) translateZ(0.0416666667px); } body .phone_inner__cube h1:nth-of-type(26) { -webkit-transform: rotate(90deg) translateZ(0.0833333333px); transform: rotate(90deg) translateZ(0.0833333333px); } body .phone_inner__cube h1:nth-of-type(27) { -webkit-transform: rotate(90deg) translateZ(0.125px); transform: rotate(90deg) translateZ(0.125px); } body .phone_inner__cube h1:nth-of-type(28) { -webkit-transform: rotate(90deg) translateZ(0.1666666667px); transform: rotate(90deg) translateZ(0.1666666667px); } body .phone_inner__cube h1:nth-of-type(29) { -webkit-transform: rotate(90deg) translateZ(0.2083333333px); transform: rotate(90deg) translateZ(0.2083333333px); } body .phone_inner__cube h1:nth-of-type(30) { -webkit-transform: rotate(90deg) translateZ(0.25px); transform: rotate(90deg) translateZ(0.25px); } body .phone_inner__cube h1:nth-of-type(31) { -webkit-transform: rotate(90deg) translateZ(0.2916666667px); transform: rotate(90deg) translateZ(0.2916666667px); } body .phone_inner__cube h1:nth-of-type(32) { -webkit-transform: rotate(90deg) translateZ(0.3333333333px); transform: rotate(90deg) translateZ(0.3333333333px); } body .phone_inner__cube h1:nth-of-type(33) { -webkit-transform: rotate(90deg) translateZ(0.375px); transform: rotate(90deg) translateZ(0.375px); } body .phone_inner__cube h1:nth-of-type(34) { -webkit-transform: rotate(90deg) translateZ(0.4166666667px); transform: rotate(90deg) translateZ(0.4166666667px); } body .phone_inner__cube h1:nth-of-type(35) { -webkit-transform: rotate(90deg) translateZ(0.4583333333px); transform: rotate(90deg) translateZ(0.4583333333px); } body .phone_inner__cube h1:nth-of-type(36) { -webkit-transform: rotate(90deg) translateZ(0.5px); transform: rotate(90deg) translateZ(0.5px); } body .phone_inner__cube h1:nth-of-type(37) { -webkit-transform: rotate(90deg) translateZ(0.5416666667px); transform: rotate(90deg) translateZ(0.5416666667px); } body .phone_inner__cube h1:nth-of-type(38) { -webkit-transform: rotate(90deg) translateZ(0.5833333333px); transform: rotate(90deg) translateZ(0.5833333333px); } body .phone_inner__cube h1:nth-of-type(39) { -webkit-transform: rotate(90deg) translateZ(0.625px); transform: rotate(90deg) translateZ(0.625px); } body .phone_inner__cube h1:nth-of-type(40) { -webkit-transform: rotate(90deg) translateZ(0.6666666667px); transform: rotate(90deg) translateZ(0.6666666667px); } body .phone_inner__cube h1:nth-of-type(41) { -webkit-transform: rotate(90deg) translateZ(0.7083333333px); transform: rotate(90deg) translateZ(0.7083333333px); } body .phone_inner__cube h1:nth-of-type(42) { -webkit-transform: rotate(90deg) translateZ(0.75px); transform: rotate(90deg) translateZ(0.75px); } body .phone_inner__cube h1:nth-of-type(43) { -webkit-transform: rotate(90deg) translateZ(0.7916666667px); transform: rotate(90deg) translateZ(0.7916666667px); } body .phone_inner__cube h1:nth-of-type(44) { -webkit-transform: rotate(90deg) translateZ(0.8333333333px); transform: rotate(90deg) translateZ(0.8333333333px); } body .phone_inner__cube h1:nth-of-type(45) { -webkit-transform: rotate(90deg) translateZ(0.875px); transform: rotate(90deg) translateZ(0.875px); } body .phone_inner__cube h1:nth-of-type(46) { -webkit-transform: rotate(90deg) translateZ(0.9166666667px); transform: rotate(90deg) translateZ(0.9166666667px); } body .phone_inner__cube h1:nth-of-type(47) { -webkit-transform: rotate(90deg) translateZ(0.9583333333px); transform: rotate(90deg) translateZ(0.9583333333px); } body .phone_inner__cube h1:nth-of-type(48) { -webkit-transform: rotate(90deg) translateZ(1px); transform: rotate(90deg) translateZ(1px); } body .phone_inner__cube h1:nth-of-type(49) { -webkit-transform: rotate(90deg) translateZ(1.0416666667px); transform: rotate(90deg) translateZ(1.0416666667px); } body .phone_inner__cube h1:nth-of-type(50) { -webkit-transform: rotate(90deg) translateZ(1.0833333333px); transform: rotate(90deg) translateZ(1.0833333333px); } body .phone_inner__cube h1:nth-of-type(51) { -webkit-transform: rotate(90deg) translateZ(1.125px); transform: rotate(90deg) translateZ(1.125px); } body .phone_inner__cube h1:nth-of-type(52) { -webkit-transform: rotate(90deg) translateZ(1.1666666667px); transform: rotate(90deg) translateZ(1.1666666667px); } body .phone_inner__cube h1:nth-of-type(53) { -webkit-transform: rotate(90deg) translateZ(1.2083333333px); transform: rotate(90deg) translateZ(1.2083333333px); } body .phone_inner__cube h1:nth-of-type(54) { -webkit-transform: rotate(90deg) translateZ(1.25px); transform: rotate(90deg) translateZ(1.25px); } body .phone_inner__cube h1:nth-of-type(55) { -webkit-transform: rotate(90deg) translateZ(1.2916666667px); transform: rotate(90deg) translateZ(1.2916666667px); } body .phone_inner__cube h1:nth-of-type(56) { -webkit-transform: rotate(90deg) translateZ(1.3333333333px); transform: rotate(90deg) translateZ(1.3333333333px); } body .phone_inner__cube h1:nth-of-type(57) { -webkit-transform: rotate(90deg) translateZ(1.375px); transform: rotate(90deg) translateZ(1.375px); } body .phone_inner__cube h1:nth-of-type(58) { -webkit-transform: rotate(90deg) translateZ(1.4166666667px); transform: rotate(90deg) translateZ(1.4166666667px); } body .phone_inner__cube h1:nth-of-type(59) { -webkit-transform: rotate(90deg) translateZ(1.4583333333px); transform: rotate(90deg) translateZ(1.4583333333px); } body .phone_inner__cube h1:nth-of-type(60) { -webkit-transform: rotate(90deg) translateZ(1.5px); transform: rotate(90deg) translateZ(1.5px); } body .phone_inner__cube h1:nth-of-type(61) { -webkit-transform: rotate(90deg) translateZ(1.5416666667px); transform: rotate(90deg) translateZ(1.5416666667px); } body .phone_inner__cube h1:nth-of-type(62) { -webkit-transform: rotate(90deg) translateZ(1.5833333333px); transform: rotate(90deg) translateZ(1.5833333333px); } body .phone_inner__cube h1:nth-of-type(63) { -webkit-transform: rotate(90deg) translateZ(1.625px); transform: rotate(90deg) translateZ(1.625px); } body .phone_inner__cube h1:nth-of-type(64) { -webkit-transform: rotate(90deg) translateZ(1.6666666667px); transform: rotate(90deg) translateZ(1.6666666667px); } body .phone_inner__cube h1:nth-of-type(65) { -webkit-transform: rotate(90deg) translateZ(1.7083333333px); transform: rotate(90deg) translateZ(1.7083333333px); } body .phone_inner__cube h1:nth-of-type(66) { -webkit-transform: rotate(90deg) translateZ(1.75px); transform: rotate(90deg) translateZ(1.75px); } body .phone_inner__cube h1:nth-of-type(67) { -webkit-transform: rotate(90deg) translateZ(1.7916666667px); transform: rotate(90deg) translateZ(1.7916666667px); } body .phone_inner__cube h1:nth-of-type(68) { -webkit-transform: rotate(90deg) translateZ(1.8333333333px); transform: rotate(90deg) translateZ(1.8333333333px); } body .phone_inner__cube h1:nth-of-type(69) { -webkit-transform: rotate(90deg) translateZ(1.875px); transform: rotate(90deg) translateZ(1.875px); } body .phone_inner__cube h1:nth-of-type(70) { -webkit-transform: rotate(90deg) translateZ(1.9166666667px); transform: rotate(90deg) translateZ(1.9166666667px); } body .phone_inner__cube h1:nth-of-type(71) { -webkit-transform: rotate(90deg) translateZ(1.9583333333px); transform: rotate(90deg) translateZ(1.9583333333px); } body .phone_inner__cube h1:nth-of-type(72) { -webkit-transform: rotate(90deg) translateZ(2px); transform: rotate(90deg) translateZ(2px); } body .phone_inner__cube h1:nth-of-type(73) { -webkit-transform: rotate(90deg) translateZ(2.0416666667px); transform: rotate(90deg) translateZ(2.0416666667px); } body .phone_inner__cube h1:nth-of-type(74) { -webkit-transform: rotate(90deg) translateZ(2.0833333333px); transform: rotate(90deg) translateZ(2.0833333333px); } body .phone_inner__cube h1:nth-of-type(75) { -webkit-transform: rotate(90deg) translateZ(2.125px); transform: rotate(90deg) translateZ(2.125px); } body .phone_inner__cube h1:nth-of-type(76) { -webkit-transform: rotate(90deg) translateZ(2.1666666667px); transform: rotate(90deg) translateZ(2.1666666667px); } body .phone_inner__cube h1:nth-of-type(77) { -webkit-transform: rotate(90deg) translateZ(2.2083333333px); transform: rotate(90deg) translateZ(2.2083333333px); } body .phone_inner__cube h1:nth-of-type(78) { -webkit-transform: rotate(90deg) translateZ(2.25px); transform: rotate(90deg) translateZ(2.25px); } body .phone_inner__cube h1:nth-of-type(79) { -webkit-transform: rotate(90deg) translateZ(2.2916666667px); transform: rotate(90deg) translateZ(2.2916666667px); } body .phone_inner__cube h1:nth-of-type(80) { -webkit-transform: rotate(90deg) translateZ(2.3333333333px); transform: rotate(90deg) translateZ(2.3333333333px); } body .phone_inner__cube h1:nth-of-type.........完整代码请登录后点击上方下载按钮下载查看
网友评论0