<rp id="kut09"><nav id="kut09"></nav></rp>
<rp id="kut09"></rp>
  • <tt id="kut09"></tt>
    <tt id="kut09"><tbody id="kut09"></tbody></tt>
    1. <u id="kut09"></u>
    2. <tt id="kut09"><noscript id="kut09"></noscript></tt>
    3. CSS3中animation實現流光按鈕效果

        發布時間:2020-12-21 11:37:24   作者:yun_shuo   我要評論
      這篇文章主要介紹了CSS3中animation實現流光按鈕效果,本文通過實例代碼給大家介紹的非常詳細對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

      在學習css3的過程中,發現很多看著炫酷的效果,利用css3的屬性能很簡單的實現,animation是css3動畫效果中常見的屬性。下面讓我們了解一下如何利用這個屬性做出以下鼠標停在按鈕上有流光按鈕效果~

      在這里插入圖片描述

      在此之前簡單介紹一下animation屬性的用法。
      animation:[ animation-name(檢索或設置對象所應用的動畫名稱) ] || [ animation-duration(檢索或設置對象動畫的持續時間) ] || [ animation-timing-function(檢索或設置對象動畫的過渡類型) ] || [ animation-delay(檢索或設置對象動畫延遲的時間) ] || [ animation-iteration-count(檢索或設置對象動畫的循環次數) ] || [ animation-direction(檢索或設置對象動畫在循環中是否反向運動) ]
      第一步:給div設置寬高和圓角邊框成一個圓角矩形。
      第二步:設置背景顏色為三種顏色的漸變色(最后一個顏色需要和第一個顏色一樣,這樣流動起來不會有卡顏色的情況),并將背景大小設為400%,主要代碼如下

      background-image: linear-gradient(to left , #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE);
          background-size: 400%;

      分析:現在背景為三種顏色的漸變大小是div的四倍,所以div只顯示出一個顏色,利用幀動畫效果控制背景的移動,加上animation屬性就可以一直流動了~

      在這里插入圖片描述

      第三步:利用幀動畫控制背景定位的橫向移動。(@keyframes作用:定義動畫,簡單的動畫可以直接使用關鍵字from和to,復雜的利用0%~100%,分段設置相應的動畫效果,即從一種狀態過渡到另一種狀態)

      @keyframes run{
                  100%{
                      background-position: 400% 0px;
                  }
              }

      再利用偽類hover實現鼠標移上去就出現動畫的效果~
      偽類主要代碼

      @keyframes run{
                  100%{
                      background-position: 400% 0px;
                  }
              }
              .div2:hover{
                  animation: run 4s linear 0s infinite;
              }

      案例完整代碼:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              .div2{
                  position:absolute;
                  left: calc(50% - 150px); 
                  top: calc(50% - 150px); 
                  width: 300px;
                  height: 100px;
                  border-radius: 50px;
                  text-align: center;
                  background-color:aqua;
                  line-height: 100px;
                  background-image: linear-gradient(to left , #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE);
                  background-size: 400%; 
              }
              @keyframes run{
                  100%{
                      background-position: 400% 0px;
                  }
              }
              .div2:hover{
                  animation: run 4s linear 0s infinite;
              }
          </style>
      </head>
      <body>
          <div class="div2">
              Let's Go
          </div>
      </body>
      </html>

      簡單的css3流光動畫效果就實現啦

      到此這篇關于CSS3中animation實現流光按鈕效果的文章就介紹到這了,更多相關css3 animation 流光按鈕內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

      相關文章

      • CSS3動畫之利用requestAnimationFrame觸發重新播放功能

        這篇文章主要介紹了利用requestAnimationFrame重新播放(觸發)CSS3動畫,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
        2019-09-11
      • CSS3 animation – steps 函數詳解

        本文通過實例代碼給大家介紹了CSS3 animation – steps 函數,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧
        2019-08-30
      • css3中用animation的steps屬性制作幀動畫

        這篇文章主要介紹了css中用animation的steps屬性制作幀動畫,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
        2019-04-25
      • 10分鐘入門CSS3 Animation

        本篇介紹的animation屬性和傳統的動畫制作一樣,能控制幀的每一步,制作出更強大的動畫效果。小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看
        2018-12-25
      • css3的動畫特效之動畫序列(animation)

        這篇文章主要介紹了css3的動畫特效之動畫序列(animation) 的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
        2017-12-22
      • CSS3中Animation動畫屬性用法詳解

        這篇文章主要為大家詳細介紹了CSS3中Animation動畫屬性用法,教大家如何使用animation動畫,感興趣的小伙伴們可以參考一下
        2016-07-04

      最新評論

      218彩票 www.ccsql.com:成都市| www.yijingdec.com:石楼县| www.cp5773.com:鄱阳县| www.sunn99.com:九寨沟县| www.geile-sexdate.com:宜州市| www.comfymassagetable.com:永寿县| www.lcompuserve.com:晋州市| www.charlescountytoday.com:南通市| www.boutique-tahitienne.com:伊春市| www.phukettech.com:鹤庆县| www.cardriverentacar.com:当阳市| www.altinfircareklam.com:苍南县| www.mca0.com:垫江县| www.zhongyuanpq.com:兴安盟| www.amnestyforanimals.org:南宁市| www.itao321.com:板桥市| www.bmwbursa.com:三明市| www.wwwdestinos.com:沛县| www.house-of-jorob.com:宁远县| www.2009k.com:益阳市| www.cecilevangrieken.com:紫云| www.jybncm.com:安康市| www.yritysportti.com:桐梓县| www.selailai.com:阿鲁科尔沁旗| www.webefendi.com:枣庄市| www.cameronianartsawards.com:如东县| www.lidande.com:竹山县| www.lebronsoldiershoes.com:海淀区| www.cm766.com:十堰市| www.lenserver.com:怀安县| www.smashingoffernow.com:昆明市| www.565783.com:南靖县| www.amb-eco.com:南汇区| www.asmyachtsigns.com:乐清市| www.gzkequ.com:当涂县| www.kundol-ng.com:诏安县| www.perfectskinserum.org:砀山县| www.modbus-ida.com:常州市| www.gz577.com:大庆市| www.knightsvisual.com:博野县| www.lizsalmon.com:乌苏市| www.520lei.com:且末县| www.loupanvip.com:石棉县| www.genoad.com:鸡西市| www.ko600.com:天等县| www.letsbecomefit.com:兴城市| www.fomrf.org:普格县| www.amysplaceforyouth.org:红安县| www.wrenandlark.net:富平县| www.mchor.org:运城市| www.i-infidelity.com:景德镇市| www.spaziotrearredamenti.com:视频| www.michel-berger.net:仙居县| www.racetorecoverynow.org:江永县| www.balchdercymru.com:乐业县| www.damoa33.com:浦北县| www.aeul-subs.com:石门县| www.joomlaku.com:彝良县| www.shofarr.com:九台市| www.040bbb.com:视频| www.mydzs.com:贵定县| www.ehbermanlaw.com:益阳市| www.inspirediversity.com:五指山市| www.modasaatler.com:新津县| www.jiahoh.com:祁门县| www.zhengbojx.com:浦城县| www.km-alliance.com:化德县| www.cloncurrytravel.com:嵩明县| www.blgzs88.com:翼城县| www.hubchicago.com:株洲市| www.chinazigong.com:土默特左旗| www.ascendingwings.com:阿克苏市| www.fjmejd.com:鄂伦春自治旗| www.njadl.com:阳东县| www.aalvareznobell.com:辽宁省| www.giteaux5lucarnes.com:长泰县| www.jbenet.com:乐陵市| www.bentleybeacher.com:红原县| www.newvilleoutdoor.com:秦皇岛市| www.ivtvalvesindia.com:平原县| www.parkerpeter.com:封丘县| www.bdyjxm.com:通河县| www.bigbanganimation.com:屯门区| www.baidubocai.com:白沙|