HTML表格標簽打造微信朋友圈九宮格愛心圖

伙伴們，晚上好呀~

今天決定擼一個最近風靡微信朋友圈的九宮格愛心圖，

就是下圖醬紫的效果啦~

其實它的制作原理很簡單，前提是你得掌握HTML的表格標簽。

在給大家正式分享表格標簽之前，我們先來學習一下如何在HTML中添加CSS樣式吧，因為待會我們馬上就要用上它啦~

CSS全稱Cascading Style Sheets，是用于渲染HTML元素標簽的樣式，前面我們說過HTML是構成Web世界的一磚一瓦，那么CSS就是用來給這個世界增添色彩的畫筆。

CSS可以通過以下幾種方式添加到HTML中：

1、內(nèi)聯(lián)樣式（位于HTML元素內(nèi)部）：個別元素需要特殊樣式時可以使用；

2、內(nèi)部樣式表（位于標簽內(nèi)部）：在HTML文檔頭部<head>區(qū)域內(nèi)使用<style>元素來包裹CSS；

3、外部樣式表：引入外部CSS文件。

上圖中，蘇萊向大家演示了三種在HTML中引入CSS的方法。同時，蘇萊還用到了一些簡單的css樣式來渲染右側的表格。

1、background-color：定義背景顏色；

2、border：定義元素邊框；

3、width：定義元素寬度；

4、height：定義元素高度；

5、align：定義元素的位置（居中、上、下、左、右）；

6、rowspan：跨行操作，定義水平方向上合并幾個單元格；

7、colspan：跨列操作，定義垂直方向上合并幾個單元格。

關于css樣式，蘇萊在這里先不進行過多說明，因為蘇萊后面會專門開章節(jié)來分享CSS。目前，我們大致知曉上面幾個簡單的css樣式就足以應付我們今天要編寫的案例了。

了解完如何在HTML中添加CSS樣式，就開始進入我們今天的主題---使用HTML表格標簽制作九宮格愛心墻吧~~~

首先，蘇萊簡單給小伙伴們介紹一下HTML表格標簽

1、<table>：定義表格；

2、<tr>：定義表格的行；

3、<td>：定義表格的列；

4、<th>：定義表格的表頭；

5、<caption>：定義表格標題；

6、<thead>：定義表格的頁眉；

7、<tbody>：定義表格的主體；

8、<tfooter>：定義表格的頁腳。

了解完上述表格標簽后，我們開始來分析九宮格愛心墻的編寫思路吧~

耗時最少的辦法是：我們寫九個三行三列的表格，設置九個表格父容器的寬度為可容納三個表格的寬度，然后設置所有表格向左浮動，最后按照愛心的排列順序在對應的單元格內(nèi)放入<img>圖片標簽。

下面是蘇萊根據(jù)以上思路寫出的html代碼，類似的結構，寫九個table表格。唯一不同的地方是圖片放入單元格中的位置，比如，第二個表格中的第一張圖放在表格第二行左起第一個單元格內(nèi)。

接下來是css樣式

這樣一個九宮格愛心墻在三到五分鐘之內(nèi)就可以出來啦~效果是醬紫滴~

如果有小伙伴對浮動的概念不夠了解，也沒關系。我們可以換一種更簡單的方式來寫出同樣的效果。并且這種方法只涉及到了今天分享的知識，一句話概括它的思路就是：寫一個九行九列的表格，然后將圖片依次放入指定的單元格。

寫完后效果是醬紫滴~

有小伙伴可能會問，怎么將單元格與單元格之間的距離去掉呢？

這就涉及到了CSS中的border-collapse屬性了，這個屬性的作用是為表格設置合并邊框模型，常用的屬性值有兩個：

1、separate：上圖所示這種，單元格邊框與單元格邊框被分割開了；

2、collapse：下圖所示這種，相鄰的單元格共用一條邊框線，單元格之間沒有縫隙。

如果你想將每個單元格中的邊框去掉，只在界面留下一面愛心墻，那么將代碼中寫好的border都注釋掉就可以達到你想要的效果了。

關于這個方法的代碼，蘇萊就不放入進來了，因為實在太簡單啦~

好啦，今天的內(nèi)容就分享到這了~

小伙伴們，

現(xiàn)在你能自己寫出九宮格愛心圖了嗎~

有什么問題和建議可以私信小編:"前端"

大家六一兒童節(jié)快樂呀，屬于自己小寶貝的節(jié)日，祝他的童年能無憂無慮，每天都能開心開心呀。

兒童節(jié)曬娃怎么發(fā)朋友圈呢，這組俏皮又很可愛的九宮格收藏著，去曬自己漂亮的小寶貝吧。

文章來自互聯(lián)網(wǎng)，不代表電腦知識網(wǎng)立場。發(fā)布者：干就完事，轉轉請注明出處：https://www.pcxun.com/n/116727.html

頁動畫圖像、Flash 動畫和 JavaScript 實現(xiàn)的效果圖片，我們用最基礎的CSS也能實現(xiàn)。制作一個簡單的gif動畫圖，上圖就是效果圖。

用CSS3制作動畫圖，你需要了解兩個css屬性。

其一是 @keyframes

因為它限定了CSS 樣式和動畫逐步從目前的樣式更改為新的樣式的變化過程。瀏覽器兼容的時候需要在keyframes上加前綴，-webkit-, -ms- 或 -moz- 。

keyframes中有兩個屬性，from和to，from里面的內(nèi)容定義動畫開始的狀態(tài)，to記錄動畫結束的狀態(tài)。@keyframes后面緊跟的是動畫的名字，這個可以自定義取名字，比如我取 gifname，頁面某個標簽元素使用這個動畫時候，就需要用到這個名字。

@keyframes gifname
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes gifname /* Safari 與 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

from和to也可以用百分比來表示動畫的過程，可以用百分比的話，就可以把動畫的內(nèi)容定義得更加豐富了。

@keyframes gifname
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes gifname /* Safari 與 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

比如我在一個div元素上用到這個動畫

div
{
    animation: gifname 5s;
    -webkit-animation: gifname 5s; /* Safari 與 Chrome */
}

其二是 animation

剛剛我們在div元素中看到的animation就是我們要認識的第二個屬性。animation其實是一堆屬性的簡寫。比如看下面一句代碼：

 animation:gifname 2s step-start 1s infinite alternate;

這一句其實可以寫成

    animation-name: gifname;
    animation-duration: 2s;
    animation-timing-function: step-start;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

animation-name：動畫名稱

這里是引入 @keyframes 動畫的名稱。

animation-duration：動畫的持續(xù)時間

單位可以是秒(s)，也可以是毫秒(ms)

animation-timing-function：動畫的過度類型

屬性值 :默認是 "ease"

linear：線性過渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

ease：平滑過渡。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于貝塞爾曲線(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

cubic-bezier(n,n,n,n):在 cubic-bezier 函數(shù)中自己的值。可能的值是從 0 到 1 的數(shù)值。

step-start:馬上跳到動畫每一結束幀的狀態(tài)

animation-delay：動畫延遲時間

默認是 0。

animation-iteration-count：動畫循環(huán)次數(shù)

默認是 1。屬性值infinite 代表無數(shù)次。

animation-direction：動畫是否在下一周期逆向地播放

屬性值

normal：正常方向

reverse：反方向運行

alternate：動畫先正常運行再反方向運行，并持續(xù)交替運行

alternate-reverse：動畫先反運行再正方向運行，并持續(xù)交替運行

另外還有兩項屬性：

animation-fill-mode:設置動畫播放后的效果

取值:

none:初始樣式,不改變默認行為.(默認行為)

forwards:動畫播放結束后保持最后一個狀態(tài);

backwards:結束后保持第一個狀態(tài);

animation-play-state :檢索或設置對象動畫的狀態(tài)

屬性值

animation-play-state:running | paused;

running:運動

paused: 暫停

animation-play-state:paused; 當鼠標經(jīng)過時動畫停止，鼠標移開動畫繼續(xù)執(zhí)行

到此為止，屬性我們都學習完了，開始實踐部分：

首先準備好我們需要的圖片，這里我使用了九張圖片。

我把九張圖片放在九個<li></li>標簽里。所有l(wèi)i標簽用ul標簽包含起來。然后把ul放在一個div標簽里，div設置成一張圖片的大小，然后通過逐幀移動ul元素實現(xiàn)動畫。

最后的處理，把超出div元素的部分隱藏即可。然后就得到了文章開始時候的圖片了。

最關鍵的，上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css動畫</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
        margin-right: 0;
    }
#div{
    width:100px;
	height:100px;
    border: 1px solid #fff;
    overflow: hidden;
	margin: 100px 0 0 100px;
    }
    #box{
     width:900px;
     height:100px;   
    border: 1px solid #fff;
    overflow:visible;
    position:relative;
    animation:myfirst 2s step-start 1s infinite ;
    /* Firefox: */
	-moz-animation:myfirst 2s step-start 1s infinite ;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 2s step-start 1s infinite ;
	/* Opera: */
	-o-animation:myfirst 2s step-start 1s infinite ;
    }
    #box li{
        float: left;
        width:98px;
        height:100px; 
        border:1px solid #fff;
    }
    li img{
        width:100%;
        height:100%;
    }
    @keyframes myfirst
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
    55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}
@-moz-keyframes myfirst /* Firefox */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
   100% {left:0px; top:0;}
}

    </style>
</head>
<body>
    <div id="div">
        <ul id="box">
            <li><img src="./img/o1.jpg"/></li>
            <li><img src="./img/o2.jpg"/></li>
            <li><img src="./img/o3.jpg"/></li>
            <li><img src="./img/o4.jpg"/></li>
            <li><img src="./img/o5.jpg"/></li>
            <li><img src="./img/o6.jpg"/></li>
            <li><img src="./img/o7.jpg"/></li>
            <li><img src="./img/o8.jpg"/></li>
            <li><img src="./img/o9.jpg"/></li>
        </ul>
    </div>
</body>
</html>

最后嘮叨一句，該動畫不支持IE9及更早版本的IE瀏覽器。

喜歡的話，就點贊支持一下吧！

在線咨詢

上一篇：JavaScript學習筆記（十二）-BOM
下一篇：簡約風格的wordpress科技IT公司模板：XSt

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

HTML表格標簽打造微信朋友圈九宮格愛心圖

其一是 @keyframes

其二是 animation

您的項目需求