利用CSS3的border-radius繪制太極及愛心圖案示例

太極圖
border-radius 除了做邊框圓角效果之外,把它用在畫圖示上的話,其實(shí)能產(chǎn)生出很多不同的創(chuàng)意哩。筆者今天要繼續(xù)使用它來(lái)教各位畫-太極圖。
檢視原始碼 HTML
- <body>
- <div class="taichi">
- <div class="white-circle"></div>
- <div class="black-circle"></div>
- </div>
- </body>
因?yàn)樘珮O圖中有一黑一白的圓,所以多放了兩個(gè) div 在區(qū)塊中。
接著請(qǐng)張大眼仔細(xì)看,筆者要先將大區(qū)塊分成一白一黑:
檢視原始碼 CSS
- .taichi {
- position: relative;
- width: 48px; /* 50 - 2 */
- height: 96px; /* 100 - 2 - 2 */
- background: #fff;
- border: 2px solid #000;
- border-width: 2px 50px 2px 2px;
- border-radius: 50%;
- }
一般的盒子模式(Box Model)是連同邊框?qū)挾榷加?jì)算在區(qū)塊的寬高中的,所以我們想要做一個(gè)寬高 100×100 的區(qū)塊,但邊框?qū)挾热绻?2px 的話,那么里面的部份應(yīng)該就是只有 96px。再來(lái)特別的是,筆者將右邊的邊框?qū)挾戎苯釉O(shè)定成 50px,所以區(qū)塊內(nèi)部的寬度就只需要 48px 就可以了。
當(dāng)這樣設(shè)定好再加上 border-radius 圓角效果之后,就會(huì)變成~
嘿嘿~已經(jīng)有一黑一白的區(qū)塊的,再來(lái)先補(bǔ)上一顆白圓:
檢視原始碼 CSS
- .white-circle {
- position: absolute;
- top: 0;
- left: 50%;
- background: #fff;
- border-radius: 50%;
- width: 48px;
- height: 48px;
- }
這邊就是直接產(chǎn)生一個(gè)完整的白色圓形并放在上半部的中間:
那黑色圓形就是放在下半部囉:
檢視原始碼 CSS
- .black-circle {
- position: absolute;
- top: 50%;
- left: 50%;
- background: #000;
- border-radius: 50%;
- width: 48px;
- height: 48px;
- }
看起來(lái)就已經(jīng)有 9 成像囉~
最后還差兩個(gè)相反顏色的小圓點(diǎn)在這兩個(gè)圓形中,這兩個(gè)小圓點(diǎn)我們只要使用 ::after 擬元素(Pseudo-elements) 就可以了:
檢視原始碼 CSS
- .white-circle::after {
- content: "";
- position: absolute;
- top: 17px; /* (50-16)/2 */
- left: 17px; /* (50-16)/2 */
- background: #000;
- border-radius: 50%;
- width: 16px;
- height: 16px;
- }
- .black-circle::after {
- content: "";
- position: absolute;
- top: 17px; /* (50-16)/2 */
- left: 17px; /* (50-16)/2 */
- background: #fff;
- border-radius: 50%;
- width: 16px;
- height: 16px;
- }
將將~是不是很神奇呢?。?br />
愛心
上面教各位使用 border-radius 來(lái)畫太極圖,下面則是要教各位一樣是使用圓角效果來(lái)愛心。
我們只需要一個(gè) div 區(qū)塊就可以了:
- <body>
- <div class="heart"></div>
- </body>
然后指定區(qū)塊的寬高:
檢視原始碼 CSS
- .heart {
- position: relative;
- width: 140px;
- height: 115px;
- }
一樣是將愛心分成左右兩區(qū)塊,一樣是先用 ::before 擬元素(Pseudo-elements)來(lái)產(chǎn)生左邊的區(qū)塊:
檢視原始碼 CSS
- .heart::before {
- content: "";
- position: absolute;
- left: 70px;
- top: 0;
- width: 70px;
- height: 115px;
- background: red;
- border-radius: 50px 50px 0 0;
- }
因?yàn)橹挥性O(shè)定左上及右上的圓角效果,所以就變成圓頭的柱子了:
接著筆者要改變它的旋轉(zhuǎn)中心點(diǎn)來(lái)把它往左旋轉(zhuǎn) 45 度:
檢視原始碼 CSS
- .heart::before {
- content: "";
- position: absolute;
- left: 70px;
- top: 0;
- width: 70px;
- height: 115px;
- background: red;
- border-radius: 50px 50px 0 0;
- -webkit-transform: rotate(-45deg);
- -moz-transform: rotate(-45deg);
- -o-transform: rotate(-45deg);
- transform: rotate(-45deg);
- -webkit-transform-origin: left bottombottom;
- -moz-transform-origin: left bottombottom;
- -o-transform-origin: left bottombottom;
- transform-origin: left bottombottom;
- }
transform-origin 可以改變?cè)氐闹行狞c(diǎn)。它跟 background-position 一樣是接受兩個(gè)值,第一個(gè)是設(shè)定水平,第二個(gè)是設(shè)定垂直。預(yù)設(shè)是以 center center 為主,現(xiàn)在筆者將它改成在左下方:
右邊的部份也一樣,但只是旋轉(zhuǎn)中心點(diǎn)改在右下,并往右旋轉(zhuǎn):
檢視原始碼 CSS
- .heart::after {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- width: 70px;
- height: 115px;
- background: red;
- border-radius: 50px 50px 0 0;
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- transform: rotate(45deg);
- -webkit-transform-origin: rightright bottombottom;
- -moz-transform-origin: rightright bottombottom;
- -o-transform-origin: rightright bottombottom;
- transform-origin: rightright bottombottom;
- }
當(dāng)兩邊都產(chǎn)生完后,一個(gè)紅通通的愛心就出現(xiàn)囉:
什么~中和的鐘先生問說怎么不會(huì)動(dòng)...沒關(guān)系,補(bǔ)上個(gè) animation 的動(dòng)畫效果給它:
檢視原始碼 CSS
- .heart {
- -webkit-animation: jump 1s infinite ease-out;
- -moz-animation: jump 1s infinite ease-out;
- -o-animation: jump 1s infinite ease-out;
- animation: jump 1s infinite ease-out;
- }
- @-webkit-keyframes jump {
- 0%, 60%, 75%, 90%, 100% {
- -webkit-transform: scale(1);
- }
- 15% {
- -webkit-transform: scale(0.6);
- }
- 30% {
- -webkit-transform: scale(1);
- }
- 45% {
- -webkit-transform: scale(0.7);
- }
- }
- @-moz-keyframes jump {
- 0%, 60%, 75%, 90%, 100% {
- -moz-transform: scale(1);
- }
- 15% {
- -moz-transform: scale(0.6);
- }
- 30% {
- -moz-transform: scale(1);
- }
- 45% {
- -moz-transform: scale(0.7);
- }
- }
- @-o-keyframes jump {
- 0%, 60%, 75%, 90%, 100% {
- -o-transform: scale(1);
- }
- 15% {
- -o-transform: scale(0.6);
- }
- 30% {
- -o-transform: scale(1);
- }
- 45% {
- -o-transform: scale(0.7);
- }
- }
- @keyframes jump {
- 0%, 60%, 75%, 90%, 100% {
- transform: scale(1);
- }
- 15% {
- transform: scale(0.6);
- }
- 30% {
- transform: scale(1);
- }
- 45% {
- transform: scale(0.7);
- }
- }
透過 transform 的 scale(x, y) 來(lái)改變愛心的大小,讓整個(gè)動(dòng)畫的看起來(lái)就象是噗通噗通的跳一樣:
相關(guān)文章
CSS3 border-radius圓角的實(shí)現(xiàn)方法及用法詳解
這篇文章主要介紹了CSS3 border-radius圓角的實(shí)現(xiàn)方法及用法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-14使用CSS的border-radius屬性 設(shè)置圓弧
這篇文章主要介紹了使用CSS的border-radius屬性 設(shè)置圓弧,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-26- 這篇文章主要介紹了css3 border-radius屬性詳解,這里整理了詳細(xì)的代碼資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-05
- 用CSS3的border-radius屬性來(lái)制作圓角邊框相當(dāng)順手,然而瀏覽器的兼容問題并不是太好處理,這里我們就來(lái)總結(jié)一下border-radius以外的CSS圓角邊框制作方法.2016-06-02
CSS3 border-radius(圓角)效果在線調(diào)試工具
這是一款可在線調(diào)試并預(yù)覽CSS3 border-radius(圓角)效果的工具。右側(cè)具有實(shí)時(shí)調(diào)試并顯示預(yù)覽效果的功能,同時(shí)能夠?qū)崟r(shí)生成對(duì)應(yīng)的css3效果代碼,方便需要的朋友使用。2016-05-31CSS3中border-radius屬性設(shè)定圓角的使用技巧
這篇文章主要介紹了CSS3中border-radius屬性設(shè)定圓角的使用技巧,border-radius的作用不止是最常用的圓角矩形,我們還可以利用它設(shè)置弧度來(lái)制作其他弧線邊框圖形,需要的朋友2016-05-10實(shí)例講解CSS3中的border-radius屬性
這篇文章主要介紹了實(shí)例講解CSS3中的border-radius屬性,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-18HTML+css盒子模型案例(圓,半圓等)“border-radius” 簡(jiǎn)單易上手
這篇文章主要介紹了HTML+css盒子模型案例(圓,半圓等)“border-radius” 簡(jiǎn)單易上手,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,2021-05-10