3

我想将图像逆时针显示为动画？更准确地说，我想展示一颗星星的某种笔触，这样它会给你一种被画出来的印象。而这一切都只在 CSS3 中。是否可以？

4

2 回答 2

2

此方法基于 Kyle J Larson 关于如何使用 CSS3 + 一些 CSS3 动画创建饼图的帖子

DEMO（代码查看）

<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);
    }
}
​

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

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

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

于 2012-12-20T22:58:11.240 回答
1

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

使用它，您可以通过将其放置在带有一大堆区域或 div 标签的 div 中来模糊您的图像。然后使用动画，您可以“淡出”divs或areas显露图像。如果您正确掌握了隐藏图像的元素的位置和密度，则看起来好像正在绘制图像。

这是一个非常基本的示例，它使用 4 个 div来隐藏星形图像。如果您制作更多 div 并将它们更密集地放置在星星上，您可以轻松地显示它们。

这可以用更少的 CSS 来完成，但这只是一个简单的例子。

于 2012-12-20T21:43:26.673 回答