使用CSS3或jQuery從圖像中點后點動畫

Question

我想從下面的圖像點后點動畫，但我的問題是圖像的彎曲部分（圖像的底部）。

在開始時，應隱藏所有點，然后逐個動畫到視圖中逐個點。

我有以下代碼：

<div id="dots1"></div>

#dots1 {
    -moz-transition: height 1s linear;
    -o-transition: height 1s linear;
    -webkit-transition: height 1s linear;
    transition: height 1s linear;
    position: absolute;
    left: 50%;
    z-index: 1;
    margin: 0 0 0 -1px;
    width: 3px;
    height: 0;
    background: url(image/pic.png) 0 0 no-repeat;
}

Answer 1

您可以使用兩個SVG path元素來實現此效果，如下面的代碼段所示。 創建了您需要的兩條曲線形式的路徑。 一條路徑（位於底部）具有筆划的點圖案（黑色）和另一條位於頂部的復制路徑。 設置復制路徑筆划，使得對於路徑的一個全長，它是白色的，而對於另一個長度，它是透明的。

在復制路徑上添加動畫以為筆划的偏移設置動畫。 當偏移被動畫化時，筆划的白色部分緩慢移出視野，透明部分開始進入視野。 當白色部分開始偏離視野時，它下面的黑點開始顯露出來。

在開始時理解起來有點復雜，但是一旦熟悉了path ， stroke-dasharray和stroke-dashoffset它就會變得簡單。

 svg { height: 400px; } path { fill: none; } path.dot { stroke: black; stroke-dasharray: 0.1 4; stroke-linecap: round; } path.top { stroke: white; stroke-width: 2; stroke-dasharray: 250; stroke-linecap: round; animation: dash 15s linear forwards; } @keyframes dash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -250; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg viewBox='0 0 100 100'> <path d='M1,1 1,45 C1,60 30,60 30,75 C30,90 1,90 1,100' class='dot' /> <path d='M1,1 1,45 C1,60 30,60 30,75 C30,90 1,90 1,100' class='top' /> </svg> 

Answer 2

請嘗試以下方法：

HTML

<div id="dots">
    <img src="http://i.stack.imgur.com/oxUh8.png">
</div>

jQuery的

$("#dots").css("height", "514px");

CSS

#dots{
    overflow: hidden;
    height: 10px;
    transition: all 3s cubic-bezier(.5, 1, 0, .5);
}

請參閱： https ： //jsfiddle.net/brezkryx/