动画信标CSS

Question

有人知道有一种用纯CSS制作动画信标的方法吗，就像这里显示的：https://codepen.io/rjerue/pen/xagoJG

(function (lib, img, cjs, ss, an) {

var p;
lib.webFontTxtInst = {}; 
var loadedTypekitCount = 0;
var loadedGoogleCount = 0;
var gFontsUpdateCacheList = [];
var tFontsUpdateCacheList = [];
lib.ssMetadata = [];



lib.updateListCache = function (cacheList) {		
	for(var i = 0; i < cacheList.length; i++) {		
		if(cacheList[i].cacheCanvas)		
			cacheList[i].updateCache();		
	}		
};		

lib.addElementsToCache = function (textInst, cacheList) {		
	var cur = textInst;		
	while(cur != null && cur != exportRoot) {		
		if(cacheList.indexOf(cur) != -1)		
			break;		
		cur = cur.parent;		
	}		
	if(cur != exportRoot) {		
		var cur2 = textInst;		
		var index = cacheList.indexOf(cur);		
		while(cur2 != null && cur2 != cur) {		
			cacheList.splice(index, 0, cur2);		
			cur2 = cur2.parent;		
			index++;		
		}		
	}		
	else {		
		cur = textInst;		
		while(cur != null && cur != exportRoot) {		
			cacheList.push(cur);		
			cur = cur.parent;		
		}		
	}		
};		

lib.gfontAvailable = function(family, totalGoogleCount) {		
	lib.properties.webfonts[family] = true;		
	var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];		
	for(var f = 0; f < txtInst.length; ++f)		
		lib.addElementsToCache(txtInst[f], gFontsUpdateCacheList);		

	loadedGoogleCount++;		
	if(loadedGoogleCount == totalGoogleCount) {		
		lib.updateListCache(gFontsUpdateCacheList);		
	}		
};		

lib.tfontAvailable = function(family, totalTypekitCount) {		
	lib.properties.webfonts[family] = true;		
	var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];		
	for(var f = 0; f < txtInst.length; ++f)		
		lib.addElementsToCache(txtInst[f], tFontsUpdateCacheList);		

	loadedTypekitCount++;		
	if(loadedTypekitCount == totalTypekitCount) {		
		lib.updateListCache(tFontsUpdateCacheList);		
	}		
};
// symbols:



(lib._3 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#A72008").s().p("AipCqQhGhGAAhkQAAhiBGhHQBGhGBjAAQBkAABGBGQBGBHAABiQAABjhGBHQhGBGhkAAQhjAAhGhGgAiNiMQg6A6AABSQAABTA6A7QA7A6BSAAQBTAAA7g6QA6g7AAhTQAAhSg6g6Qg7g7hTAAQhSAAg7A7g");
	this.shape.setTransform(24,24);

	this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,48,48);


(lib._2 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#A72008").s().p("AhwBxQgvguAAhDQAAhBAvgvQAvgvBBAAQBCAAAvAvQAvAvAABBQAABDgvAuQgvAvhCAAQhBAAgvgvgAhUhTQgjAiAAAxQAAAyAjAjQAjAjAxAAQAxAAAkgjQAjgjAAgyQAAgxgjgiQgkgkgxAAQgxAAgjAkg");
	this.shape.setTransform(16,16);

	this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,32,32);


(lib._1 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer 1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#A72008").s().p("AgwAyQgVgVAAgdQAAgcAVgUQAUgVAcAAQAdAAAVAVQAUAUAAAcQAAAdgUAVQgVAUgdAAQgcAAgUgUg");
	this.shape.setTransform(7,7);

	this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,14,14);


// stage content:
(lib.Untitled1 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// FlashAICB
	this.instance = new lib._3("synched",0);
	this.instance.parent = this;
	this.instance.setTransform(102.5,96,1,1,0,0,0,24,24);

	this.timeline.addTween(cjs.Tween.get(this.instance).to({scaleX:1.63,scaleY:1.63,alpha:0},24).wait(1));

	// Layer 2
	this.instance_1 = new lib._2("synched",0);
	this.instance_1.parent = this;
	this.instance_1.setTransform(102.5,96,1,1,0,0,0,16,16);

	this.timeline.addTween(cjs.Tween.get(this.instance_1).to({scaleX:1.63,scaleY:1.63,alpha:0},24).wait(1));

	// FlashAICB
	this.instance_2 = new lib._1("synched",0);
	this.instance_2.parent = this;
	this.instance_2.setTransform(102.5,96,1,1,0,0,0,7,7);

	this.timeline.addTween(cjs.Tween.get(this.instance_2).to({regX:7.1,scaleX:1.79,scaleY:1.79,x:102.7,alpha:0},24).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(178.5,172,48,48);
// library properties:
lib.properties = {
	width: 200,
	height: 200,
	fps: 24,
	color: "#000000",
	opacity: 1.00,
	webfonts: {},
	manifest: [],
	preloads: []
};




})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{}, AdobeAn = AdobeAn||{});
var lib, images, createjs, ss, AdobeAn;

<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>concentric_circles</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="concentric_circles.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
	canvas = document.getElementById("canvas");
	anim_container = document.getElementById("animation_container");
	dom_overlay_container = document.getElementById("dom_overlay_container");
	handleComplete();
}
function handleComplete() {
	exportRoot = new lib.Untitled1();
	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);	
	fnStartAnimation = function() {
		createjs.Ticker.setFPS(lib.properties.fps);
		createjs.Ticker.addEventListener("tick", stage);
	}	    
	function makeResponsive(isResp, respDim, isScale, scaleType) {		
		var lastW, lastH, lastS=1;		
		window.addEventListener('resize', resizeCanvas);		
		resizeCanvas();		
		function resizeCanvas() {			
			var w = lib.properties.width, h = lib.properties.height;			
			var iw = window.innerWidth, ih=window.innerHeight;			
			var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;			
			if(isResp) {                
				if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    
					sRatio = lastS;                
				}				
				else if(!isScale) {					
					if(iw<w || ih<h)						
						sRatio = Math.min(xRatio, yRatio);				
				}				
				else if(scaleType==1) {					
					sRatio = Math.min(xRatio, yRatio);				
				}				
				else if(scaleType==2) {					
					sRatio = Math.max(xRatio, yRatio);				
				}			
			}			
			canvas.width = w*pRatio*sRatio;			
			canvas.height = h*pRatio*sRatio;
			canvas.style.width = dom_overlay_container.style.width = anim_container.style.width =  w*sRatio+'px';				
			canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
			stage.scaleX = pRatio*sRatio;			
			stage.scaleY = pRatio*sRatio;			
			lastW = iw; lastH = ih; lastS = sRatio;		
		}
	}
	makeResponsive(false,'both',false,1);	
	fnStartAnimation();
}
</script>
</head>
<body onload="init();" style="margin:0px;">
	<div id="animation_container" style="background-color:rgba(0, 0, 0, 1.00); width:200px; height:200px">
		<canvas id="canvas" width="200" height="200" style="position: absolute; display: block; background-color:rgba(0, 0, 0, 1.00);"></canvas>
		<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:200px; height:200px; position: absolute; left: 0px; top: 0px; display: block;">
		</div>
	</div>
</body>
</html>

我主要是试图使其在具有图像的一个div上工作。我主要很难获得同心圆。我认为我可以仅使用阴影背景进行处理，但这有3个不同的圆圈。一个在中间，然后两个在外面。使其长大然后褪色会更好吗？还是实际上增加阴影，边界和大小会更有意义？是否有变换元素？理想情况下，这只是一个我可以添加到div上的CSS类，但是我也可以在伪类之前和之后使用

谢谢！

Answer 1

使用scss和radial-gradiant似乎已经解决了我的动画问题：

@keyframes ripple {

  @for $j from 0 through 100 {
    $i: 100 - $j;
    $percent: 0% + $j;
    $factor: $j/100.0;
    $opacity: 1.0 - ($j/100.0) ; 
    #{$percent} { 
      background: radial-gradient(rgba(255, 0, 0, $opacity) #{.8em * $factor}, transparent 0, transparent #{1.5em * $factor}, rgba(255, 0, 0, $opacity) 0, rgba(255, 0, 0,  $opacity) #{2.5em * $factor}, transparent 0, transparent #{3.5em * $factor}, rgba(255, 0, 0,  $opacity) 0, rgba(255, 0, 0,  $opacity) #{4.5em * $factor}, transparent 0);
    }
  }

}

这允许1-> 100表示​​径向渐变。似乎可以在Chrome中运行，但这还是客户想要的！