我一直在谷歌寻找像这样的div的显示效果。
这里的图像是使用< canvas >
绘制的radialwipe时钟效果 "
我怎样才能做到这一点呢?
我找到了这个javascript库。但是它只对图像提供这种效果。
div也需要同样的效果。
有哪些方法可以做到这一点呢?
我创建了一个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 -用于设置 内容的位置。
- content -div(或任何其他元素)中的内容
- rotate -动画模拟1/2时钟
- mask -隐藏
content
的动画
这是CSS(用SCSS写的):
<<h3>变量/h3>$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时钟动画
查看transform: rotate(n度)
这个脚本可以将html转换为图像。http://html2canvas.hertzen.com/
如果我没理解错的话,您是在寻找饼定时器效果。这是我之前做的一个纯CSS: http://css-tricks.com/css-pie-timer/.