網頁中我們用到愛心❤的地方不少，如看到一篇喜歡的文章給他點個贊，表白你喜歡的女孩，給他比個小心心什麼的。
今天用純css寫乙個簡單的愛心。
簡單思路如下：
1.先做乙個盒子，裡面包含兩個小盒子
2.兩個小盒子弄成一樣大小的長方形
3.通過border-radius、transform，進行調整，整合成乙個愛心
**如下：
html部分：
doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
> 愛心
title
>
head
>
<
body
>
<
div
class
="contain"
>
<
div
class
="right"
>
div>
<
div
class
="left"
>
div>
div>
body
>
html
>
css部分：
.contain.left.right
注：因各瀏覽器對css3支援不一的關係，所以需要在transform前加各種瀏覽器識別字首，我這偷了個懶就沒詳細寫上了。
-ms-transform:rotate(7deg); //-ms代表ie核心識別碼-moz-transform:rotate(7deg); //-moz代表火狐核心識別碼
-webkit-transform:rotate(7deg); //-webkit代表谷歌核心識別碼
-o-transform:rotate(7deg); //-o代表歐朋【opera】核心識別碼
transform:rotate(7deg); //統一標識語句。
最後一句最好還是寫上，符合w3c標準。
CSS簡單動畫的製作
簡單動畫通常稱之為 過渡transition transition是css屬性，通常表示為在一定時間內，從乙個值變化為另乙個值。transition property 需要過渡的屬性 transition duration 需要過渡的時間 transition timing function 過渡的...
使用CheckBox的屬性製作純css動態導航欄
前提 很多時候 我們的網頁都需要乙個垂直的導航欄 可以分類 有分類 自然就有展開 關閉的功能 你還在使用jquery操作d程式設計客棧om來製作嗎？那你就out了！方案 使用checkbox 的 checked 屬性 巧妙地製作導航欄 結果 我們主要製作成這樣這樣的的導航欄 首先 我們寫出相對的ht...
css 純 css 製作帶三角的邊框
首先附上效果圖 以上的效果完全是用 css 來實現的，那麼是怎麼實現的呢？我們知道 html 中有一些特殊的字元，具體的 html特殊字元大全 通過特殊字元 利用 css 中的 margin 或者 position 方法完全可以實現以上效果。doctype html html lang en us ...