站長資訊網
        最全最豐富的資訊網站

        手把手教你使用css制作一個簡單的心跳效果(代碼詳解)

        之前的文章《手把手教你怎么使用css3給文字添加動畫效果(附代碼)》中,給大家介紹怎么使用css3給文字添加動畫效果。下面本篇給大家介紹怎么使用css制作一個簡單的心跳效果,我們一起看看怎么做。

        手把手教你使用css制作一個簡單的心跳效果(代碼詳解)

        ccs制作一個簡單的心跳效果的方法,添加一個盒子,充分利用ccs展現就可以啦。

        1、首先我們在頁面添加一個可視化的盒子,創建新一個文檔,寫代碼先用<div class="heart"></div>這串代碼在框架<div>標簽。

        代碼示例

         <body> 	<div class="heart"></div>  </body>

        Html代碼完成。

        2、將它先變成一顆心,使用css設置動畫及字體樣式,heart屬性使用將動畫與div元素綁定,下面給大家怎么寫代碼,使用head標簽之間加入<style type"text/css"></style>這串代碼然后在style標簽中輸入*lia文本的邊框外部和元素距離為0、默認值、掉刪下劃線,代碼示例。

        *{margin:0; padding:0;} li{list-style:none;} a{text-decoration:none;}

        3、接著,使用head標簽之間加入heart這串代碼然后在style標簽中輸入文本的相對定位、寬度、高度、外邊距屬性可以有14個值、過渡動畫,代碼示例

        *{margin:0; padding:0;} li{list-style:none;} a{text-decoration:none;}   .heart{ position:relative; width:100px;  height:100px; margin:100px; animation:scale 1s linear infinite;   /*名稱 1s 勻速 無限循環*/

        4、最后設置一下動畫animation,這里要說一下animation必須和@keyframes一起用,繼續用head標簽之間在style標簽中輸入絕對定位、寬度、高度、顏色、content屬性、外邊框圓角、旋轉元素,代碼示例

        .heart:after, .heart:before{ position:absolute; width:70px; height:100%; background-color:red; content:""; border-radius:50% 50% 0 0; } .heart:before{ left:0; transform:rotate(-52deg); } .heart:after{ right:0; transform:rotate(49deg);

        代碼效果

        手把手教你使用css制作一個簡單的心跳效果(代碼詳解)

        5、我們讓它水平垂直兩倍縮放

        代碼示例

        @keyframes scale{ /*動畫幀*/ 50%{transform:scale(2)} }

        代碼效果

        手把手教你使用css制作一個簡單的心跳效果(代碼詳解)

        效果出來了,有點意思,想變成美的伙伴們可以自己去修改,畢竟審美功力有限,大家審美眾口難調,畢竟我也做不到所有人都認可我,我只有努力把作品盡了量的完善。

        【完】

        推薦學習:CSS3視頻教程

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 久久99精品国产一区二区三区| 亚洲av午夜国产精品无码中文字| 亚洲国模精品一区| 久久青青草原精品国产| 丰满人妻熟妇乱又伦精品劲| 久久精品国产亚洲AV麻豆网站| 国产精品1024在线永久免费| 欧美国产成人精品一区二区三区| 1000部精品久久久久久久久| 日韩精品无码久久一区二区三| 久久国产精品99精品国产987| 少妇人妻无码精品视频| 天天爽夜夜爽夜夜爽精品视频| 久草欧美精品在线观看| 国产精品色视频ⅹxxx| 欧美日韩精品一区二区| 2048亚洲精品国产| 精品人妻中文av一区二区三区| 亚洲av无码乱码国产精品| 无码国模国产在线无码精品国产自在久国产 | 一区二区三区四区精品视频| 国产成人精品久久免费动漫| 国产精品第12页| 国产午夜福利精品一区二区三区| 欧洲精品色在线观看| 久久久久成人精品无码中文字幕| 麻豆aⅴ精品无码一区二区| 无码人妻精品一区二区三区久久 | 国产三级精品三级| 国产精品视频全国免费观看| 国产精品九九九| 国产欧美精品一区二区三区四区 | 亚洲精品第一国产综合境外资源| 久久se这里只有精品| 久久久久人妻一区精品| 免费视频精品一区二区| 亚洲?V乱码久久精品蜜桃 | 国产欧美精品专区一区二区| 99久久免费国产精品| 久久国产精品99久久久久久老狼| 精品国产自在在线在线观看|