Question

我想使用css应用类似于下图所示的效果。我试过但却无法获得闪亮或叠加弧形的东西？

非常友好地帮助：

enter image description here

我确实试过了，但无法应用下面提供的解决方案。

<!Doctype html>
<html>
<head>
    <title>JQ chart</title>
    <link rel="stylesheet" type="text/css" href="css/jquery.jqGauges.css">
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.jqGauges.min.js"></script>
<script lang="javascript" type="text/javascript">

        var values = { v1: 80 };

        $(document).ready(function () {

         var background = {
                type: 'linearGradient',
                x0: 1,
                y0: 1,
                x1: 1,
                y1: 0.5,
                colorStops: [{ offset: 0, color: '#C4C4C4' },
                             { offset:0.3,color:'black'}
                         ]
            };

            var gradient1 = {
                type: 'linearGradient',
                x0: 0,
                y0: 0.5,
                x1: 1,
                y1: 0.5,
                colorStops: [{ offset: 0, color: '#C5F80B' },
                             { offset: 1, color: '#6B8901'}]
            };

            var gradient2 = {
                type: 'linearGradient',
                x0: 0.5,
                y0: 0,

                x1: 0.5,
                y1: 1,
                colorStops: [{ offset: 0, color: '#FF3366' },
                             { offset: 1, color: '#B2183E'}]
            };

            var anchorGradient = {
                type: 'radialGradient',
                x0: 0.5,
                y0: 0.8,
                r0: 0,
                x1: 0.5,
                y1: 0.8,
                r1: 1,
                colorStops: [{ offset: 0, color: '#797981' },
                             { offset: 1, color: '#1C1D22'},
                             {offset:0.5, color:'#58575C'}
                            ]
            };

            $('#jqRadialGauge').jqRadialGauge({
                background: anchorGradient,
                border: {
                    lineWidth: 3,
                    strokeStyle: '#595959',
                    padding: 16,
                 },
                shadows: {
                    enabled: true
                },
                anchor: {
                    visible: true,
                    fillStyle: anchorGradient,
                    radius: 0.10
                },
                tooltips: {
                    disabled: true,
                    highlighting: false
                },
                 scales: [
                         {
                             minimum: 0,
                             maximum: 140,
                             startAngle: 140,
                             endAngle: 400,
                             majorTickMarks: {
                                 length: 7,
                                 lineWidth: 2,
                                 interval: 20,
                                 offset: 1,
                                 strokeStyle: '#B9BDC0'
                             },
                             minorTickMarks: {
                                 visible: false,
                                 length: 8,
                                 lineWidth: 2,
                                 interval: 2,
                                 offset: 0.84,
                                strokeStyle: 'white'
                             },
                             labels: {
                                visible:false,
                                 orientation: 'horizontal',
                                 interval: 10,
                                 offset: 1.00,
                                 strokeStyle:'white'
                             },
                             needles: [
                                        {
                                            value: values.v1,
                                            type: 'triangle',
                                            outerOffset: 1.5,
                                            mediumOffset: 0.7,
                                            width: 7,
                                            fillStyle: '#C01211'
                                        }
                          ]                      
                         }
                        ]
            });

            updateGauge();
        });

        function updateGauge() {

            $(values).animate({
                v1: Math.round(Math.random() * 100)
            },
            {
                duration: 600,
                step: function () {
                    var scales = $('#jqRadialGauge').jqLinearGauge('option', 'scales');

                    scales[0].needles[0].value = this.v1;

                    $('#jqRadialGauge').jqLinearGauge('update');
                },
                complete: function () {
                    setTimeout('updateGauge()', 400);
                }
            });
        }

    </script>

</head>
<body style="background-color:black;">
  <div>
        <div id="jqRadialGauge" style="width: 150px; height: 150px;">
        </div>
    </div>
</body>
</html>

Answer 1

你的意思是......

.shinyCircle{
  position:relative;
  overflow:hidden;
  background:#9F9F9F;
  width:200px;
  height:200px;
  border-radius:50%;
  border:5px solid #000;
}

.shinyCircle:after{
  position:absolute;
  content:"";
  background: -webkit-linear-gradient(top, #333, #ccc);
  background: -moz-linear-gradient(top, #333, #ccc);
  background: -ms-linear-gradient(top, #333, #ccc);
  background: linear-gradient(top, #333, #ccc);
  width:inherit;
  height:inherit;
  border-radius:inherit;
  top:30%;
}

<div class="shinyCircle"></div>

我确实想要使用带有斜角效果的css设计如下图所示的图像

1 个答案: