純CSS寫出一只活潑亂跳的小白兔，非常簡單，看了就會

樣先放最終效果圖：

動圖演示：

一邊聽歌一邊截的動圖，所以圖片下面有歌詞閃過，大家忽視就好。

整個圖像其實可以分為三個部分，一是藍黑色的背景，二是三朵若隱若現的白云，三是這只往前跳的小兔子，背景可以直接在body里設置，因此我們的HTML主題部分就只需要下面兩個div：

<div class="rabbit"></div>
<div class="clouds"></div>

接著CSS里開始設置樣式，先是整體的背景：

body {
 margin: 0;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(midnightblue, black);
 font-size: 20px;
 margin-top: 2em;
 overflow: hidden;
}

引申一點相關知識：上面的CSS代碼里display：flex其實是彈性布局，采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。

flex布局有以下6個屬性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

其中，我們的代碼里面用到的justify-content：center定義了項目在主軸上的對齊方式為center。

接下來設置小白兔：

.rabbit {
 width: 5em;
 height: 3em;
 color: whitesmoke;
 background: 
 radial-gradient(
 circle at 4.2em 1.4em,
 #333 0.15em,
 transparent 0.15em
 ), /* eye */
 currentColor;
 border-radius: 70% 90% 60% 50%;
 box-shadow: -0.2em 1em 0 -0.75em #333;
 z-index: 1;
 animation: hop 1s linear infinite;
}

大體都是一些基礎的設置，這里著重介紹一下 animation: hop 1s linear infinite;這句。

animation是CSS3里的一個動畫設置，使用上面的代碼，將把 animation 綁定到一個hop這個div元素，因此我們需要寫一個hop來實現小白兔前后跳動的動畫：

@keyframes hop {
 20% {
 transform: rotate(-10deg) translate(1em, -2em);
 box-shadow: -0.2em 3em 0 -1em #333;
 }
 40% {
 transform: rotate(10deg) translate(3em, -4em);
 box-shadow: -0.2em 3.25em 0 -1.1em #333;
 }
 60%, 75% {
 transform: rotate(0deg) translate(4em, 0);
 box-shadow: -0.2em 1em 0 -0.75em #333;
 }
}

就這樣，我們得到了一個光頭往前跳動的小白兔：

其實還挺可愛的~

下面我們給小兔子加上耳朵：

.rabbit::before {
 content: '';
 position: absolute;
 width: 0.75em;
 height: 2em;
 background-color: currentColor;
 border-radius: 50% 100% 0 0;
 transform: rotate(-30deg);
 top: -1em;
 right: 1em;
 border: 0.1em solid;
 border-color: gainsboro transparent transparent gainsboro;
 box-shadow: -0.5em 0 0 -0.1em;
 }

加上耳朵后如下：

加上尾巴和影子：

.rabbit::after {
 content: '';
 position: absolute;
 width: 1em;
 height: 1em;
 background-color: currentColor;
 border-radius: 50%;
 left: -0.3em;
 top: 0.5em;
 box-shadow:
 0.5em 1em 0,
 4em 1em 0 -0.2em,
 4em 1em 0 -0.2em;
 animation: kick 1s infinite linear;
}

最后，給小白兔加上四周的白云：

.clouds {
 width: 2em;
 height: 2em;
 color: whitesmoke;
 background: currentColor;
 border-radius: 100% 100% 0 0;
 transform: translate(0, -5em);
 animation: cloudy 1s infinite linear forwards;
 filter: opacity(0);
}

云的動畫以及細節調整這里就不在贅述了，再來看一張最終效果圖：

今天的小練習就到這里啦。

需要完整代碼的朋友可以留言或私信我獲取。

家好呀！今天小紅書上來分享一篇關于友情鏈接HTML代碼的教程，讓我們一起來學習如何在網頁上添加友情鏈接吧！

我們需要了解什么是友情鏈接。友情鏈接，顧名思義，就是在網頁上相互分享鏈接，以增加網站之間的互相推薦和訪問。通過添加友情鏈接，我們可以促進多個網站之間的互動和合作，共同提高網站的流量和知名度。

我們該如何在網頁中添加友情鏈接呢？首先，我們需要使用HTML代碼來實現這一功能。下面將給大家介紹一種簡單的方法。

首先打開你要添加友情鏈接的網頁，然后找到你想要添加友情鏈接的位置。通常，我們將這些鏈接放置在頁面底部的“友情鏈接”或“合作伙伴”欄目中比較合適。

我們需要在HTML代碼中插入一個“”標簽，表示一個無序列表。在這個列表中，每一個鏈接都將被表示為一個“”標簽，這樣我們就可以依次添加多個鏈接了。

下面是一個示例代碼，供大家參考：

年暑假實習了四個月的前端，接觸了很多前端相關的東西，覺得前端真的比后端有趣多了啊，又好玩又有趣，相比后端千篇一律的代碼，前端的千變萬化一瞬間俘獲了我的心~~~~~

下面列舉一些基礎的前端圖形制作代碼，希望對大家有用喲。

為了讓大家能輕松愉快地跟著我的代碼動手測試，更為了讓一點計算機基礎都沒有的小伙伴也能跟著我下面的代碼來自己動手玩耍，我先簡單給出一個基礎的HTML，大家可以像我這樣新建一個HTML文件，然后復制下面的代碼到文件中：(不知道怎么用記事本建html的小伙伴可以去看我的另外一篇文章：使用 Notepad 或 TextEdit 來編寫 HTML。)

一，正方形

<html>
<body>
<h1>有趣的前端圖形</h1>
<div id="square">
</div>
<style>
 #square {
 width: 100px;
 height: 100px;
 background: red;
 }
</style>
</body>
</html>

好了，現在點擊使用瀏覽器打開上面的文件，是不是看到了下面的圖像呢：

如果你已經看到了上面的圖像，那么恭喜你，你可以繼續往下看下去了，下面有更多有趣的圖形等著你哦。

二、圓形

將下面的代碼放到<style></style>中，并把<div>中的id改為circle

#circle {
 width: 100px;
 height: 100px;
 background: red;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
}

你就得到了一個可愛的圓：

當然顏色啥的，可以隨便改啊~

三、橢圓

#oval {
 width: 200px;
 height: 100px;
 background: red;
 -moz-border-radius: 100px / 50px;
 -webkit-border-radius: 100px / 50px;
 border-radius: 100px / 50px;
}

結果如下：

四、三角形

正三角：

#triangle-up {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid red;
}

倒三角：

#triangle-down {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid red;
}

五、五角星

#star-five {
 margin: 50px 0;
 position: relative;
 display: block;
 color: red;
 width: 0px;
 height: 0px;
 border-right: 100px solid transparent;
 border-bottom: 70px solid red;
 border-left: 100px solid transparent;
 -moz-transform: rotate(35deg);
 -webkit-transform: rotate(35deg);
 -ms-transform: rotate(35deg);
 -o-transform: rotate(35deg);
}
#star-five:before {
 border-bottom: 80px solid red;
 border-left: 30px solid transparent;
 border-right: 30px solid transparent;
 position: absolute;
 height: 0;
 width: 0;
 top: -45px;
 left: -65px;
 display: block;
 content: '';
 -webkit-transform: rotate(-35deg);
 -moz-transform: rotate(-35deg);
 -ms-transform: rotate(-35deg);
 -o-transform: rotate(-35deg);
 
}
#star-five:after {
 position: absolute;
 display: block;
 color: red;
 top: 3px;
 left: -105px;
 width: 0px;
 height: 0px;
 border-right: 100px solid transparent;
 border-bottom: 70px solid red;
 border-left: 100px solid transparent;
 -webkit-transform: rotate(-70deg);
 -moz-transform: rotate(-70deg);
 -ms-transform: rotate(-70deg);
 -o-transform: rotate(-70deg);
 content: '';
}

結果：

六、六角星

#star-six {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid red;
 position: relative;
}
#star-six:after {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid red;
 position: absolute;
 content: "";
 top: 30px;
 left: -50px;
}

七、無窮符號

長這樣：

#infinity {
 position: relative;
 width: 212px;
 height: 100px;
}
 
#infinity:before,
#infinity:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 60px;
 height: 60px;
 border: 20px solid red;
 -moz-border-radius: 50px 50px 0 50px;
 border-radius: 50px 50px 0 50px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
 
#infinity:after {
 left: auto;
 right: 0;
 -moz-border-radius: 50px 50px 50px 0;
 border-radius: 50px 50px 50px 0;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
}

八、心形~~

最后來一個愛你的形狀吧~~~~

心形~~~

先放最終結果：

代碼：

#heart {
 position: relative;
 width: 100px;
 height: 90px;
}
#heart:before,
#heart:after {
 position: absolute;
 content: "";
 left: 50px;
 top: 0;
 width: 50px;
 height: 80px;
 background: red;
 -moz-border-radius: 50px 50px 0 0;
 border-radius: 50px 50px 0 0;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-transform-origin: 0 100%;
 -moz-transform-origin: 0 100%;
 -ms-transform-origin: 0 100%;
 -o-transform-origin: 0 100%;
 transform-origin: 0 100%;
}
#heart:after {
 left: 0;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 -webkit-transform-origin: 100% 100%;
 -moz-transform-origin: 100% 100%;
 -ms-transform-origin: 100% 100%;
 -o-transform-origin: 100% 100%;
 transform-origin :100% 100%;
}

更多好玩的圖形，盡在hello程序媛哦~~

當然，上面的代碼我也已經整理好啦，需要的童鞋可以私信我領取代碼呀。

另外，不懂如何使用電腦自帶的記事本編輯html的小伙伴，也可以私信問我哦，我一定知無不答答無不盡~~

在線咨詢

上一篇：15個好看的Bootstrap HTML網站模板下載
下一篇：IT兄弟連 HTML5教程多媒體應用 HTML圖像地圖

您的項目需求

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

整合營銷服務商