咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

做网站

小程序开发

外贸网站建设

APP软件开发

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

新网创想网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSS3中怎么利用border-radius绘制一个太极

本篇文章给大家分享的是有关CSS3中怎么利用border-radius绘制一个太极，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于企业网站建设,高端网页制作,对成都效果图设计等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业seo优化优化,H5建站,响应式网站。

太极图
border-radius 除了做边框圆角效果之外，把它用在画图示上的话，其实能产生出很多不同的创意哩。笔者今天要继续使用它来教各位画-太极图。

检视原始码 HTML

XML/HTML Code复制内容到剪贴板

  1.   

  2.    

  3.   

  

  •   

    •   

  •  

    •   

  •   

    • 因为太极图中有一黑一白的圆，所以多放了两个 div 在区块中。

    接着请张大眼仔细看，笔者要先将大区块分成一白一黑：

    检视原始码 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)是连同边框宽度都计算在区块的宽高中的，所以我们想要做一个宽高 100×100 的区块，但边框宽度如果是 2px 的话，那么里面的部份应该就是只有 96px。再来特别的是，笔者将右边的边框宽度直接设定成 50px，所以区块内部的宽度就只需要 48px 就可以了。

    当这样设定好再加上 border-radius 圆角效果之后，就会变成~
    CSS3中怎么利用border-radius绘制一个太极

    嘿嘿~已经有一黑一白的区块的，再来先补上一颗白圆：

    检视原始码 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. }  

    这边就是直接产生一个完整的白色圆形并放在上半部的中间：
    CSS3中怎么利用border-radius绘制一个太极

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

    检视原始码 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 成像囉~
    CSS3中怎么利用border-radius绘制一个太极

    最后还差两个相反颜色的小圆点在这两个圆形中，这两个小圆点我们只要使用 ::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. }  

    将将~是不是很神奇呢！？
    CSS3中怎么利用border-radius绘制一个太极

    爱心
    上面教各位使用 border-radius 来画太极图，下面则是要教各位一样是使用圆角效果来爱心。

    我们只需要一个 div 区块就可以了：

    XML/HTML Code复制内容到剪贴板

    1.   

    2.  

      

  •   

    • 然后指定区块的宽高：

    检视原始码 CSS

    CSS Code复制内容到剪贴板

    1. .heart {   

    2.  position: relative;   

    3.  width: 140px;   

    4.  height: 115px;   

    5. }  

    一样是将爱心分成左右两区块，一样是先用 ::before 拟元素(Pseudo-elements)来产生左边的区块：

    检视原始码 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. }  

    因为只有设定左上及右上的圆角效果，所以就变成圆头的柱子了：
    CSS3中怎么利用border-radius绘制一个太极

    接着笔者要改变它的旋转中心点来把它往左旋转 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 为主，现在笔者将它改成在左下方：
    CSS3中怎么利用border-radius绘制一个太极

    右边的部份也一样，但只是旋转中心点改在右下，并往右旋转：

    检视原始码 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. }  

    当两边都产生完后，一个红通通的爱心就出现囉：
    CSS3中怎么利用border-radius绘制一个太极

    什么~中和的钟先生问说怎么不会动...没关系，补上个 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) 来改变爱心的大小，让整个动画的看起来就象是噗通噗通的跳一样：
    CSS3中怎么利用border-radius绘制一个太极

    以上就是CSS3中怎么利用border-radius绘制一个太极，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


    网页名称：CSS3中怎么利用border-radius绘制一个太极
    分享地址：http://wjwzjz.com/article/gjjcod.html

    其他资讯

    分享至：
    关于我们
    公司简介 发展历程
    服务项目
    高端网站建设 小程序开发 APP开发 网络营销
    建站知识
    行业新闻 建站学堂 常见问题
    联系我们
    公司地址 人才招聘
    成都
    电话：028-86922220
    地址：成都市太升南路288号锦天国际A幢1002号
    版权所有：成都新网创想广告设计中心（普通合伙） 蜀ICP备11025516号-13
    在线咨询
    服务热线
    服务热线：028-86922220
    TOP