形元素的應(yīng)用是在網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)相對(duì)較新的發(fā)展。與互聯(lián)網(wǎng)普及初期相比，如今的網(wǎng)頁(yè)設(shè)計(jì)水平已經(jīng)超出很多人的想象，比如圓形的應(yīng)用，現(xiàn)在的CSS工具使圓圈的創(chuàng)建越來(lái)越容易，所以他們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)中的使用變得更加普遍。

當(dāng)然還有許多人認(rèn)為圓在網(wǎng)頁(yè)設(shè)計(jì)中使用比較困難，并且它的存在仍有爭(zhēng)議。然而，如果我們保持一個(gè)良好的網(wǎng)格布局，留有大量的空白，基于圓形的設(shè)計(jì)會(huì)成為網(wǎng)頁(yè)設(shè)計(jì)的亮點(diǎn)。

YES!為什么不大膽探索？你會(huì)發(fā)現(xiàn)，如果能成功運(yùn)用圓形元素，會(huì)有令你意想不到的效果，要知道，圓形要素往往是很吸引眼球的，它會(huì)讓你脫穎而出。所以，今天我們就與大家共同學(xué)習(xí)如何選擇合適的元素，并把它應(yīng)用在圓形圖案中。

Logo

導(dǎo)航欄

在今天的成長(zhǎng)和不斷發(fā)展的移動(dòng)市場(chǎng)，用圓圈作為導(dǎo)航正在成為一個(gè)日益流行和合乎邏輯的選擇。隨著的觸摸屏設(shè)備的興起，除了智能手機(jī)和平板電腦，這種圖案的導(dǎo)航應(yīng)用越來(lái)越廣泛，并有很好的理由。采用圓形的按鈕，可以直觀地與用戶連接，甚至模仿指尖的形狀，激勵(lì)用戶按它。

圖標(biāo)

圓形標(biāo)志肯定是在網(wǎng)頁(yè)設(shè)計(jì)中最常用的和運(yùn)行時(shí)間最長(zhǎng)的圓形元素。因?yàn)樗鼈兺ǔＪ菆D像，所以甚至不需要CSS提供太多的功能就可以達(dá)到運(yùn)用的要求，沒(méi)錯(cuò)，圓形可以自己去完美勝任任務(wù)，也許有人會(huì)認(rèn)為，圓形圖標(biāo)已經(jīng)在網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用了一段時(shí)間了，也應(yīng)有一些變化了，是不是應(yīng)該開(kāi)發(fā)更多樣化的趨勢(shì)？但我們也發(fā)現(xiàn)不知為何圓形越來(lái)越廣泛運(yùn)用，可能It just work吧，它就是有這樣的能力。

圖片預(yù)覽

我們已經(jīng)在很多網(wǎng)站中看到這種技術(shù)了，不得不說(shuō)還是很賞心悅目的的。而且，把一個(gè)預(yù)覽圖巧妙的放在一個(gè)剪裁圈里通常會(huì)讓人覺(jué)得很炫酷哦，這就達(dá)到了吸睛的效果，是的，圓形不僅會(huì)在視覺(jué)上引導(dǎo)用戶，還能更好的引導(dǎo)互動(dòng)與交流。至于可用性，只要給圓形圖像足夠的空間，它們一樣可以匹配網(wǎng)站創(chuàng)意與和諧的外觀。

Calls to action

網(wǎng)站導(dǎo)航和觸摸屏設(shè)備的普及讓CTAs呼吁欄也有了很好的圓形素材使用效果，不過(guò)，如果你在網(wǎng)站上以類似的方式同時(shí)呈現(xiàn)導(dǎo)航和CTAs，那就不太好了，你應(yīng)該盡量讓他們用不同方式脫穎而出。導(dǎo)航很必要，CTAs也非常重要，如何把兩部分都做得漂亮？對(duì)新的網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)，創(chuàng)建一個(gè)可視化的層次是不錯(cuò)的意見(jiàn)。

本文來(lái)源：視覺(jué)中國(guó)

<div class="tui-demo-7"></div>

<style type="text/css">
 .tui-demo-7 {
 width: 100px;
 height: 100px;
 margin: 50px auto;
 border: 1px solid #393D49;
 border-radius: 50%;
 position: relative;
 animation: tui-demo-7 2.0s linear infinite;
 }
 .tui-demo-7:after {
 content: "";
 width: 30px;
 height: 30px;
 border-radius: 50%;
 position: absolute;
 top: 0;
 left: 0;
 background: #5FB878;
 }
 @keyframes tui-demo-7 {
 0% {
 transform: rotate(0);
 }
 100% {
 transform: rotate(360deg);
 }
 }
</style>

SS圓形展開(kāi)菜單。

·1.設(shè)置開(kāi)關(guān)狀態(tài)為checked時(shí)子菜單的展開(kāi)收縮動(dòng)畫。

·2.設(shè)置開(kāi)關(guān)狀態(tài)為checked時(shí)子菜單的展開(kāi)收縮動(dòng)畫。

·3.設(shè)置開(kāi)關(guān)狀態(tài)為checked時(shí)子菜單的展開(kāi)收縮動(dòng)畫。

·4.重置開(kāi)關(guān)細(xì)節(jié)樣式。

·5.添加子菜單的詳細(xì)樣式。

·6.設(shè)置開(kāi)關(guān)狀態(tài)為checked時(shí)子菜單的展開(kāi)收縮動(dòng)畫。

·7.設(shè)置開(kāi)關(guān)狀態(tài)為checked時(shí)子菜單的展開(kāi)收縮動(dòng)畫。