橙子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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0