我一直在谷歌搜索 div 的外观效果,例如 here .
这里的图像是使用 < canvas >
绘制的
"径向删除时钟效果 "
我怎样才能做到这一点。
我找到了 this 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(或任何其他元素)中的内容
- 旋转 - 模拟 1/2 时钟的动画
- mask - 隐藏
内容
的动画
这是 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 clock animation
关于jquery - 制作 div 动画并顺时针旋转。即 Div 的 radialwipe 时钟效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14374092/