<font id="nc9yk"></font>
  • <tt id="nc9yk"></tt>
          <rp id="nc9yk"><optgroup id="nc9yk"></optgroup></rp>
          <tt id="nc9yk"><form id="nc9yk"></form></tt>

            <cite id="nc9yk"></cite>

            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

            最新評論

            hao500彩票 www.bdyjxm.com:大安市| www.hlswclub.com:沙雅县| www.blimprobotics.com:平安县| www.nwpglobal.com:交口县| www.99069hh.com:长顺县| www.lavicardesigne.com:平利县| www.oblocals.com:南雄市| www.sdwxm.com:嘉定区| www.greenitways.com:法库县| www.88888888666666.cn:五原县| www.jlbtz.com:滁州市| www.uknowkase.com:奇台县| www.hongtaitiyu.com:七台河市| www.gcgazette.com:屯昌县| www.bestquality365.com:溧水县| www.blueflagfarm.com:宜章县| www.mhcoelho.com:滨州市| www.kecsd.com:巴塘县| www.sweetandnastyburlesque.com:邳州市| www.shtmcl.com:射阳县| www.teddyoung.org:平泉县| www.044m.com:收藏| www.ppmss.com:会宁县| www.pd556.com:唐海县| www.lsjomd.com:山丹县| www.amysplaceforyouth.org:庄浪县| www.829350.com:东阳市| www.020lingyu.com:都兰县| www.nanopowerindia.com:惠东县| www.898240.com:昭苏县| www.kitchentechnique.net:邹城市| www.createhealthyhome.com:涿州市| www.ibew413benefits.com:井冈山市| www.74li.com:安宁市| www.kmrln.cn:敦煌市| www.hiroshihawaii.com:海盐县| www.concordbeats.com:临沂市| www.nest180.com:新安县| www.logochargers.com:湛江市| www.good1580.com:蒙自县| www.2muchfat.com:梅州市| www.discussfood.com:中江县| www.latest-deals.org:通江县| www.deeblick.com:大埔县| www.rh2010.com:徐州市| www.gzjdvc.com:元氏县| www.5i7du.com:富源县| www.vermord.com:淳化县| www.ecohf.com:通山县| www.gvionlinetraining.com:汪清县| www.speaklan.com:聂荣县| www.menkeji.com:平顺县| www.appleidd.com:富顺县| www.tztdkyj.com:搜索| www.ecurielesvolants.org:南召县| www.urbir.com:德庆县| www.hiroshihawaii.com:榆社县| www.div3rec-culture.com:梁山县| www.168wjcw.com:崇仁县| www.eoilc.com:巴东县| www.tv680.com:金乡县| www.f5862.com:陇西县| www.djtamotsu.com:两当县| www.newclassicsingers.org:乌拉特前旗| www.office-mode.com:上虞市| www.dllzjt.com:观塘区| www.elegooo.com:佛坪县| www.hg39799.com:自治县| www.fundacaoaristidesdesousamendes.com:东城区| www.victorhugor.com:铜梁县| www.new-vibrations.com:铁力市| www.elisa110.com:攀枝花市| www.cloudify-it.com:云南省| www.mastersengenharia.com:临泉县| www.play-nike.com:永寿县| www.mmm522.com:绥棱县| www.cosmosofsweden.com:云浮市| www.xrwjw.cn:信宜市| www.gxsgx.com:焉耆| www.backinbody.com:修水县| www.hbccp.com:商城县| www.sandersfieldtrees.org:嘉义市| www.hg85345.com:施甸县| www.discussfood.com:定陶县|