js+css实现咖啡环形菜单旋转效果代码
代码语言:html
所属分类:其他
代码描述:js+css实现咖啡环形菜单旋转效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); *{ box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } body { display: flex; flex-direction: row; justify-content: center; align-items: center; margin: 0; font-family: Poppins; background: #cebca6; } @media screen and (max-height: 500px) { body > * { scale: 0.8 };} @media screen and (max-height: 430px) { body > * { scale: 0.7 } .options { translate: 259px 2px !important;} } .options { position: relative; width: 200px; display: flex; flex-direction: column; text-align: left; background: rgba(0,0,0, 0.04); padding: 12px; } .options > div { transition: all 0.1s ease-in-out; } .options > div:hover { background: rgba(255,255,255, 1); cursor: pointer; font-size: 22px; box-shadow: 0 0 2px 0px rgba(0,0,0,0.2), 0 0 3px 2px rgba(255, 255, 255, 0.1), 0 0 3px 0 rgba(0,0,0, 0.1); color: #462814be; } .options:hover > * { animation-play-state: paused; } .options { background: none; height: fit-content; position: absolute; left: 0; right: 0; top: 0; bottom: 0%; margin: auto; translate: 259px 12px; transform-origin: -157px 107%; rotate: -100deg; } @keyframes rotateC { 0% {rotate: 0deg;} 100% {rotate: 360deg;} } .options > div { --_speed: 4; color: #4628148e; position: absolute; border-radius: 4px; background-color: rgba(255,255,255, 0.2); transform-origin: -145px 50%; padding: 4px 12px 1px 22px; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ animation: rotateC calc(var(--_speed) * 36s) linear infinite; } .options > div:nth-child(1) { animation-delay: calc(var(--_speed) * -1s); } .options > div:nth-child(2) { animation-delay: calc(var(--_speed) * -2s); } .options > div:nth-child(3) { animation-delay: calc(var(--_speed) * -3s); } .options > div:nth-child(4) { animation-delay: calc(var(--_speed) * -4s); } .options > div:nth-child(5) { animation-delay: calc(var(--_speed) * -5s); } .options > div:nth-child(6) { animation-delay: calc(var(--_speed) * -6s); } .options > div:nth-child(7) { animation-delay: calc(var(--_speed) * -7s); } .options > div:nth-child(8) { animation-delay: calc(var(--_speed) * -8s); } .options > div:nth-child(9) { animation-delay: calc(var(--_speed) * -9s); } .options > div:nth-child(10) { animation-delay: calc(var(--_speed) * -10s); } .options > div:nth-child(11) { animation-delay: calc(var(--_speed) * -11s); } .options > div:nth-child(12) { animation-delay: calc(var(--_speed) * -12s); } .options > div:nth-child(13) { animation-delay: calc(var(--_speed) * -13s); } .options > div:nth-child(14) { animation-delay: calc(var(--_speed) * -14s); } .options > div:nth-child(15) { animation-delay: calc(var(--_speed) * -15s); } .options > div:nth-child(16) { animation-delay: calc(var(--_speed) * -16s); } .options > div:nth-child(17) { animation-delay: calc(var(--_speed) * -17s); } .options > div:nth-child(18) { animation-delay: calc(var(--_speed) * -18s); } .options > div:nth-child(19) { animation-delay: calc(var(--_speed) * -19s); } .options > div:nth-child(20) { animation-delay: calc(var(--_speed) * -20s); } .options > div:nth-child(21) { animation-delay: calc(var(--_speed) * -21s); } .options > div:nth-child(22) { animation-delay: calc(var(--_speed) * -22s); } .options > div:nth-child(23) { animation-delay: calc(var(--_speed) * -23s); } .options > div:nth-child(24) { animation-delay: calc(var(--_speed) * -24s); } .options > div:nth-child(25) { animation-delay: calc(var(--_speed) * -25s); } .options > div:nth-child(26) { animation-delay: calc(var(--_speed) * -26s); } .options > div:nth-child(27) { animation-delay: calc(var(--_speed) * -27s); } .options > div:nth-child(28) { animation-delay: calc(var(--_speed) * -28s); } .options > div:nth-child(29) { animation-delay: calc(var(--_speed) * -29s); } .options > div:nth-child(30) { animation-delay: calc(var(--_speed) * -30s); } .options > div:nth-child(31) { animation-delay: calc(var(--_speed) * -31s); } .options > div:nth-child(32) { animation-delay: calc(var(--_speed) * -32s); } .options > div:nth-child(33) { animation-delay: calc(var(--_speed) * -33s); } .options > div:nth-child(34) { animation-delay: calc(var(--_speed) * -34s); } .options > div:nth-child(35) { animation-delay: calc(var(--_speed) * -35s); } .wrapper { position: relative; width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: #9b8c83; background: repeating-linear-gradient( 45deg, #9c7154, #ffdfca 8px, #fff0 8px, #fff0 25px ), repeating-linear-gradient( -45deg, #7a5943, #ffcaa6 8px, #fff0 8px, #fff0 25px ); background-color: #533723; box-shadow: 0 0 1px 1px #7a665a, 0 0 4px 2px #9b8c83, inset 0 -630px 20px -500px #c59473, inset 0 -680px 40px -500px #9c7154, inset 0 -700px 0 -500px #775843; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .shadow { position: absolute; top: 69.7%; left: 12%; width: 55%; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 100px rgba(0,0,0, 0.05); background: repeating-linear-gradient( -45deg, #0002, #0002 1px, #0000 1px, #0000 3px), repeating-linear-gradient( 45deg, #0002, #0002 1px, #0000 1px, #0000 3px ); } .title { height: fit-content; width: fit-content; position: absolute; left: 0; right: 0; bottom:7%; margin: auto; display: flex; color: rgb(255, 255, 255); text-align: center; font-size: 20px; text-shadow: 0 0 3px rgba(255,255,255, 0.5), 0 0px 1px rgba(0,0,0, 0.7); } .cup { width: 160px; height: 162px; position: relative; } .contents { height: 100%; display: flex; flex-direction: column; justify-content: end; background: rgba(247, 247, 247, 0.9); clip-path: path('m 0 0 q 4.59 145.8 34.425 155.52 c 29.835 8.1 68.85 8.1 96.39 0 q 29.835 -9.72 29.835 -155.52 C 143 11 16 13 0 0 Z'); } .contents::before { content: ''; display: block; position: absolute; width: 100%; height: 100%; z-index: 1000; box-shadow: inset -18px 0px 4px -10px rgba(255,255,255, 0.7), inset 42px -22px 12px -10px rgba(0,0,0, 0.03), inset 0 -22px 12px -10px rgba(0,0,0, 0.2), inset 20px 0 10px -10px rgba(0,0,0, 0.2); } .cup::before { content: ''; display: block; position: absolute; z-index: 2; top: -10px; width: 100%; height: 20px; background: linear-gradient(63deg, rgba(253, 253, 253, 0.7) 9%, rgba(238, 238, 238, 0.7) 100%); border-radius: 50%; box-shadow: 0 1px 2px 0px rgba(0,0,0, 0.05), inset 0 0 1px 2px rgba(0,0,0, 0.05); } .cup::after { content: ''; background: #fff; width: 0%; height: 0%; scale: 1.15 0.7; transform-origin: 0% 0%; z-index: 1; position: absolute; top: 0; } .contents :is(.foam, .cream, .steamed-milk, .milk, .chocolate, .sugar, .whiskey, .water, .gelato, .espresso, .coffee) { width: 100%; height: 0px; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 50% / 20%; font-size: 12px; transition: all 1s ease-in-out; opacity: 0.94; position: relative; margin-top: 0; padding-top: 0; color: rgba(0,0,0, 0); margin: 0 auto; } .contents :is(.foam, .cream, .steamed-milk, .milk, .chocolate, .sugar, .whiskey, .water, .espresso, .coffee)::before { content: ''; display: block; width: 100%; height: 26px; border-radius: 50%; position: absolute; top: -10%; transition: all 1s ease-in-out; opacity: 0.1; background: white; z-index: inherit; } .contents :is(.foam, .cream, .steamed-milk, .milk)::before { background: rgb(141, 141, 141); } .contents .foam { background: #ffffff; z-index: 12;} .contents .cream { background: #fffbe7; z-index: 11;} .contents .steamed-milk { background: #fffcf8; z-index: 10;} .contents .milk { background: #f8f2e8; z-index: 9;} .contents .chocolate { background: #47260a; z-index: 8;} .contents .sugar { background: #ffffff; z-index: 7;} .contents .whiskey {background: rgba(207, 129, 39, 0.8); color: #fff; z-index: 6;} .contents .water { background: #e5f7ff; z-index: 5;} .contents .coffee { background: #5a341a; z-index: 4;} .contents .gelato { background: #fcf9ea; z-index: 4;} .contents .espresso { background: #462814; z-index: 3;} .contents .espresso span { display: none;} /* Black Coffee */ .black .coffee { height: 90%; border-radius: 50% / 10%; padding-top: 0px; color: rgba(255,255,255, 1); } .black .coffee::before { opacity: 0.1; background: white; top: 0%; } /* Latte */ .latte.........完整代码请登录后点击上方下载按钮下载查看
网友评论0