css实现仪表盘指针转动摇摆动画效果代码-html代码-BFW代码库

css实现仪表盘指针转动摇摆动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现仪表盘指针转动摇摆动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body{
        	background:steelblue;
        }
        .gauge{
        	background: radial-gradient(circle at 30% 40%, #fff, #fff 20%, #ccc 50%);
        	border:4px solid #555;
        	border-radius:999px 999px 0 0;
        	box-shadow: inset 3px 3px 15px rgba(0,0,0,0.8);
        	box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
        	height:100px;
        	left:50%;
        	overflow:hidden;
        	position:absolute;
        	top:50%;
        	transform:translate(-50%, -50%);
        	width:200px;
        }
        .gauge:before{
        	content:'';
        	position:absolute;
        	height:140%;
        	width:70%;
        	box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
        	border-radius:50%;
        	border:4px solid #222;
        	bottom:-80%;
        	left:50%;
        	transform:.........完整代码请登录后点击上方下载按钮下载查看