使 div 动画并出现顺时针旋转。即 Div 的径向擦除时钟效果

Posted 2023-03-06

技术标签:

【中文标题】使 div 动画并出现顺时针旋转。即 Div 的径向擦除时钟效果【英文标题】：Making div animate and appear rotating clockwise.i.e radialwipe clock effect for Div 【发布时间】：2012-12-31 16:44:37 【问题描述】：

我一直在搜索 div 的外观效果，例如 here。这里的图像是使用 < canvas > 绘制的 "径向擦拭时钟效果 " 我怎样才能做到这一点。我找到了this javascript 库。但它只为图像提供这种效果。我需要 div 的相同效果。有什么方法可以做到这一点。提前致谢。

【问题讨论】：

【参考方案1】：

我创建了一个与您想要的类似的 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 - 隐藏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;