整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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 美化我們的 html 。同理，我們也根據布局分步進行樣式書寫。
這里的核心就是上方的凹槽和下方的鋸齒
.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 類選擇器里面的定義的變量顏色（紅色）。
今天你學到了嗎？從布局分析到具體實現，再到主題顏色，相信小伙伴們都各有所得。
Low了，網頁居然還用這么老掉牙的特效！弄個粗體字，下劃線就是突出重點了？真是一股濃濃的鄉村風撲面而來；弄個圖在頁面飄來飄去就是動畫效果了，你要這么認為的話那我只能保持沉默了。在HTML5占領著整個互聯網之時，想透過網頁抓住所有人的眼球，因循守舊是行不通的。因此，有你不能不知道的HTML常用代碼。只有熟悉掌握了常用的HTML代碼，你才能在編寫網頁的時候做到行云流水，用處處流露著細膩和創意的動效細節打動所有人。
在這里還是要說一下我自己建的前端JavaScript學習交流群：574462090，不管你是小白還是大牛，小編我都挺歡迎，小白嘛，多問點問題也就學好了，不定期分享干貨，包括最新的2017年前端學習資料，歡迎初學和進階中的小伙伴。
html代碼大全：結構性定義
文件類型<HTML></HTML> （放在檔案的開頭與結尾）
文件主題<TITLE></TITLE> （必須放在「文頭」區塊內）
文頭<HEAD></HEAD> （描述性資料，像是「主題」）
文體<BODY></BODY> （文件本體）
標題<H?></H?> （從1到6，有六層選擇）
標題的對齊 <H?ALIGN=LEFT|CENTER|RIGHT></H?>
區分<DIV></DIV>
區分的對齊 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
引文區塊<BLOCKQUOTE></BLOCKQUOTE> （通常會內縮）
強調<EM></EM> （通常會以斜體顯示）
特別強調<STRONG></STRONG> （通常會以加粗顯示）
引文<CITE></CITE> （通常會以斜體顯示）
碼<CODE></CODE> （顯示原始碼之用）
樣本<SAMP></SAMP>
鍵盤輸入<KBD></KBD>
變數<VAR></VAR>
定義<DFN></DFN> （有些瀏覽器不提供）
地址 <ADDRESS></ADDRESS>
大字<BIG></BIG>
小字<SMALL></SMALL>
與外觀相關的標簽（作者自訂的表現方式）
加粗<B></B>
斜體<I></I>
底線<U></U> （尚有些瀏覽器不提供）
刪除線<S></S> （尚有些瀏覽器不提供）
下標<SUB></SUB>
上標<SUP></SUP>
打字機體<TT></TT> （用單空格字型顯示）
預定格式<PRE></PRE> （保留文件中空格的大?。?/p>
預定格式的寬度<PRE WIDTH=?></PRE>（以字元計算）
向中看齊<CENTER></CENTER> （文字與圖片都可以）
閃耀<BLINK></BLINK> （有史以來最被嘲弄的標簽）
字體大小 <FONTSIZE=?></FONT>（從1到7）
改變字體大小 <FONTSIZE=+|-?></FONT>
基本字體大小 <BASEFONTSIZE=?> （從1到7; 內定為3）
字體顏色 <FONTCOLOR="#$$"></FONT>（$$為顏色代碼）
2
html代碼大全：修改頁面的實用性HTML代碼
1)貼圖：<img src="圖片地址">
2)加入連接：<a href="所要連接的相關地址">寫上你想寫的字</a>
3)在新窗口打開連接：<a href="相關地址" target="_blank">寫上要寫的字</a>
4)移動字體(走馬燈)：<marquee>寫上你想寫的字</marquee>
5)字體加粗：<b>寫上你想寫的字</b>
6)字體斜體：<i>寫上你想寫的字</i>
7)字體下劃線: <u>寫上你想寫的字</u>
8)字體刪除線: <s>寫上你想寫的字</s>
9)字體加大: <big>寫上你想寫的字</big>
10)字體控制大?。?lt;h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大，h5最小)
11)更改字體顏色：<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進制)之間
12)消除連接的下劃線：<a href="相關地址" style="text-decoration:none">寫上你想寫的字</a>
13)貼音樂：<embed src="音樂地址" width="寬度" height="高度" autostart=false>
14)貼flash: <embed src="flash地址" width="寬度" height="高度">
15)貼影視文件：<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>
16)換行：<br>
17)段落：<p>段落</p>
18)原始文字樣式：<pre>正文</pre>
19)換帖子背景：<body background="背景圖片地址">
20)固定帖子背景不隨滾動條滾動：<body background="背景圖片地址" body
bgproperties=fixed>
21)定制帖子背景顏色：<body bgcolor="#value">(value值見10)
22)帖子背景音樂：<bgsound="背景音樂地址" loop=infinite>
23)貼網頁：<iframe. src="相關地址" width="寬度" height="高度"></iframe>
3
html代碼大全：常常會遇到的問題
點擊關閉窗口
<a href="javascript.:top.window.close();">點擊關閉窗口</a>！
請問如何去掉主頁右面的滾動條？
<body scroll="no">
<body style="overflow-y:hidden">
如何做到讓一個網頁自動關閉.
<html>
<head>
<OBJECT id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Close">
</object>
</head>
<body >
這個窗口會在10秒過后自動關閉,而且不會出現提示. </body>
如何在不刷新頁面的情況下刷新css?
<style>
button{ color:#000000;}
</style>
<button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>點擊按鈕直接修改style標簽里button選擇符使按鈕改為 紅色</button>
請問如何讓網頁自動刷新？
在head部記入<META. HTTP-EQUIV="Refresh" c>其中20為20秒后自動刷新，你可以更改為任意值。
如何讓頁面自動刷新？
方法一，用refresh
HTML 代碼片段如下:
<head>
<meta. http-equiv="refresh" c>
</head>
5表示刷新時間
[Ctrl+A 全部選擇 提示:你可先修改部分代碼，再按運行]
方法二，使用setTimeout控制
<img src=/logo.gif>
<script>
function rl(){
document.location.reload()
}
setTimeout(rl,2000)
</SCRIPT>
如何讓超鏈接沒有下劃線
在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼：
<style. type="text/css"> <!--
a { text-decoration: none}
--> </style>
請問如何去掉IE的上下滾動條？
<body style=‘‘‘‘overflow:scroll;overflow-y:hidden‘‘‘‘>
</body>
怎樣才能把RealPlayer文件在網頁做一個試聽連接？
<embed height=25 src=51js.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false" c>
如何用html實現瀏覽器上后退按鈕的功能？
<a href="java script.:history.go(-1)">點擊后退</a>
或者
<script> history.back() </SCRIPT>
4
html代碼大全：你不一定知道的技巧
16. ncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標右鍵
<table borderncontextmenu=return(false)><td>no</table> 可用于Table
17. <body nselectstart="return false"> 取消選取、防止復制
18.onpaste="return false" 不準粘貼
19.oncopy="return false;" ncut="return false;" 防止復制
20. <link rel="Shortcut Icon"href="favicon.ico"> IE地址欄前換成自己的圖標
21. <link rel="Bookmark"href="favicon.ico"> 可以在收藏夾中顯示出你的圖標
22. <inputstyle="ime-mode:disabled"> 關閉輸入法
23. 永遠都會帶著框架
<script. language="JavaScript"><!--
if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網頁
// --></script>
24. 防止被人frame.
<SCRIPT. LANGUAGE=JAVASCRIPT><!--
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>
25. 網頁將不能被另存為
<noscript><iframe.src=*.html></iframe></noscript>
26. 查看網頁源代碼
<input type=button value=查看網頁源代碼
onclick="window.location = "view-source:"+"http://www.pconline.com.cn"">
27.刪除時確認
<a href="javascript：if(confirm("確實要刪除嗎?"))location="boos.asp? &areyou=刪除&page=1"">刪除</a>
28.屏蔽功能鍵Shift,Alt,Ctrl
<script>
function look(){
if(event.shiftKey)
alert("禁止按Shift鍵!");//可以換成ALT CTRL
}
document.onkeydown=look;
</script>
29. 網頁不會被緩存
<META. HTTP-EQUIV="pragma" CONTENT="no-cache">
<META. HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate">
<META. HTTP-EQUIV="expires"CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者<META. HTTP-EQUIV="expires"CONTENT="0">
30.怎樣讓表單沒有凹凸感？
<input type=text style="border:1 solid #000000">
或 <input type=text style="border-left:none;border-right:none; border -top:none; border-bottom: 1 solid#000000"></textarea>
31.不要滾動條?
讓豎條沒有:
<body style="overflow:scroll;overflow-y:hidden">
</body>
讓橫條沒有:
<body style="overflow:scroll;overflow-x:hidden">
</body>
兩個都去掉？更簡單了
<body scroll="no">
</body>
32.怎樣去掉圖片鏈接點擊后，圖片周圍的虛線？
<a href="#"nFocus="this.blur()"><img src="logo.jpg"border=0></a>
33.電子郵件處理提交表單
<form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain">
<input type=submit>
</form>
34.在打開的子窗口刷新父窗口的代碼里如何寫？
window.opener.location.reload()
35.如何設定打開頁面的大小
<body nload="top.resizeTo(300,200);">
打開頁面的位置<bodynload="top.moveBy(300,200);">
36.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動
<STYLE>
body
{background-image:url(logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</STYLE>
37. 檢查一段字符串是否全由數字組成
<script. language="Javascript"><!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>
38. 獲得一個窗口的大小
document.body.clientWidth; document.body.clientHeight
39. 怎么判斷是否是字符
if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");
else alert("全是字符");
40.TEXTAREA自適應文字行數的多少
<textarea rows=1 name=s1 cols=27npropertychange="this.style.posHeight=this.scrollHeight">
</textarea>
41. 日期減去天數等于第二個日期
<script. language=Javascript>
function cc(dd,dadd)
{
//可以加上錯誤處理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() +1) + "月" + a.getDate() + "日")
} cc("12/23/2002",2)
</script>
42. 選擇了哪一個Radio
<HTML><script. language="vbscript">
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio"value="style" checked>Style.
<INPUT name="radio1" type="radio"value="barcode">Barcode
<INPUT type="button" value="check"nclick="checkme()">
</BODY></HTML>
43.腳本永不出錯
<SCRIPT. LANGUAGE="JavaScript">
<!-- Hide function killErrors(){return true;} window.onerror = killErrors;// -->
</SCRIPT>
44.ENTER鍵可以讓光標移到下一個輸入框
<input nkeydown="if(event.keyCode==13)event.keyCode=9">
文末再提兩點建議吧：
剛學前端JavaScript的時候，一定不要追求速成，編程不比其他傳統行業，可以快速的上手，他需要一定的代碼量積累起來，不然你追求速成很可能會車毀人亡。
這個文章到這里就說完了，想要前端學習資料的進我的群自助領取，已經上傳到群文件里了：574462090，歡迎初學和進階中的小伙伴。
loading效果在實際開發中是很常見的，尤其是在Ajax請求的時候，可以給用戶一個很好的交互體驗。
今天這篇文章我們一起來看看如何通過CSS3實現各種不同的loading效果吧，文章中的代碼可以從github自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/loading/loading.html
CSS3
首先我們來看看需要實現的效果。
效果圖
然后我們一個個來看都是怎么實現的吧。
loadingA的效果就如音樂播放時的動態條一般，不停的連續執行。
其主要實現思路如下：
每個豎狀條都是一個簡單的div，div為一個小的圓形。
給每個div加上一個動畫效果，該動畫的效果是高度逐漸變長，最后再變回原樣。
每個div延遲不同的時間才開始執行，這樣就會有先后的層次感。
然后我們來看看各個部分的代碼實現。
基本的div元素
基本的div元素是一個小的圓形。
基本的div元素
定義動畫
定義的動畫主要是改變div的高度，在完成50%的時候達到最高值，完成100%時恢復到原來高度。
動畫效果
設置動畫
將定義的動畫添加至animation屬性，設置一個動畫總執行時間，然后給5個div設置不同的延時時間。
設置動畫
HTML元素
將以上設置的CSS屬性都添加至HTML元素中。
HTML元素
將以上代碼寫完后，直接在瀏覽器運行就可以看到如loadingA的效果了。
如果細心的看完loadingA的實現過程，一定可以聯想到loadingB的實現。
loadingA是通過給高度加動畫，那么loadingB就是通過給寬度加動畫，同樣給5個div不同的延遲時間。
這里我只給出其動畫定義，其他的內容與loadingA類似，詳細的內容可以通過github去看。
loadingB動畫
loadingC的實現效果如下。
loadingC
在loadingA和loadingB中是通過給高度和寬度增加動畫實現的，而loadingC是通過給五個div增加縱向位移實現的。
loadingC實現的關鍵點就在于translateY的使用，因為動畫是從下往上跳動，所以在完成度50%時，translateY設定為負值。
其定義的動畫部分代碼如下所示。
定義動畫
loadingD的實現效果如下。
loadingD效果
通過效果圖我們發現有兩點差異：
loading過程中透明度會發生變化，這個通過opacity實現。
在接近完成時有個上下輕微抖動的效果，這個通過設置小單位的正負translateY值。
得到的動畫代碼如下。
loadingD動畫
loadingE的動畫效果如下。
loadingE
loadingE的效果同loadingD類似，loadingD是通過縱向的位移變換，可以通過translateY實現。
loadingE是通過水平方向位移變換，可以通過translateX來實現。
而有一點不同的是，loadingE的div初始位置就是translateX(-300px)，表示從左側開始運動。
loadingE動畫
loadingF定義的動畫如下所示。
loadingF
loadingF是旋轉效果，可以很容易想到是通過rotate實現。
loadingF中只有一個div，邊框設置為虛線即可，其CSS樣式如下。
loadingF基本樣式
其定義的動畫樣式如下。
loadingF定義動畫
loadingG與loadingH的動畫效果如下。
loadingG&loadingH
loadingG與loadingH類似，loadingH在loadingG的基礎上增加了幾個點。
loadingG中是通過設置一個縱向的div-1，在該div-1內增加一個div-2，div-2就是轉動的圓點，div-2通過絕對定位計算出實際位置，當div-1大小變化時，div-2也應該重新計算位置。
div-2的CSS代碼如下所示。
loadingG基本樣式
在loadingH中，div-1內有四個div，分別表示轉動的四個圓點，也是通過絕對定位計算偏移位置。
最后設置動畫，只需要讓div-1在一個動畫周期內旋轉360度即可。
loadingG
loadingI的效果圖如下所示。
loadingI
loadingI的動畫主要涉及到放大縮小和旋轉兩個方面，放大縮小通過scale實現，旋轉通過rotate實現。具體的可以看看github上的完整代碼。
今天這篇文章主要是教大家如何使用CSS3的動畫特性去實現loading效果，完全可以不用借助于第三方庫，大家也動動手自己實現一下吧。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
