<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.1geiwo.com:馆陶县| www.xdemachinery.com:彭水| www.sparroboter.com:云安县| www.67ban.com:旺苍县| www.gdgypvc.com:通渭县| www.hougangopenmri.com:元谋县| www.axshiye.com:靖安县| www.actforourfuture.org:页游| www.jas-cn.com:南充市| www.singlemotorcycle.com:陵川县| www.yomuca.com:十堰市| www.okumakayricaliktir.net:潞城市| www.tms16.com:东源县| www.mikestockerphoto.com:海门市| www.ladyrss.com:收藏| www.trade-address.com:绥滨县| www.shdlls.com:栖霞市| www.pokerglyphs.com:陆丰市| www.jsljl.com:繁峙县| www.n9568.com:呼图壁县| www.geekordi.com:龙胜| www.collegecafe.org:永善县| www.1663pj.com:江陵县| www.digishoppy.com:嘉定区| www.streetpass.org:包头市| www.jhgkip.com:和平县| www.ozcanis.com:滨海县| www.racetorecoverynow.org:裕民县| www.686302.com:佳木斯市| www.szhsmh.com:陆良县| www.ctocmall.com:南靖县| www.xishimeiecuador.com:莎车县| www.trade-perfect.com:大田县| www.huanxiangtong.com:双江| www.1212312.com:铜陵市| www.danangfoundation.org:云阳县| www.zj-888.com:庄浪县| www.rijiw.com:定襄县| www.david-bird.com:南京市| www.fifth-wheels.com:苍南县| www.pressplaycoach.com:定远县| www.southerncrossnat.com:浦城县| www.aquaherbals.com:渑池县| www.855664.com:嫩江县| www.g2776.com:喀喇沁旗| www.hg75456.com:宁蒗| www.tv680.com:宾阳县| www.fzu123.com:梨树县| www.cp7119.com:金平| www.09323jj.com:黄冈市| www.enshuohuojia.com:缙云县| www.hg28678.com:遵义市| www.m8667.com:英吉沙县| www.180xu.com:沙田区| www.directequipement.net:常熟市| www.megahjayatenda.com:鄢陵县| www.supernakliye.com:自贡市| www.carpetgalleryny.com:商南县| www.ew08.com:铜川市| www.figure-king.com:博乐市| www.wtclao.com:城固县| www.ericemily.com:任丘市| www.mitnickroddierhicks.com:荣成市| www.theraputty.net:鄢陵县| www.gthforex.com:晋州市| www.kyxjw.cn:萨嘎县| www.fjhyqm.com:柘城县| www.treatmentcenterpage.com:什邡市| www.ther15.com:陈巴尔虎旗| www.ccwomen.org:西藏| www.guokejx.com:安乡县| www.iclcsw.com:内丘县| www.zngnw.cn:普兰店市| www.onemiletrade.com:页游| www.bichengdecoration.com:怀宁县| www.90wlog.com:防城港市| www.whobuysthesethings.com:邳州市| www.ohranabg.com:景德镇市| www.9908899.com:弥勒县| www.alishaallport.com:酒泉市| www.changsha8.com:旬邑县| www.15221109153ks.com:宜兰市| www.ydgongce.com:盐亭县| www.highrisebuilder.com:宾阳县|