点餐大转盘效果
代码语言:html
所属分类:大转盘
代码描述:点餐大转盘效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *{ box-sizing: border-box; padding: 0; margin: 0; outline: none; } body{ font-family: 'Roboto Condensed', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; background: #e4f2f0; background-size: cover; } .main{ position: relative; width: 500px; height: 500px; } .main:after{ position: absolute; content: ''; width: 32px; height: 32px; background: url('http://nicoles.dev/images/arrow.png') no-repeat; background-size: 32px; right: -30px; top: 50%; transform: translateY(-50%); } .box{ width: 100%; height: 100%; position: relative; border-radius: 50%; border: 9px solid black; overflow: hidden; transition: all ease 3s; } span{ width: 50%; height: 50%; display: inline-block; position: absolute; } .span1{ clip-path: polygon(0 92%, 100% 50%, 0 8%); background-color: #618d87; top: 120px; left: 0; } .span2{ clip-path: polygon(100% 92%, 0 50%, 100% 8%); background-color: rgb(90, 90, 90); top: 120px; right: 0; } .span3{ clip-path: polygon(50% 0%, 8% 100%, 92% 100%); background-color: #70416d; bottom: 0; left: 120px; } .span4{ clip-path: polygon(50% 100%, 92% 0, 8% 0); background-color: #170a19; top: 0; left: 120px; } .box2{ width: 100%; height: 100%; transform: rotate(-135deg); } span b{ font-family: 'Roboto Condensed', sans-serif; width: 65px; height: 65px; line-height: 20px; color: rgb(228, 226, 226); font-size: 18px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .spin{ font-family: 'Roboto Condensed', sans-serif; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 75px; height: 75px; border-radius: 50%; border: 2px solid black; background-color: rgb(46, 77, 77); color: #f.........完整代码请登录后点击上方下载按钮下载查看
网友评论0