苹果手表子午线动画

直径方向的圆环以及围绕圆心轴线的圆周旋转动画

radial,watch

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2594
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var dataset = [
		{index:0,text:'stand',percentage:30},
		{index:1,text:'running',percentage:30},
		{index:2,text:'sitting',percentage:30}
			];

var ranDataset = function(){
		return 		[{index:0,text:'stand',icon:"\uF105",percentage:Math.random()*80+10},
		{index:1,text:'running',icon:"\uF101",percentage:Math.random()*80+10},
		{index:2,text:'sitting',icon:"\uF106",percentage:Math.random()*80+10}];

};

var colors = ["#d21691","#d7ff22","#0fffd7"];

var width = 500,
			height = 500,
			τ = 2 * Math.PI;

var arc = d3.svg.arc()
			.startAngle(0)
			.endAngle(function(d) { return d.percentage/100 * τ; })
			.innerRadius(function(d,i){return 160 - d.index*55})
			.outerRadius(function(d,i){return 200 - d.index*55})
			.cornerRadius(20);

var background =  d3.svg.arc()
			.startAngle(0)
			.endAngle(τ)
			.innerRadius(function(d,i){return 160 - d.index*55})
			.outerRadius(function(d,i){return 200 - d.index*55});

var svg = d3.select("body").append("svg")
			.attr("width", width)
			.attr("height", height)
			.append("g")
			.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var defs = svg.append("defs");

var filter = defs.append("filter")
			.attr("id", "dropshadow")

filter.append("feGaussianBlur")
			.attr("in", "SourceAlpha")
			.attr("stdDeviation", 4)
			.attr("result", "blur");
	filter.append("feOffset")
			.attr("in", "blur")
			.attr("dx", 1)
			.attr("dy", 1)
			.attr("result", "offsetBlur");

var feMerge = filter.append("feMerge");

feMerge.append("feMergeNode")
			.attr("in", "offsetBlur");
	feMerge.append("feMergeNode")
			.attr("in", "SourceGraphic");

var field = svg.selectAll("g")
			.data(dataset)
			.enter().append("g");

field.append("path").attr("class", "progress") .attr("filter", "url(#dropshadow)");

field.append("path").attr("class", "bg")
	.style("fill",  function(d) { return colors[d.index]; })
			.style("opacity",0.3)
			.attr("d", background);

field.append("text");

d3.transition().duration(1750).each(update);

function update(){
		field = field
				.each(function(d) { this._value = d.percentage; })
				.data( ranDataset)
				.each(function(d) { d.previousValue = this._value; });

field.select("path.progress").transition().duration(1750)
				.ease("elastic")
				.attrTween("d", arcTween)
				.style("fill", function(d) { return colors[d.index]; });

field.select("text").style('font-family','FontAwesome').style('font-size',"30px").text(function(d){return d.icon;}).attr("transform", function(d) {
			return "translate(10," + -(170 - d.index*55) + ")"

});

setTimeout(update, 2000);

}

function arcTween(d) {
		var i = d3.interpolateNumber(d.previousValue, d.percentage);
		return function(t) { d.percentage = i(t); return arc(d); };
	}

编译

CSS

HTML

直径方向的圆环以及围绕圆心轴线的圆周旋转动画

radial,watch

编辑器支持Emmet

快捷键

直径方向的圆环以及围绕圆心轴线的圆周旋转动画

radial,watch

用于可穿戴设备（手表 | 腕表）上的迷你消息通知卡界面设计

html5版本的土豪金劳力士表（Rolex）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：