css绘制鸡蛋效果
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> html { height: 100%; } body { background: radial-gradient(#CCC, #222); display: flex; align-items: center; justify-content: center; height: 100%; overflow: hidden; } .title { position: fixed; left: 0; right: 0; bottom: 50%; margin-bottom: 14vw; text-align: center; font-weight: 100; font-size: 3vw; color: #FFF; opacity: 0.25; } .egg-wrapper + .title::before { content: "css egg"; } .egg-wrapper + .egg-wrapper + .title::before { content: "css eggs"; } input { position: fixed; z-index: 1; bottom: 50%; width: 15vw; height: 20vw; cursor: pointer; opacity: 0; margin-bottom: -10vw; } .stage { position: absolute; z-index: -2; width: 100vw; height: 150vw; perspective: 50vw; transition: filter 2s; } .stage .light { width: 100%; height: 100%; background: #FFF; border-radius: 50%; transform: rotateX(80deg); } .egg-wrapper { position: relative; width: 15vw; height: 20vw; margin: 0 0.3vw; border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; } .egg-wrapper:not(.rotate) { animation-name: move; animation-duration: 3s; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } .egg-wrapper.rotate { transform: scale(1, -1); z-index: -1; opacity: 1; margin-top: -1vw; opacity: 0.25; -webkit-mask-image: linear-gradient(tobottom, rgba(0, 0, 0, 0) 0%, black 100%); } .egg-wrapper .egg { position: relative; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; background: #DDD; transform: translate3d(0, 0, 0) rotate(0deg); transform-origin: center 60% !important; animation-name: wobble; animation-duration: 3s; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } .egg-wrapper .egg .fill { position: absolute; left: -12%; top: -10%; width: 130%; height: 124%; border-radius: inherit; box-shadow: inset 0 0 0 2.5vw #FFF; opacity: 0.4; transition: filter 2s; } .egg-wrapper .egg .shading { position: absolute; left: 10%; top: 27%; width: 60%; height: 85%; background: #000; border-radius: inherit; transform: rotate(-20deg); opacity: 0.25; transition-property: filter, opacity; transition-duration: 2s; } .egg-wrapper .egg .key { position: absolute; left: 55%; top: 5%; width: 35%; height: 55%; background: #F4F4F4; border-radius: inherit; transform: rotate(-20deg); transition-property: filter, background; transition-duration: 2s; } .egg-wrapper .egg .highlight { position: absolute; left: 70%; top: 5%; width: 20%; height: 30%; background: #FFF; border-radius: inherit; transform: rotate(-20deg); transition: filter 2s; } .egg-wrapper .egg .egg-shadow { position: absolute; right: -33%; top: 36%; width: 40%; height: 50%; border-radius: 50%; background: #000; opacity: 0.2; transition-property: filter, opacity; transition-duration: 2s; animation-name: move; animation-duration: 3s; animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-iteration-count: infinite; } .egg-wrapper .shadow { position: absolute; left: 8.6vw; top: 3.5vw; width: 100%; height: 100%; border-radius: inherit; perspective: 50vw; transition-property: filter, opacity; transition-duration: 2s; } .egg-wrapper .shadow .main { position: absolute; right: 0; width: 400%; height: 88%; border-radius: inherit; transform-origin: center bottom; transform: rotateX(90deg) rotateZ(90deg); opacity: 0.57; } .egg-wrapper .shadow .main::before { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; backgroun.........完整代码请登录后点击上方下载按钮下载查看
网友评论0