我一直在谷歌上搜索 div 的外观效果,比如这里。
这里的图像是使用< canvas >
“ radialwipe 时钟效果”绘制的
,我该如何实现这一点。
我找到了这个javascript 库。但它只为图像提供这种效果。
我需要对 div 具有相同的效果。
有什么方法可以做到这一点。
提前致谢。
问问题
3199 次
4 回答
2
我创建了一个与您想要的类似的 1/2 时钟动画效果。我希望找到提供精确动画的解决方案。
代码
您需要一些动画标记:
<div class="wrapper">
<div class="content">
This is a good day. Maybe.
</div>
<div class="rotate"></div>
<div class="mask"></div>
</div>
- wrapper - 用于设置内容的位置
- 内容- 您在 div 中的内容(或任何其他元素)
- rotate - 模拟 1/2 时钟的动画
- mask - 隐藏的动画
content
这是 CSS(用SCSS编写):
变量
$width: 200px;
$height: 200px;
$duration: 2s;
$delay: 1s;
$color-alpha: #308991;
$color-beta: #80c144;
$color-gamma: #b83d54;
.wrapper {
position:relative;
width: $width;
height: $height;
margin:0 auto;
}
.content {
width: $width;
height: $height;
background: $color-beta;
border-radius: 50%;
padding: 2em;
overflow: hidden;
text-align:center;
}
/* Rotates 360 deg */
.rotate {
position: absolute;
z-index: 2;
top: 0;
right: 0;
width: $width / 2;
height: $height;
box-shadow:0 0 0 .15em $color-alpha;
background: $color-alpha;
transform-origin: 0 50%;
animation: rotate $duration linear 1 forwards;
animation-delay: 1s;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
62% {
opacity:1;
}
99.99% {
z-index: 2;
}
100% {
transform: rotate(360deg);
opacity: 0;
z-index: -1;
}
}
/* The .content is hidden by .mask until the .rotate reveals it */
.mask {
position:absolute;
z-index:1;
top: -1px;
left: -1px;
width: $width + 2px;
height: $height + 2px;
background:
linear-gradient(top, transparent 50%, $color-alpha 50%),
linear-gradient(top, $color-alpha 50%, transparent 50%);
background:
linear-gradient(to top, transparent 50%, $color-alpha 50%),
linear-gradient(to top, $color-alpha 50%, transparent 50%);
background-position:100% 100%, 0 0;
background-size: 50% 200%;
background-repeat: no-repeat;
border-radius: 50%;
box-shadow:0 0 0 .65em $color-alpha;
animation: mask $duration / 1.25 linear 1 forwards;
animation-delay: (-$duration / 7.5) + $delay;
}
@keyframes mask {
50% {
background-position: 100% 0, 0 0;
}
99.99% {
z-index: 1;
}
100% {
background-position: 100% 0, 0 100%;
z-index: -1;
}
}
演示
您可以在 CodePen 上看到现场演示:1/2 时钟动画
于 2013-03-02T16:11:10.297 回答
0
于 2013-01-18T10:29:14.993 回答
0
如果我理解得很好,您正在寻找饼图计时器效果。这是我不久前做的一个纯 CSS: http: //css-tricks.com/css-pie-timer/。
于 2013-03-27T16:56:07.727 回答
0
该脚本可以将 html 转换为图像。 http://html2canvas.hertzen.com/
于 2013-02-03T05:11:54.997 回答