6

私はここのようなdivの出現効果をグーグルで探しています。
ここでは、「ラジアルワイプクロック効果」を使用して画像を描画して< canvas >
います。
これを実現するにはどうすればよいですか。このjavascriptライブラリ
を見つけました。ただし、この効果は画像に対してのみ提供されます。 divにも同じ効果が必要です。 同じことをするためのアプローチは何ですか。 前もって感謝します。


4

4 に答える 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>
  • ラッパー-コンテンツの位置を設定するために使用されます
  • content -div（またはその他の要素）内のコンテンツ
  • 回転-1/2クロックをシミュレートするアニメーション
  • マスク-非表示にするアニメーション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

変換をチェックしてください：rotate（n deg）

于 2013-01-18T10:29:14.993 に答える
0

このスクリプトは、htmlを画像に変換できます。 http://html2canvas.hertzen.com/

于 2013-02-03T05:11:54.997 に答える
0

私がよく理解しているなら、あなたはパイタイマー効果を探しています。これが私が少し前に行った純粋なCSSです：http：//css-tricks.com/css-pie-timer/。

于 2013-03-27T16:56:07.727 に答える