欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

abgne   發(fā)布時(shí)間：2016-05-17 11:02:54   作者：佚名   我要評(píng)論
CSS3中的border-radius可以輕松地用來(lái)繪制弧線,如果只用來(lái)做圓角矩形的話可就太浪費(fèi)了,下面就來(lái)展示一下利用CSS3的border-radius繪制太極及愛心圖案示例,需要的朋友可以參考下

太極圖
border-radius 除了做邊框圓角效果之外，把它用在畫圖示上的話，其實(shí)能產(chǎn)生出很多不同的創(chuàng)意哩。筆者今天要繼續(xù)使用它來(lái)教各位畫-太極圖。

檢視原始碼 HTML

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <body>  
  2.  <div class="taichi">  
  3.   <div class="white-circle"></div>  
  4.   <div class="black-circle"></div>  
  5.  </div>  
  6. </body>  

因?yàn)樘珮O圖中有一黑一白的圓，所以多放了兩個(gè) div 在區(qū)塊中。

接著請(qǐng)張大眼仔細(xì)看，筆者要先將大區(qū)塊分成一白一黑：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .taichi {   
  2.  position: relative;   
  3.  width: 48px; /* 50 - 2 */  
  4.  height: 96px; /* 100 - 2 - 2 */  
  5.  background: #fff;   
  6.  border: 2px solid #000;   
  7.  border-width: 2px 50px 2px 2px;   
  8.  border-radius: 50%;   
  9. }  

一般的盒子模式(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ì)變成~
2016517110833210.png (120×120)

嘿嘿~已經(jīng)有一黑一白的區(qū)塊的，再來(lái)先補(bǔ)上一顆白圓：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .white-circle {   
  2.  position: absolute;   
  3.  top: 0;   
  4.  left: 50%;   
  5.  background: #fff;   
  6.  border-radius: 50%;   
  7.  width: 48px;   
  8.  height: 48px;   
  9. }  

這邊就是直接產(chǎn)生一個(gè)完整的白色圓形并放在上半部的中間：
2016517110925477.png (120×120)

那黑色圓形就是放在下半部囉：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .black-circle {   
  2.  position: absolute;   
  3.  top: 50%;   
  4.  left: 50%;   
  5.  background: #000;   
  6.  border-radius: 50%;   
  7.  width: 48px;   
  8.  height: 48px;   
  9. }  

看起來(lái)就已經(jīng)有 9 成像囉~
2016517110953720.png (120×120)

最后還差兩個(gè)相反顏色的小圓點(diǎn)在這兩個(gè)圓形中，這兩個(gè)小圓點(diǎn)我們只要使用 ::after 擬元素(Pseudo-elements) 就可以了：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .white-circle::after {   
  2.  content: "";   
  3.  position: absolute;   
  4.  top: 17px; /* (50-16)/2 */  
  5.  left: 17px; /* (50-16)/2 */  
  6.  background: #000;   
  7.  border-radius: 50%;   
  8.  width: 16px;   
  9.  height: 16px;   
  10. }   
  11. .black-circle::after {   
  12.  content: "";   
  13.  position: absolute;   
  14.  top: 17px; /* (50-16)/2 */  
  15.  left: 17px; /* (50-16)/2 */  
  16.  background: #fff;   
  17.  border-radius: 50%;   
  18.  width: 16px;   
  19.  height: 16px;   
  20. }  

將將~是不是很神奇呢?。?br />2016517111042392.png (120×120)

愛心
上面教各位使用 border-radius 來(lái)畫太極圖，下面則是要教各位一樣是使用圓角效果來(lái)愛心。

我們只需要一個(gè) div 區(qū)塊就可以了：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <body>  
  2.  <div class="heart"></div>  
  3. </body>  

然后指定區(qū)塊的寬高：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .heart {   
  2.  position: relative;   
  3.  width: 140px;   
  4.  height: 115px;   
  5. }  

一樣是將愛心分成左右兩區(qū)塊，一樣是先用 ::before 擬元素(Pseudo-elements)來(lái)產(chǎn)生左邊的區(qū)塊：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .heart::before {   
  2.  content: "";   
  3.  position: absolute;   
  4.  left: 70px;   
  5.  top: 0;   
  6.  width: 70px;   
  7.  height: 115px;   
  8.  background: red;   
  9.  border-radius: 50px 50px 0 0;   
  10. }  

因?yàn)橹挥性O(shè)定左上及右上的圓角效果，所以就變成圓頭的柱子了：
2016517111117036.png (200×200)

接著筆者要改變它的旋轉(zhuǎn)中心點(diǎn)來(lái)把它往左旋轉(zhuǎn) 45 度：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .heart::before {   
  2.  content: "";   
  3.  position: absolute;   
  4.  left: 70px;   
  5.  top: 0;   
  6.  width: 70px;   
  7.  height: 115px;   
  8.  background: red;   
  9.  border-radius: 50px 50px 0 0;   
  10.  -webkit-transform: rotate(-45deg);   
  11.  -moz-transform: rotate(-45deg);   
  12.  -o-transform: rotate(-45deg);   
  13.  transform: rotate(-45deg);   
  14.  -webkit-transform-origin: left bottombottom;   
  15.  -moz-transform-origin: left bottombottom;   
  16.  -o-transform-origin: left bottombottom;   
  17.  transform-origin: left bottombottom;   
  18. }  

transform-origin 可以改變?cè)氐闹行狞c(diǎn)。它跟 background-position 一樣是接受兩個(gè)值，第一個(gè)是設(shè)定水平，第二個(gè)是設(shè)定垂直。預(yù)設(shè)是以 center center 為主，現(xiàn)在筆者將它改成在左下方：
2016517111144455.png (200×200)

右邊的部份也一樣，但只是旋轉(zhuǎn)中心點(diǎn)改在右下，并往右旋轉(zhuǎn)：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .heart::after {   
  2.  content: "";   
  3.  position: absolute;   
  4.  top: 0;   
  5.  left: 0;   
  6.  width: 70px;   
  7.  height: 115px;   
  8.  background: red;   
  9.  border-radius: 50px 50px 0 0;   
  10.  -webkit-transform: rotate(45deg);   
  11.  -moz-transform: rotate(45deg);   
  12.  -o-transform: rotate(45deg);   
  13.  transform: rotate(45deg);   
  14.  -webkit-transform-origin: rightright bottombottom;   
  15.  -moz-transform-origin: rightright bottombottom;   
  16.  -o-transform-origin: rightright bottombottom;   
  17.  transform-origin: rightright bottombottom;   
  18. }  

當(dāng)兩邊都產(chǎn)生完后，一個(gè)紅通通的愛心就出現(xiàn)囉：
2016517111209126.png (200×200)

什么~中和的鐘先生問說怎么不會(huì)動(dòng)...沒關(guān)系，補(bǔ)上個(gè) animation 的動(dòng)畫效果給它：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .heart {   
  2.  -webkit-animation: jump 1s infinite ease-out;   
  3.  -moz-animation: jump 1s infinite ease-out;   
  4.  -o-animation: jump 1s infinite ease-out;   
  5.  animation: jump 1s infinite ease-out;   
  6. }   
  7. @-webkit-keyframes jump {   
  8.  0%, 60%, 75%, 90%, 100% {   
  9.   -webkit-transform: scale(1);   
  10.  }   
  11.  15% {   
  12.   -webkit-transform: scale(0.6);   
  13.  }   
  14.  30% {   
  15.   -webkit-transform: scale(1);   
  16.  }   
  17.  45% {   
  18.   -webkit-transform: scale(0.7);   
  19.  }   
  20. }   
  21. @-moz-keyframes jump {   
  22.  0%, 60%, 75%, 90%, 100% {   
  23.   -moz-transform: scale(1);   
  24.  }   
  25.  15% {   
  26.   -moz-transform: scale(0.6);   
  27.  }   
  28.  30% {   
  29.   -moz-transform: scale(1);   
  30.  }   
  31.  45% {   
  32.   -moz-transform: scale(0.7);   
  33.  }   
  34. }   
  35. @-o-keyframes jump {   
  36.  0%, 60%, 75%, 90%, 100% {   
  37.   -o-transform: scale(1);   
  38.  }   
  39.  15% {   
  40.    -o-transform: scale(0.6);   
  41.  }   
  42.  30% {   
  43.   -o-transform: scale(1);   
  44.  }   
  45.  45% {   
  46.   -o-transform: scale(0.7);   
  47.  }   
  48. }   
  49. @keyframes jump {   
  50.  0%, 60%, 75%, 90%, 100% {   
  51.   transform: scale(1);   
  52.  }   
  53.  15% {   
  54.   transform: scale(0.6);   
  55.  }   
  56.  30% {   
  57.   transform: scale(1);   
  58.  }   
  59.  45% {   
  60.   transform: scale(0.7);   
  61.  }   
  62. }  

透過 transform 的 scale(x, y) 來(lái)改變愛心的大小，讓整個(gè)動(dòng)畫的看起來(lái)就象是噗通噗通的跳一樣：
2016517111241939.gif (200×200)

相關(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屬性詳解

    這篇文章主要介紹了css3 border-radius屬性詳解,這里整理了詳細(xì)的代碼資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-07-05

  • border-radius以外的CSS圓角邊框制作方法

    用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-31

  • CSS3中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-18

  • HTML+css盒子模型案例(圓，半圓等)“border-radius” 簡(jiǎn)單易上手

    這篇文章主要介紹了HTML+css盒子模型案例(圓，半圓等)“border-radius” 簡(jiǎn)單易上手,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，
    2021-05-10

最新評(píng)論