css布局奥运五环与圣火跟随鼠标视觉差异效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局奥运五环与圣火跟随鼠标视觉差异效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { display: grid; place-items: center; min-height: 100vh; text-align: center; background: linear-gradient( to bottom right, transparent 48%, LightSlateGray 48%, LightSlateGray 52%, transparent 52%), SlateGray; background-size:20px 20px; overflow: hidden; cursor: none; } .rings { max-width: 65vmin; filter: drop-shadow(0 -25px 15px rgba(0,0,0,.5)); } i { display: inline-block; width: 20vmin; height: 20vmin; border-radius: 50%; position: relative; border: 2vmin solid; box-sizing: border-box; margin-right: 1vmin; } i:nth-child(1) { border-color: dodgerblue; z-index: -1; } i:nth-child(1):before { content: ''; width: 100%; height: 100%; border-radius: inherit; position:absolute; left: 50%; top: 50%; border: 2vmin solid gold; z-index: 6; } i:nth-child(1):after { content: ''; width: 100%; height: 100%; border-radius: inherit; position:absolute; left: 0; top: 0; border-right: 2vmin solid dodgerblue; z-index: 6; } i:nth-child(2) { border-color: black; z-index: 2; } i:nth-child(2):before { content: ''; width: 100%; height: 100%; border-radius: inherit; position:absolute; left: 50%; top: 50%; border: 2vmin solid limegreen; z-index: 6; } i:nth-child(2):after { content: ''; width: 100%; height: 100%; border-radius: inherit; position:absolute; left: 0; top: 0; border-right: 2vmin solid black; z-index: 6; } i:nth-child(3) { border-color: red; z-index: -1; } i:nth-child(4) { border-color: gold transparent transparent transparent; z-index: 10; clip-path: polygon(52% 0%, 100% 0%, 52% 100%); transform: translate(-4%, -53%); } i:nth-child(5) { border-color: transparent transparent red transparent; z-index: 10; transform: translate(54%,-103%); } .torch { position: absolute; left:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0