橙子css特效
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>橙子css特效</title> <style> .center { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background: blue; z-index: 100; transform: translate(-50%, -50%); } .title { position: absolute; font-family: 'Major Mono Display', monospace; color: #ff9810; top: 16px; left: 16px; font-size: 22px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-spacing: -5px; } .title::before { content: ''; position: absolute; top: 32px; opacity: 0.25; left: 0px; height: 3px; width: 87px; background: #ff9810; } .scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse atcenter,#a90329 0%, #8f0222 44%, #6d0019 100%); } .shadow { position: absolute; top: calc(60% + (200px/2) - (200px/7)); left: calc(50% + 20px - (200px/2)); width: 200px; height: 50px; background: radial-gradient(ellipse atcenter,rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 55%); } .shadow--2 { animation-delay: -180ms; width: 166.6666666667px; height: 41.6666666667; top: calc(60% + (200px/2) - (200px/7) - 50px); left: calc(50% + 20px - (200px/2) + 150px); } .shadow--3 { top: calc(60% + (200px/2) - (200px/7) - 30px); left: calc(50% + 20px - (200px/2) - 160px); } .dimple-holder { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100%; } .dimples { background: repeating-linear-gradient(0.25turn, transparent 0px, #ff9810 4px, #ff9810 10px), repeating-linear-gradient(transparent 0px, transparent 9px, #905200 10px); position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100%; } .dimples + .dimples { top: 5px; left: 5px; opacity: 0.5; } .inner-shadow { width: 120%; height: 120%; position: absolute; right: 0; bottom: 0; background: radial-gradient(ellipse atcenter,rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.65) 100%); } .orange { width: 200px; height: 200px; border-radius: 100%; background: #ff9810; position: absolute; top: calc(60% - (200px/2)); left: calc(50% - (200px/2)); } .orange--2 { width: 166.6666666667px; height: 166.6666666667px; top: calc(60% - (200px/2) - 20px); left: calc(50% - (200px/2) + 150px); animation-delay: -180ms; } .orange--2 .stem { transform: rotate(22deg); right: 24px; top: 48px; } .orange--2 .glow { top: 25px; left: 20px; } .half-orange { position: absolute; top: calc(60% - 135px); left: calc(50% - 275px); width: 200px; height: 200px; transform: rotate(-45deg); } .half-orange .peel-outer { margin-top: 100px; overflow: hidden; height: 100px; position: relative; } .half-orange .peel-outer .dimple-holder { top: -100%; height: 200%; transform: rotate(35deg); } .half-orange .peel { margin-top: -100px; background: #ff9810; width: 200px; height: 200px; border-radius: 0 0 100% 100%; } .half-orange .rind { position: absolute; top: 33.33%; left: 0; right: 0; border-radius: 100%; background: #ff9810; height: 66.6666666667px; } .half-orange .rind-inner { position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; border-radius: 100%; background: #FFE4B7; } .half-orange .juicy { position: absolute; top: 4px; left: 7px; right: 9px; bottom: 7px; border-radius: 100%; background: #ff9810; overflow: hidden; } .half-orange .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 7px; background: #FFE4B7; border-radius: 100%; } .half-orange .line { position: absolute; left: 0; top: 50%; opacity: 0.5; right: 0; height: 1px; background: #FFE4B7; } .half-orange .line:nth-of-type(2) { left: 50%; top: 0; bottom: 0; right: auto; width: 1px; height: auto; } .half-orange .line:nth-of-type(3) { transform: rotate(20deg); } .half-orange .line:nth-of-type(4) { transform: rotate(-20deg); } .half-orange .drip { position: absolute; left: -2px; top: 48%; width: 5px; height: 10px; background: #ff9810; border-radius: 100%; transform: rotate(45deg); animation-name: drip; animation-duration: 1.7s; animation-iteration-count: infinite; animation-timing-function: ease-in; } .glow { position: absolute; background: radial-gradient(ellipse atcenter,rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%); width: 70px; height: 80px; top: 35px; left: 25px; border-radius: 100%; } .stem { position: absolute; top: 28px; right: 42px; } .stem__base { position: absolute; right: 1px; top: 0px; background: #757e25; width: 18px; height: 18px; transform: rotate(25deg); border-radius: 5px 10px 1px 10px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4); } .s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0