文章目錄

前言

一、效果展示及思路分析

1.效果展示

2.思路分析

二、實現步驟

1.準備工作

2.程式碼實現

總結

---

前言

經歷了前面幾篇文章的痛苦經歷以後，我終於深刻領悟到了那句“學海無涯苦作舟”呀！ o(╥﹏╥)o 看來小凡我前端學習的路還很漫長呀！大家也要繼續努力呀！加油！！咳咳......一不小心又跑題了，我們言歸正傳，今天繼續給大家分享一個有趣的動效，一個會跟大家撒嬌的旗幟徽章。

---

一、效果展示及思路分析

1.效果展示

 截了好久的圖，終於還是放棄了，動畫速度實在是太快了，我手速實在是太low了o(╥﹏╥)o 算了，大家還是按照小凡的講解做出來自己看效果吧！

2.思路分析

我們可以將該動效拆成兩部分來理解：

第一部分就是旗幟的上半部分以及其中的文字，第二部分就是旗幟下面的兩個角

理清了思路，我們就直接上程式碼！！

二、實現步驟

1.準備工作

在正式開始寫程式碼之前，需要先下載相應的IDE，以及進行必要的配置工作。

小凡在【uni-app專案|vue元件形式實現的科技感loading純CSS動效】文章中詳細講解過如何進行必要的配置工作，這裡就不再重複講解了，大家可以點選右側連結檢視→科技感Loading動效詳解

2.程式碼實現

（1）在home.vue應用啟動頁中新增一個佈局，引入並註冊自定義vue元件，在模版中使用自定義vue元件

<template>
	<view class="home">
		<view><Badge></Badge></view>
	</view>
</template>

<script>
	import Badge from '@/components/Badge.vue'
	export default {
		components:{
			Badge
		}
	}
</script>

<style scoped>
	.home{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-template-rows: repeat(3,1fr);
		height: 100vh;
		justify-items: center;
		align-items: center;
		max-width: 800px;
		margin: 0,auto;
	}
	.home>view{
		transform: scale(1.5);
	}
</style>

 （4）編寫自定義vue元件Badge.vue

說明：樣式程式碼並沒有考慮瀏覽器相容問題，本程式碼的測試環境是谷歌瀏覽器。

• 在模版程式碼塊中，新增uni-app提供的view元件元素（類似於HTML中的div）並設定class屬性為badge（嗯嗯，沒錯！依然是熟悉的“味道”，簡單到極致，只有一個view元素，通過CSS樣式就能實現我們想要的動效！）

<template>
	<view class="badge">Hi</view>
</template>

• 設定view元素的樣式

.badge{
        /*設定相對定位，作為絕對定位元素的父容器*/
		position: relative;

        /*彈性佈局，容器內元素水平居中*/
		display: flex;
		justify-content: center;

        /*設定圓角邊框  順序：上、右、下、左*/
		border-radius: 4px 4px 0 0;
		margin: 2px;

        /*元素大小、溢位隱藏以及元素陰影*/
		width: 36px;
		height: 36px;
		overflow: hidden;
		filter: drop-shadow(0 1px 1px #973340a3);

        /*設定字型樣式、字型陰影*/
		color: white;
		font-weight: bold;
		line-height: 32px;
		text-shadow: 0 1px 0 rgba(0,0,0,0.4);

        /*設定元素動畫*/
		animation: shake infinite 2s ease;
	}

說明：樣式中設定了width、height、overflow: hidden，首先是為了限制徽章的大小，後面要建立的偽元素再大，也不會超出這裡設定的寬高範圍；其次，設定了溢位隱藏以後，無論後面建立的偽元素如何旋轉、變形等，都只是在規定的寬高內顯示，便於我們做出想要的圖形。由於沒有設定背景色，所以，此時我們在頁面上是看不到該元素的輪廓的，只能看到設定了樣式的Hi字型。

• 利用CSS:before和:after選擇器，建立偽元素

分析：同時建立了兩個方形的偽元素，重疊顯示，所以頁面上看到的只有一個方形圖形

.badge::before,
	.badge::after{
		content: '';
        /*元素絕對定位*/
		position: absolute;

        /*定位元素位置*/
		left: 0;
		top: 0;

        /*設定層級，防止將父元素中的文字覆蓋*/
		z-index: -1;

        /*定義元素形狀及背景圖*/
		display: block;
		border-radius: 4px;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(0deg, red, #ff8484);
	}

• 修改偽元素的樣式，做出旗幟的樣子

分析：如何做出這種不規則的圖形呢？so easy！我們可以利用transform-origin屬性設定拉伸時的原點，然後再利用transform屬性裡面的skewY()方法，拉伸圖形的X軸就可以得到兩個尖尖的角了。

.badge::before{
        /*將偽元素左上點作為拉伸變形原點*/
		transform-origin: left top;
		transform: skewY(-20deg);
	}
	.badge::after{
        /*將偽元素右上點作為拉伸變形原點*/
		transform-origin: right top;
		transform: skewY(20deg)
	}

• 新增CSS3動效

說明：偽元素中新增的animation屬性與@keyframes一起使用，從而實現不同的動畫效果，0%表示開始動畫，100%表示結束動畫，當然我們還可以在中間設定新的關鍵幀，例如：在0%和100%中間再設定一個50%

.badge{
		......

        /*新增動畫效果*/
		animation: shake infinite 2s ease;
	}

@keyframes shake{
		0%{
			transform: rotate(0deg);
		}
		4%{
			transform: rotate(-5deg);
		}
		8%{
			transform: rotate(5deg);
		}
		12%{
			transform: rotate(-5deg);
		}
		16%{
			transform: rotate(5deg);
		}
		20%{
			transform: rotate(-5deg);
		}
		24%{
			transform: rotate(5deg);
		}
		28%{
			transform: rotate(0deg);
		}
	}

 

---

總結

怎麼樣？做出來的效果大家都看到了吧，是不是一個會定時撒嬌的旗幟呀？O(∩_∩)O，好啦，下面我們來簡單總結下這個動效中的知識點：

• uni-app專案中如何設定應用啟動頁，如何建立自定義vue元件以及如何在應用啟動頁中使用自定義vue元件
• 編寫自定義vue元件中用到了“相對定位與絕對定位”、“彈性佈局”、border-radius、filter: drop_shadow()、background-image: linear-gradient()
• 重點講解了transform-origin屬性是用來設定拉伸時的原點以及使用transform屬性裡面的skewY()方法，用來拉伸元素的X軸
• 新增CSS3動效時用到的animation屬性以及@keyframes規則

以上就是本文中用到的知識點，小凡還得囉嗦兩句，這個動效本身並不難理解，稍微有點難的地方應該就是如何做出旗幟徽章下面的兩個角了。如果不瞭解CSS中的transform-origin屬性和transform: skewY()方法的話，小凡覺得實現起來還是有點困難的，所以，要想有好的創意就必須要有好的技能，本文分享的動效就很好的證實了這句話！所以啦，小凡和大家一起“好好學習，天天進步”(*^▽^*)

如果喜歡小凡的這篇文章，記得點贊、收藏和分享哦！也歡迎大家在評論區留言。