CSS不規則卡片，純CSS制作優惠券樣式，CSS實現鋸齒樣式

SS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

之前也有寫過 CSS 優惠券樣式《CSS3徑向漸變實現優惠券波浪造型》，這次再來溫習一遍，并且將更為詳細的講解，從布局到具體樣式說明，最后定義 CSS 變量，自定義主題顏色。

布局

布局其實是學習前端的重要部分，最常用的方式就是從上而下、從左而右、亦或者兩個相結合。

看上圖，而這里，我們就只是最簡單的布局方式，從上而下：

1、優惠券金額和過期時間

2、優惠券描述

3、按鈕（其實按鈕也可以放到“2”里面去）

這樣分析，我們就有了 html 架構了

<div class="coupon">
  <!-- 1、優惠券金額和過期時間 -->
  <div class="price">
    100元
    <span>優惠券</span>
    <p class="timeout">2020-12-31 18:18:18過期</p>
  </div>

  <!-- 2、優惠券描述 -->
  <div class="describe">
    <p>1、商城、美食可用</p>
    <p>2、過期作廢</p>
  </div>

  <!-- 3、按鈕 -->
  <div class="btns">
    <button>立即使用</button>
  </div>
</div>

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

CSS修飾

接下來我們用 CSS 美化我們的 html 。同理，我們也根據布局分步進行樣式書寫。

1、優惠券金額和過期時間樣式

這里的核心就是上方的凹槽和下方的鋸齒

.coupon{
  background-color: #E0E0E0;
  width: 200px;
  /* css變量 */
  --main-color: #EC407A;
  --f-color: #444;
}
.price {
  position: relative;
  height: 120px;
  background-image: radial-gradient(
      circle at 100px -8px, #fff 20px, var(--main-color) 21px
  );
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding-top: 40px;
}
.price .timeout{
  color: var(--f-color);
  font-size: 14px;
  margin-top: 25px;
}
.price span{
  font-size: 14px;
}

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

這里用到了徑向漸變，不清楚用法的小伙伴可以看看語法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

注釋：

（1）、shape 確定圓的類型:

ellipse (默認): 指定橢圓形的徑向漸變。

circle ：指定圓形的徑向漸變

（2）、size 定義漸變的大小，可能值：

farthest-corner (默認) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊

closest-corner ：指定徑向漸變的半徑長度為從圓心到離圓心最近的角

farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊

（3）、position 定義漸變的位置。可能值：

center（默認）：設置中間為徑向漸變圓心的縱坐標值。

top：設置頂部為徑向漸變圓心的縱坐標值。

bottom：設置底部為徑向漸變圓心的縱坐標值。

（4）、start-color, ..., last-color 用于指定漸變的起止顏色。

這樣價格上方的凹槽就有了，接下來下方的鋸齒我們也可以用徑向漸變的方式實現：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: 0px;
  height: 10px;
  width: 100%;
  /* background-size: 11px 200px; */
  background-image: 
    radial-gradient(
    circle at 5px 10px, 
    #E0E0E0 6px, 
    var(--main-color) 7px);
}

偽類元素 ::after 設置徑向漸變背景為一個圓，后進行平鋪就形成了鋸齒，調整位置。

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

其實還有更簡單的方法，可以直接用一個虛線邊框即可搞定，請看：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: -5px;
  width: 100%;
  border-bottom: 10px dotted #E0E0E0;
}

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

當然也有缺陷，間隔位置不好控制

2、優惠券描述與按鈕優惠券核心鋸齒已經搞定了，下面都是小菜啦，非常簡單咯

.describe{
  color: #333;
  padding: 10px;
  font-size: 14px;
}
.btns {
  /* 使其button可以居中 */
  text-align: center;
}
.btns button{
  /* 重置按鈕樣式 */
  border: none;
  box-shadow: none;
  outline: none;

  background-color: var(--main-color);
  color: #fff;
  width: 50%;
  border-radius: 20px;
  line-height: 30px;
  margin: 40px 0 20px;
  cursor: pointer;
}

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

主題顏色

大家都看到了，我們上方代碼主要顏色都采用的變量，而且變量是定義在 .coupon 類選擇器里面的。這樣的原因是：

1、CSS變量作用域（CSS變量只能作用于自身以及后代元素。兄弟元素，祖先元素都不能享用。）

2、方便主題使用

ok，我們就可以copy 多個優惠券，并給每個添加一個不同的 class，比如下方的 theme1、theme2、theme3

<div class="coupon theme1">
  ...
</div>
<div class="coupon theme2">
  ...
</div>
<div class="coupon theme3">
  ...
</div>
<div class="coupon">
  ...
</div>

接下來我們就為不同主題定義不同的顏色變量

.coupon.theme1{
  --main-color: #8E24AA;
  --f-color: #fff;
}

.coupon.theme2{
  --main-color: #039BE5;
  --f-color: #fff;
}

.coupon.theme3{
  --main-color: #26A69A;
  --f-color: #fff;
}

這樣，theme1主題下的優惠券，就是紫色主題，theme2主題下的優惠券，就是藍色主題...，而默認主題顏色就是我們 .coupon 類選擇器里面的定義的變量顏色（紅色）。

小結

今天你學到了嗎？從布局分析到具體實現，再到主題顏色，相信小伙伴們都各有所得。

作一個炫酷的按鈕可以為網頁增添活力和吸引力。通過巧妙運用CSS動畫和過渡效果，我們可以創建一個交互性強、視覺效果炫目的按鈕。下面是一個簡單的例子，演示如何創建一個炫酷按鈕。

1. 基礎樣式

首先，我們定義按鈕的基本樣式，包括位置、大小、邊框、背景顏色等。

這段代碼定義了按鈕的基本樣式，包括按鈕的大小、邊框、背景顏色、字體等。

2. 按鈕內嵌SVG圖標

為按鈕內嵌一個SVG圖標，增強按鈕的視覺效果。

這段代碼定義了SVG圖標的樣式，包括位置、大小、顏色等。

3. 箭頭樣式

為按鈕的右側和左側分別添加箭頭，并定義它們的樣式。

這段代碼定義了右側箭頭和左側箭頭的樣式，包括位置。

4. 中央圓形

在按鈕中央添加一個圓形，用于懸停時的特效。

這段代碼定義了中央圓形的樣式，包括位置、大小、顏色和透明度。

5. 文本樣式

定義按鈕文本的樣式，包括相對位置和懸停時的調整。

這段代碼定義了文本的樣式，包括相對位置和懸停時的調整。

6. 鼠標懸停時的效果

定義鼠標懸停時按鈕及其各個部分的樣式調整。

這段代碼定義了鼠標懸停時按鈕及其各個部分的樣式調整，包括陰影、顏色、邊框、位置、顏色和中央圓形的尺寸和透明度。

7. 鼠標按下時的效果

定義鼠標按下時按鈕的樣式調整，如縮放和邊框。

這段代碼定義了鼠標按下時按鈕的樣式調整，包括縮放和邊框。

通過巧妙組合以上樣式，你可以創建一個具有炫酷效果的按鈕，吸引用戶的注意力，提升用戶體驗。在實際項目中，你可以根據需要調整樣式和效果，創造出更符合項目風格的炫酷按鈕。

8. 完整CSS代碼：

近在做公司的登錄頁，UE同學希望第三方登錄的圖標在hover的時候有一個圓形的縮放效果（原話是波紋效果-_-||），效果參考騰訊新聞和網易新聞的分享按鈕。

騰訊新聞的分享按鈕hover效果（新聞頁面）：
網易新聞的分享按鈕hover效果（新聞頁面）：

文章分享之前小編推薦一下我的前端學習群：611256580，里面都是學習前端的，如果你想制作酷炫的網頁，想學習前端知識，小編歡迎你的加入。小編會在群中不定期分享干貨源碼，包括我精心整理的一份前端教程。歡迎各位感興趣的的小伙伴。

看了一下這兩個頁面的源碼，主要是用了 transform:scale() 和 transition ，自己的最終的實現效果如下：

實現思路大體是模仿網易新聞的，布局如下：

<a href="" class="third-party third-party-weixin"> <i></i>
<span></span>
</a>

外層的a標簽用于整體容器和跳轉，內層的i標簽使用偽元素::before和::after分別作為背景色和前景色，這兩個偽元素均絕對定位，垂直水平居中，::after設置縮放屬性 transform:scale(0) ,過渡動畫屬性 transition: all .3s ，正常情況下::before可見，當hover的時候::after設置縮放屬性 transform:scale(1) ，兩個相鄰絕對定位元素在不設置z-index的情況下，文檔流在后的元素在上，并且在有過渡動畫屬性 transition 的情況下實現了縮放動畫效果。

span標簽用于展示logo，可以是圖片或者web字體，只要透明就可以，這里用了圖片。 CSS（此處使用的是sass）如下：

.third-party { position: relative; // 為了兼容firefox必須要變成block或inline-block
display: inline-block; width: 48px; height: 48px; margin: {
left: 6%; right: 6%;
}
&:hover { i {
&::after { transform: scale(1);
}
}
} span { // position: relative是為了兼容firefox和IE
position: relative; display: block; width: 48px; height: 48px; background-size: 30px; background-position: center; background-repeat: no-repeat;
} i { position: absolute; top: 0; left: 0; width: 48px; height: 48px;
&::before { content: ''; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
&::after { content: ''; transition: all .3s; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: scale(0);
}
}
&.third-party-weixin { span { background-image: url(../images/login/weixin-64.png);
} i {
&::before { background-color: #20a839;
}
&::after { background-color: #30cc54;
}
}
}
}

這樣這個簡單的圓形縮放動畫就完成啦。

在線咨詢

上一篇：Thunderbird for Mac(雷鳥郵件客戶端)中文版
下一篇：常見的HTML5開發工具有哪些呢？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS不規則卡片，純CSS制作優惠券樣式，CSS實現鋸齒樣式

布局

CSS修飾

1、優惠券金額和過期時間樣式

主題顏色

小結

您的項目需求

CSS不規則卡片，純CSS制作優惠券樣式，CSS實現鋸齒樣式

1、優惠券金額和過期時間樣式