div+css实现立体旋钮指针转动仪表温控器动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现立体旋钮指针转动仪表温控器动画效果代码
代码标签: div css 立体 旋钮 指针 转动 仪表 温控器 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::after, *::before { box-sizing: border-box; transform-style: preserve-3d; } body { perspective: 2000px; height: 100vh; width: 100vw; margin: 0; background: /*radial-gradient(circle at 50% 50%, #fff 0%, #7EC0EE 200%)*/ linear-gradient(to top, #6C7A88,#B3C7DD); overflow: hidden; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; font-family: 'Oswald'; font-weight: 300 } #container { width:370px; height:370px; background: linear-gradient( to bottom,#f1f1f1,#9d9e9f ); box-shadow: inset 0 3px 10px rgba(255,255,255,1), inset 0 -3px 10px rgba(0,0,0,0.25), 0 30px 40px rgba(0,0,0,0.5); border-radius:50%; z-index:2; opacity:1; } #container::after{ content:''; position:absolute; width:326px; height:326px; background: linear-gradient( to bottom,#879CAC,#DDE2E5 ); border-radius:50%; top:22px; left:22px; } #container::before{ content:''; position:absolute; z-index:3; background: linear-gradient( to bottom,#f1f1f1,#cfcfcf ); box-shadow: inset 0 3px 10px rgba(255,255,255,1), inset 0 -3px 10px rgba(0,0,0,0.25), 0 3px 10px rgba(0,0,0,0.25), 0 30px 40px rgba(0,0,0,0.35); border-radius:50%; width:130px; height:130px; top:50%; left:50%; transform: translate(-50%, -50%); } #inner{ position:absolute; top:50%; left:50%; width:312px; height:312px; border-radius:50%; transform: translate(-50%,-50%); background:#A8D0F3; box-shadow: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0