Question

我有一个迷你游戏，用户需要60秒才能解决。为了指示剩余时间，我使用一个将从60开始并每秒下降1直到达到0的数字。该数字将在带有边框的透明圆形div内：

.circle {
  width: 100px;
  height: 100px;
  border: 3px solid #2F4491;
  border-radius: 100%;
}

我正在尝试使边框与剩余时间成比例地消失：边框在开始时将完全可见（剩余60s），当用户仅剩下30s时仅在左侧可见，依此类推。 / p>

关于如何实现这一目标的任何想法？

Answer 1

尝试一下。

var time = 60;
var initialOffset = '440';
var i = 1

/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));

var interval = setInterval(function() {
		$('h2').text(i);
		if (i == time) {  	
      clearInterval(interval);
			return;
    }
    $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
    i++;  
}, 1000);

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
  transition: all 1s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
    <h2>0</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#78cef1" fill="none"/>
     </g>
    </svg>
</div>

Answer 2

当时间少于30秒时，将border-right-color和border-bottom-color设置为透明。另外，您将不得不将对象旋转-45deg，因此将其向右偏右和向左偏一半。

淡出时，对底部和顶部进行相同操作。

如何使半圆的边界透明

2 个答案: