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

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

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

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

檢視原始碼 HTML

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

因為太極圖中有一黑一白的圓，所以多放了兩個 div 在區(qū)塊中。

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

檢視原始碼 CSS

CSS Code復制內容到剪貼板
  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ū)塊的寬高中的，所以我們想要做一個寬高 100×100 的區(qū)塊，但邊框寬度如果是 2px 的話，那么里面的部份應該就是只有 96px。再來特別的是，筆者將右邊的邊框寬度直接設定成 50px，所以區(qū)塊內部的寬度就只需要 48px 就可以了。

當這樣設定好再加上 border-radius 圓角效果之后，就會變成~
2016517110833210.png (120×120)

嘿嘿~已經有一黑一白的區(qū)塊的，再來先補上一顆白圓：

檢視原始碼 CSS

CSS Code復制內容到剪貼板
  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. }  

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

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

檢視原始碼 CSS

CSS Code復制內容到剪貼板
  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. }  

看起來就已經有 9 成像囉~
2016517110953720.png (120×120)

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

檢視原始碼 CSS

CSS Code復制內容到剪貼板
  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. }  

將將~是不是很神奇呢??？
2016517111042392.png (120×120)

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

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

XML/HTML Code復制內容到剪貼板
  1. <body>  
  2.  <div class="heart"></div>  
  3. </body>  

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

檢視原始碼 CSS

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

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

檢視原始碼 CSS

CSS Code復制內容到剪貼板
  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. }  

因為只有設定左上及右上的圓角效果，所以就變成圓頭的柱子了：
2016517111117036.png (200×200)

接著筆者要改變它的旋轉中心點來把它往左旋轉 45 度：

檢視原始碼 CSS

CSS Code復制內容到剪貼板
  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 可以改變元素的中心點。它跟 background-position 一樣是接受兩個值，第一個是設定水平，第二個是設定垂直。預設是以 center center 為主，現在筆者將它改成在左下方：
2016517111144455.png (200×200)

右邊的部份也一樣，但只是旋轉中心點改在右下，并往右旋轉：

檢視原始碼 CSS

CSS Code復制內容到剪貼板
  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. }  

當兩邊都產生完后，一個紅通通的愛心就出現囉：
2016517111209126.png (200×200)

什么~中和的鐘先生問說怎么不會動...沒關系，補上個 animation 的動畫效果給它：

檢視原始碼 CSS

CSS Code復制內容到剪貼板
  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) 來改變愛心的大小，讓整個動畫的看起來就象是噗通噗通的跳一樣：
2016517111241939.gif (200×200)

相關文章

  • CSS3 border-radius圓角的實現方法及用法詳解

    這篇文章主要介紹了CSS3 border-radius圓角的實現方法及用法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-09-14

  • 使用CSS的border-radius屬性 設置圓弧

    這篇文章主要介紹了使用CSS的border-radius屬性 設置圓弧,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-11-26

  • css3 border-radius屬性詳解

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

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

    用CSS3的border-radius屬性來制作圓角邊框相當順手,然而瀏覽器的兼容問題并不是太好處理,這里我們就來總結一下border-radius以外的CSS圓角邊框制作方法.
    2016-06-02

  • CSS3 border-radius(圓角)效果在線調試工具

    這是一款可在線調試并預覽CSS3 border-radius(圓角)效果的工具。右側具有實時調試并顯示預覽效果的功能，同時能夠實時生成對應的css3效果代碼，方便需要的朋友使用。
    2016-05-31

  • CSS3中border-radius屬性設定圓角的使用技巧

    這篇文章主要介紹了CSS3中border-radius屬性設定圓角的使用技巧,border-radius的作用不止是最常用的圓角矩形,我們還可以利用它設置弧度來制作其他弧線邊框圖形,需要的朋友
    2016-05-10

  • 實例講解CSS3中的border-radius屬性

    這篇文章主要介紹了實例講解CSS3中的border-radius屬性,是CSS3入門學習中的基礎知識,需要的朋友可以參考下
    2015-08-18

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

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

最新評論