有没有人知道用纯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类，但我也可以在伪类之前和之后使用
谢谢！
使用scss和径向渐变似乎解决了我的动画问题：
@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中工作，但这是客户想要的！