整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在之前的文章中有講解過，如何通過CSS代碼實現類似于杯子和心形的圖案，今天這篇文章我們繼續來看看兩個復雜的圖案。
文章中的代碼已經放到github上了，感興趣的同學可以自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure2.html
CSS3
首先我們來看看相機的實現效果。
效果圖
然后我們再一步步分析如何實現這個效果。
同樣我們需要對整個圖案進行拆分，主要分為三個部分。
相機的主體部分，背景色為黑色。
右上角的白色背景小方框。
中間的幾個黑白相間的圓環。
相機主體部分就是一個div，完全通過border屬性設置，因此需要保證其width: 0。
由于主體部分需要呈現為長方形，所以border的左右兩個方向要比上下兩個方向值大，border在不設置顏色的情況下默認為黑色。
最后設置border-radius值，讓其四個角呈現為圓角。
最終得到的相機主體部分CSS屬性如下。
相機主體CSS屬性
相機的右上角有個小的長方形，我們通過:after偽元素實現。
將其位置設置為絕對定位position: absolute。
設置top和left兩個方向的偏移量。
設置一個寬度但是高度值為0，通過border-top讓其顯示為一個長方形，border的顏色設置為白色。
偽元素的content: ''
通過以上的分析我們得到以下的CSS代碼。
右上角CSS代碼
大家都很容易想到中間的圓環肯定是通過偽元素:before來實現了。
將其位置定義為絕對定位position: absolute。
設置top和left兩個方向的偏移量。
由于這里有圓環，我們設置其內容的高度和寬度。
因為是圓形，border-radius設置為50%
設置border值，使其背景色為白色。
通過以上的分析我們得到如下的CSS代碼。
CSS代碼
運行上述的代碼后我們卻發現得到的圖案是這樣的。
運行后的圖案
是不是覺得少了點什么？
對，中間的圓形少了一個環，那么我們該怎么補充上這個環呢？
這里我們可以使用神奇的box-shadow屬性。
box-shadow屬性主要是用來給元素周圍添加陰影效果的，它的基本用法大家可以看看CSS3的文檔。
box-shadow接收的第三個參數表示的是陰影模糊的半徑，如果其值為0，則表示不具有模糊效果，本例子中因為要在圓形外面再增加一個圓形圖案，就需要將其值設置為0。
還有很重要的一點就是：可以給box-shadow設置多組值，任意一個相同的屬性，后面定義的值都會兼容前面的值，并不會覆蓋掉。
所以同心圓就只需要將box-shadow設置為兩組值即可，外層與內層顏色不同。
最終得到的中間圓環CSS屬性如下所示。
CSS代碼
運行上述代碼后就可以得到文字一開始的相機圖案了。
接下來我們再看一個通過box-shadow可以很容實現的月亮圖案。
月亮圖案
乍一看這個圖案沒有那么容易實現，其實熟悉border-radius和box-shadow屬性的同學可以很容易想到，這個圖案實現的核心就是利用box-shadow設置右側陰影。
然后設置rotate值使其旋轉一定的角度。
通過以上的分析可以得到以下的代碼。
月亮的CSS代碼
運行上述代碼即可得到月亮圖案。
今天這篇文章通過CSS屬性實現了相機和月亮兩個圖案，再結合前幾篇文章中實現的杯子和心形圖案，相信大家對CSS的神奇之處有所折服吧。
大家也趕緊動手自己實現一些常用的圖案吧。
太陽、地球、月球應該是我們人人都比較了解的天體，它們的運動軌跡是我們研究星系乃至宇宙的重要信息之一。那么我們如何使用HTML + CSS來模擬這么一個效果呢？
簡單的來說就是轉圈。
// 定義軌跡
@keyframes rotate {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}/* 定義一個太陽 */
.sum {
position: relative;
margin: 100px auto 0;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(
circle at center,
#ff9b9b 0%,
rgba(235, 36, 64, 0) 70%
);
}地球繞太陽一圈的時間是365.24天左右，這被稱為一年。每年有一個額外的日子被稱為閏年，這一年會有366天，目的是為了彌補地球繞太陽的公轉周期與我們日歷的定義周期之間的不匹配。
/* 定義地球位置及公轉信息 */
.earth {
position: absolute;
/* 定義地球與太陽的相對位置以及軌道線 */
width: 300px;
height: 300px;
margin-left:-50px;
margin-top:-50px;
border:1px solid #dddddd;
border-radius:50%;
/*動畫： 設定公轉時間以及軌跡 */
animation: rotate 36.524s infinite linear;
}
/* 地球本體 */
.earth::before{
content: ' ';
position:absolute;
background-color: blue;
width: 30px;
height: 30px;
margin-left:70px;
border-radius: 30px;
}月球繞地球一圈的時間大約是27.32天。這被稱為一個月（也稱為地月周期）。月亮的運動軌跡略呈橢圓形，因此月球與地球的距離會隨時間而變化，這也導致月球的運動速度略有不同，有時會更快，有時會更慢，但平均值仍然是27.32天左右。
/* 定義月球位置及公轉信息 */
.moon {
position: absolute;
/* 定義月球與地球的相對位置以及軌道線 */
width: 60px;
height: 60px;
margin-left:55px;
margin-top:-15px;
border:1px solid #dddddd;
border-radius:50%;
/*動畫： 設定公轉時間以及軌跡 */
animation: rotate 2.732s infinite linear;
}
/* 月球本體 */
.moon::before{
content: ' ';
position:absolute;
background-color: blue;
width: 10px;
height: 10px;
margin-left:7px;
border-radius: 10px;
}<div class="sum">
<div class="earth">
<div class="moon"></div>
</div>
</div>SS的強大和精妙，只有在認真研讀其代碼之后才會深刻明白。
今日繼續用純CSS畫圖，并給大家整理了本文中所有代碼，需要的小伙伴可以私信我哦。
首先，用CSS畫一個陰陽圖，如下：
代碼也很簡單：
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
當然，顏色什么的，可以隨便改啦~
再畫一個可愛的雞蛋~~~像這樣：
代碼僅僅幾句話：
#egg {
display:block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
長這樣：
代碼非常非常少：
#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
是不是很神奇？不敢相信這幾句代碼居然有這樣的功力？
那就打開電腦，按照我之前講的方法創建一個html試試吧~
不知道怎么創建的小伙伴看這里>>css3制作圖形大全：簡單幾句代碼畫出漂亮的圖形，一起來看看吧~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
