Question

我想以逆时针方式将图像显示为动画？更精确的是，我想从一颗恒星中透露某种笔触，这样就会给你一种印象。而这一切只在CSS3中出现。有可能吗？

Answer 1

此方法基于Kyle J Larson关于How to Create Pie Charts with CSS3 +一些CSS3动画的帖子

<img src="http://t2.gstatic.com/images?q=tbn:ANd9GcRnxxoXUA200QV3f8ERe_3wM40HdwUUhx-Gyvh6Lurs27DcxksSWoUnsMfP" />
<div class="outer"><div class="inner"></div></div>
<div class="outer2"><div class="inner2"></div></div>

CSS：

img {position:absolute;top:33px;left:32px;}
.outer {
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(255, 0, 0, .5);
    background:transparent;
    clip: rect(0, 150px, 300px, 0);
    /*clip: initial;*/
}

.inner {
    position:absolute;
    background:rgba(0, 255, 0, .5);
    background:#fff;
    width:300px;
    height:300px;
    clip: rect(0, 300px, 300px, 150px);
    /*clip: initial;*/
    -webkit-transform:rotate(-180deg);
    border-radius:150px;
    -webkit-animation:innerAnim 3s 1 linear forwards;
}
.outer2 {
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(127, 127, 0, .5);
    background:transparent;
    -webkit-transform:rotate(-180deg);
    clip: rect(0, 150px, 300px, 0);
    /*clip: initial;*/
}

.inner2 {
    position:absolute;
    background:rgba(0, 0, 255, .5);
    background:#fff;
    width:300px;
    height:300px;
    clip: rect(0, 300px, 300px, 150px);
    /*clip: initial;*/
    -webkit-transform:rotate(180deg);
    border-radius:150px;
    -webkit-animation:innerAnim2 3s 1 linear forwards 3s;
}

@-webkit-keyframes innerAnim {
    from {
        -webkit-transform:rotate(-180deg);
    }
    to {
        -webkit-transform:rotate(0deg);
    }
}

@-webkit-keyframes innerAnim2 {
    from {
        -webkit-transform:rotate(180deg);
    }
    to {
        -webkit-transform:rotate(0deg);
    }
}

注意：每个类有2个background个样式，删除第2个以更好地了解动画的工作方式

你甚至可以通过CSS制作明星（参见：http://3easy.org/buildmobile/jquerymobile/#star）

编辑：为jsfiddle添加了供应商前缀

Answer 2

我唯一能想到的就是使用keyframes和动画属性。

使用此功能，您可以将图像放在带有一大堆区域或div标签的div中，从而使图像模糊不清。然后使用动画，你可以“淡化”divs或areas，露出图像。如果你得到正确隐藏图像的元素的位置和密度，它可能看起来好像正在绘制图像。

here is a very rudimentary example that uses 4 divs隐藏星形图像。如果你制作了更多的div并将它们更加密集地放在星上，你可以很容易地揭示它们。

这可能用较少的CSS完成，但这只是一个简单的例子。

我如何逆时针显示一个元素？

2 个答案: