用css和jquery圓圈動畫

我必須設計一個動畫。上下有兩個半圓。當我們懸停該部分時，這個圓圈就會生成動畫。用css和jquery圓圈動畫

請參閱圖像：

的jsfiddle鏈接： - https://jsfiddle.net/bharat_negi/bbdbbdn3/

HTML代碼： -

<div class="col-md-12 contant-area homeClass"> 
    <div class="col-md-3 col-sm-6"> 
    <div class="homeinfo"> 
    <h2>INNOVATION</h2> 
    <div class="infoIco"> 
    <div class="topCover"></div> 
    <div class="clearfix"></div> 
    <div class="circle circle1"> 
     <i><img src="images/whyinn-icon.png" alt=""></i> 
    </div> 
    <div class="clearfix"></div> 
    <div class="footCover"></div> 
    <div class="fullCircle"></div> 
    </div> 
    <p>We know digital innovation is the key to future growth.</p> 
</div>

來源

2017-08-30 Bharat Negi

對你有好處，你有一個真正的問題嗎？ – Liam

請花一些時間閱讀幫助頁面，尤其是名爲[「我可以詢問什麼主題？」]（http://stackoverflow.com/help/on-topic）和[「應該提供什麼類型的問題我避免問？「]（http://stackoverflow.com/help/dont-ask）。更重要的是，請閱讀[Stack Overflow問題清單]（http://meta.stackexchange.com/q/156810/204922）。您可能還想了解[最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve）。 –

有時CSS不是Job的最佳工具。 SVG現在得到瀏覽器的廣泛支持，並且可以很容易地進行動畫製作。您甚至可以使用設計包來製作SVG，然後查看SVG源以放置CSS選擇器等，然後爲其設置動畫。 – Keith

看看這個例子中，我HAV創建E：

https://jsfiddle.net/bbdbbdn3/1/

它不會回答你的問題，但希望能幫助你找到一個解決方案。

本示例中「動畫」的工作方式是通過一個垂直居中的元素（本例中爲.curtain）填充父元素並具有與父級背景匹配的背景色。然後在盤旋.curtains高度動畫爲0

來源

2017-08-30 10:53:08

用css和jquery圓圈動畫

回答

相關問題