一个div与css布局实现仪表盘指针转动效果代码
代码语言:html
所属分类:布局界面
代码描述:一个div与css布局实现仪表盘指针转动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> div { border: 20px solid #555555; box-shadow: inset 0 0 8px 1px rgba(0, 0, 0, .5); width: 300px; height: 150px; background-image: radial-gradient(circle at center 110%, #333333, #333333 20%, transparent 20%), radial-gradient(ellipse at center bottom, #f9eb97, #fffadd); position: relative; overflow: hidden; } div::before { content: ""; position: absolute; width: 100%; height: 70%; background-image: repeating-conic-gradient(from -60deg at center 143%, #333333 0deg 1deg, transparent 1deg 20deg), conic-gradient(from 20deg at center 143%, #ee0000 40deg, transparent 40deg); --mask: radial-gradient(circle 320px at center 290%, transparent, transparent 81%, #fff 81% 85%, transparent 85%, transparent); mask: var(--mask); -webkit-mask: var(--mask); } div::after { content: ""; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0