`

css绘图

    博客分类：
  • css
 
阅读更多

1.border绘图

原理归纳：疑似找到box中点，当邻边同样有外边距时，沿两边框长度形成的角度发射线向外绘制三角形得到每一条边上的外边距，同时形成圆角。

原理演绎：暂无浏览器渲染原理、C++造诣。

 .border {

  width:0px;

  height:0px;

  border: 50px solid;

  border-color: #7cb5ec #8085e8 #90ed7d #f7a35c;

}



 .border {

  width:0px;

  height:0px;

  border: 50px solid;

  border-color: #7cb5ec transparent transparent transparent;

}



 .border {

  width: 0; 

  height:0;

  border-top: 50px solid #7cb5ec;

  border-right: 50px solid #8085e8;

  border-left: 50px solid #90ed7d;

}

 

浏览器无显示输出

.border {

  width: 0; 

  height:0;

  border-top: 40px solid #ADFF2F;

  border-bottom: 40px solid #FF0000;

}

 

延伸：

#star-six {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid #7cb5ec;

    position: relative;

}

#star-six:after {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 100px solid #7cb5ec;

    position: absolute;

    content: "";

    top: 30px;

    left: -50px;

}


#star-five {

   margin: 50px 0;

   position: relative;

   display: block;

   color: #7cb5ec;

   width: 0px;

   height: 0px;

   border-right:  100px solid transparent;

   border-bottom: 70px  solid #7cb5ec;

   border-left:   100px solid transparent;

   -moz-transform:    rotate(35deg);

   -webkit-transform: rotate(35deg);

   -ms-transform:     rotate(35deg);

   -o-transform:      rotate(35deg);

}

#star-five:before {

   border-bottom: 80px solid #7cb5ec;

   border-left: 30px solid transparent;

   border-right: 30px solid transparent;

   position: absolute;

   height: 0;

   width: 0;

   top: -45px;

   left: -65px;

   display: block;

   content: '';

   -webkit-transform: rotate(-35deg);

   -moz-transform:    rotate(-35deg);

   -ms-transform:     rotate(-35deg);

   -o-transform:      rotate(-35deg); 

}

#star-five:after {

   position: absolute;

   display: block;

   color: #7cb5ec;

   top: 3px;

   left: -105px;

   width: 0px;

   height: 0px;

   border-right: 100px solid transparent;

   border-bottom: 70px solid #7cb5ec;

   border-left: 100px solid transparent;

   -webkit-transform: rotate(-70deg);

   -moz-transform:    rotate(-70deg);

   -ms-transform:     rotate(-70deg);

   -o-transform:      rotate(-70deg);

   content: '';

}



 #hexagon {

    width: 100px;

    height: 55px;

    background: #7cb5ec;

    position: relative;

}

#hexagon:before {

    content: "";

    position: absolute;

    top: -25px; 

    left: 0;

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 25px solid #7cb5ec;

}

#hexagon:after {

    content: "";

    position: absolute;

    bottom: -25px; 

    left: 0;

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 25px solid #7cb5ec;

}

 

 

 #heart {

    position: relative;

    width: 100px;

    height: 90px;

}

#heart:before,

#heart:after {

    position: absolute;

    content: "";

    left: 50px;

    top: 0;

    width: 50px;

    height: 80px;

    background: #7cb5ec;

    -moz-border-radius: 50px 50px 0 0;

    border-radius: 50px 50px 0 0;

    -webkit-transform: rotate(-45deg);

       -moz-transform: rotate(-45deg);

        -ms-transform: rotate(-45deg);

         -o-transform: rotate(-45deg);

            transform: rotate(-45deg);

    -webkit-transform-origin: 0 100%;

       -moz-transform-origin: 0 100%;

        -ms-transform-origin: 0 100%;

         -o-transform-origin: 0 100%;

            transform-origin: 0 100%;

}

#heart:after {

    left: 0;

    -webkit-transform: rotate(45deg);

       -moz-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

         -o-transform: rotate(45deg);

            transform: rotate(45deg);

    -webkit-transform-origin: 100% 100%;

       -moz-transform-origin: 100% 100%;

        -ms-transform-origin: 100% 100%;

         -o-transform-origin: 100% 100%;

            transform-origin :100% 100%;

} 

 


 #infinity {

    position: relative;

    width: 212px;

    height: 100px;

}

#infinity:before,

#infinity:after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 60px;

    height: 60px;    

    border: 20px solid #7cb5ec;

    -moz-border-radius: 50px 50px 0 50px;

         border-radius: 50px 50px 0 50px;

    -webkit-transform: rotate(-45deg);

       -moz-transform: rotate(-45deg);

        -ms-transform: rotate(-45deg);

         -o-transform: rotate(-45deg);

            transform: rotate(-45deg);

}

#infinity:after {

    left: 70px;

    right: 0;

    -moz-border-radius: 50px 50px 50px 0;

         border-radius: 50px 50px 50px 0;

    -webkit-transform: rotate(45deg);

       -moz-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

         -o-transform: rotate(45deg);

            transform: rotate(45deg);

}

 


 #egg {

   display:block;

   width: 126px; 

   height: 180px;

   background-color: #7cb5ec;

   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;

   border-radius:        50%   50%  50%  50%  / 60%   60%   40%  40%;

}

 


 #pacman {

  width: 0px;

  height: 0px;

  border-right: 60px solid transparent;

  border-top: 60px solid #7cb5ec;

  border-left: 60px solid #7cb5ec;

  border-bottom: 60px solid #7cb5ec;

  border-top-left-radius: 60px;

  border-top-right-radius: 60px;

  border-bottom-left-radius: 60px;

  border-bottom-right-radius: 60px;

}



 #talkbubble {

   width: 120px; 

   height: 80px; 

   background: #7cb5ec;

   position: relative;

   -moz-border-radius:    10px; 

   -webkit-border-radius: 10px; 

   border-radius:         10px;

}

#talkbubble:before {

   content:"";

   position: absolute;

   right: 100%;

   top: 26px;

   width: 0;

   height: 0;

   border-top: 13px solid transparent;

   border-right: 18px solid #7cb5ec;

   border-bottom: 13px solid transparent;

}

 


 #burst-12 {

    background: #7cb5ec;

    width: 80px;

    height: 80px;

    position: relative;

    text-align: center;

}

#burst-12:before, #burst-12:after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    height: 80px;

    width: 80px;

    background: #7cb5ec;

}

#burst-12:before {

    -webkit-transform: rotate(30deg);

       -moz-transform: rotate(30deg);

        -ms-transform: rotate(30deg);

         -o-transform: rotate(30deg);

            transform: rotate(30deg);

}

#burst-12:after {

    -webkit-transform: rotate(60deg);

       -moz-transform: rotate(60deg);

        -ms-transform: rotate(60deg);

         -o-transform: rotate(60deg);

            transform: rotate(60deg);

}

 

进阶：

 

气泡框


 .triangle-isosceles {

  position:relative;

  padding:15px;

  margin:1em 0 3em;

  width: 400px;

  color:#fff;

  background:#f3961c; /* default background for browsers without gradient support */

  /* css3 */

  background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));

  background:-moz-linear-gradient(#2e88c4, #075698);

  background:-o-linear-gradient(#2e88c4, #075698);

  background:linear-gradient(#2e88c4, #075698);

  -webkit-border-radius:10px;

  -moz-border-radius:10px;

  border-radius:10px;

}

.triangle-isosceles:after {

  content:"";

  position:absolute;

  bottom:-15px; /* value = - border-top-width - border-bottom-width */

  left:50px; /* controls horizontal position */

  border-width:15px 15px 0; /* vary these values to change the angle of the vertex */

  border-style:solid;

  border-color:#075698 transparent;

  /* reduce the damage in FF3.0 */

  display:block;

  width:0;

}

 



 .triangle-border {

  position:relative;

  padding:15px;

  margin:1em 0 3em;

  border:5px solid #5a8f00;

  color:#333;

  background:#fff;

  /* css3 */

  -webkit-border-radius:10px;

  -moz-border-radius:10px;

  border-radius:10px;

}

.triangle-border:before {

  content:"";

  position:absolute;

  bottom:-20px; /* value = - border-top-width - border-bottom-width */

  left:40px; /* controls horizontal position */

  border-width:20px 20px 0;

  border-style:solid;

  border-color:#5a8f00 transparent;

  /* reduce the damage in FF3.0 */

  display:block;

  width:0;

}

.triangle-border:after {

  content:"";

  position:absolute;

  bottom:-13px; /* value = - border-top-width - border-bottom-width */

  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */

  border-width:13px 13px 0;

  border-style:solid;

  border-color:#fff transparent;

  /* reduce the damage in FF3.0 */

  display:block;

  width:0;

}

 


<div class="oval-thought"><p style=“padding:0;margin:0”>nihao</p></div>
 .oval-thought {

  position:relative;

  width:270px;

  padding:50px 40px;

  margin:1em auto 80px;

  text-align:center;

  color:#fff;

  background:#075698;

  /* css3 */

  background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));

  background:-moz-linear-gradient(#2e88c4, #075698);

  background:-o-linear-gradient(#2e88c4, #075698);

  background:linear-gradient(#2e88c4, #075698);

  /*

  NOTES:

  -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4

  -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4

  Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this

  */

  -webkit-border-top-left-radius:220px 120px;

  -webkit-border-top-right-radius:220px 120px;

  -webkit-border-bottom-right-radius:220px 120px;

  -webkit-border-bottom-left-radius:220px 120px;

  -moz-border-radius:220px / 120px;

  border-radius:220px / 120px;

}

.oval-thought:before {

  content:"";

  position:absolute;

  bottom:-30px;

  left:50px;

  width:30px;

  height:30px;

  background:#075698;

  /* css3 */

  -webkit-border-radius:30px;

  -moz-border-radius:30px;

  border-radius:30px;

}

.oval-thought:after {

  content:"";

  position:absolute;

  bottom:-40px;

  left:30px;

  width:15px;

  height:15px;

  background:#075698;

  /* css3 */

  -webkit-border-radius:15px;

  -moz-border-radius:15px;

  border-radius:15px;

}

 


 .oval-quotes {

  position:relative;

  width:400px;

  height:350px;

  margin:2em auto 10px;

  color:#fff;

  background:#7cb5ec;

  /* css3 */

  /*

  NOTES:

  -webkit-border-radius:Apx Bpx; // produces oval in safari 4 and chrome 4

  -webkit-border-radius:Apx / Bpx; // produces oval in chrome 4 (again!) but not supported in safari 4

  Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this

  */

  -webkit-border-top-left-radius:400px 350px;

  -webkit-border-top-right-radius:400px 350px;

  -webkit-border-bottom-right-radius:400px 350px;

  -webkit-border-bottom-left-radius:400px 350px;

  -moz-border-radius:400px / 350px;

  border-radius:400px / 350px;

}

.oval-quotes:before {

  content:"\201C";

  position:absolute;

  z-index:1;

  top:20px;

  left:20px;

  font:80px/1 Georgia, serif;

  color:#7cb5ec;

}

.oval-quotes:after {

  content:"\201D";

  position:absolute;

  z-index:1;

  bottom:0;

  right:20px;

  font:80px/0.25 Georgia, serif;

  color:#7cb5ec;

}

.oval-quotes p {

  width:250px;

  height:250px;

  padding:50px 0 0;

  margin:0 auto;

  text-align:center;

  font-size:35px;

  line-height: 250px;

}

.oval-quotes p:before {

  content:"";

  position:absolute;

  z-index:-1;

  bottom:-30px;

  right:55%;

  width:180px; /* wider than necessary to make it look a bit better in IE8 */

  height:60px;

  background:#fff; /* need this for webkit - bug in handling of border-radius */

  /* css3 */

  -webkit-border-bottom-right-radius:40px 50px;

  -moz-border-radius-bottomright:40px 50px;

  border-bottom-right-radius:40px 50px;

  /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */

  -webkit-transform:translate(-30px, -2px);

  -moz-transform:translate(-30px, -2px);

  -ms-transform:translate(-30px, -2px);

  -o-transform:translate(-30px, -2px);

  transform:translate(-30px, -2px);

}

.oval-quotes p:after {

  content:"";

  position:absolute;

  z-index:-2;

  bottom:-30px;

  right:25%;

  height:80px;

  border-right:200px solid #7cb5ec;

  background:#7cb5ec; /* need this for webkit - bug in handling of border-radius */

  /* css3 */

  -webkit-border-bottom-right-radius:200px 100px;

  -moz-border-radius-bottomright:200px 100px;

  border-bottom-right-radius:200px 100px;

  /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */

  -webkit-transform:translate(0, -2px);

  -moz-transform:translate(0, -2px);

  -ms-transform:translate(0, -2px);

  -o-transform:translate(0, -2px);

  transform:translate(0, -2px);

  /* reduce the damage in FF3.0 */

  display:block;

  width:0;

}

 

 

 

 2.css3-transform，2D/3D转换

 

transform:none;不作任何转换

 

transform:translateX(x);平移

 

transform:translateY(y);

transform:translateZ(z);

transform:translate(x,y);

transform:translate3d(x,y,z);

 

transform:scaleX(x);缩放

transform:scaleY(y);

transform:scaleZ(z);

transform:scale(x,y);

transform:scale3d(x,y,z);

 

transform:rotateX(angle);绕X轴旋转，到180°即是垂直翻转

transform:rotateY(angle);

transform:rotateZ(angle);

transform:rotate(angle);默认绕着中心旋转

transform:rotate3d(angle);

 

transform:skewX(angle);水平方向不变，垂直方向倾斜

transform:skewY(angle);

transform:skew(angle,angle);

 

transform:matrix(a,b,c,d,e,f);矩阵运算，[[a,c,f],[b,d,e],[0,0,0]]*[[x],[y],[1]]的形式构建新的图形，a、b、c、d约定旋转和缩放，e、f平移

transform:matrix3d(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p);
 

 

 

3.css动画-transition

 

transition: property duration timing-function delay;鼠标移近、点击后触发动画效果

transition-property触发动效的css属性，none为无属性触发，all为全属性触发

transition-duration动画效果持续多少时间

transition-timing-function动效的时间曲线

transition-delay动效开始的时间

 

transition属性详解：http://www.php100.com/html/webkaifa/DIV_CSS/2012/1029/11403.html

 

示例：

div{

width:100px;

transition:width 2s;

-webkit-transition:width 2s; /* safari */

}

div:hover{width:300px;}

 

进阶：随着表单元素获得焦点，聚焦框移动到相应表单元素上

 

 

延伸：

鼠标移近后旋转的图片

@keyframes spin {

from { none;} 

to { transform: rotate(360deg);}

}

img {

-webkit-mask-box-image: url(../images/mask.png);

}

img:hover {

animation-name: spin;

animation-duration: 1.5s;

animation-iteration-count: infinite;

animation-direction: ltr;

}

 

 

常见图形

 

按钮


 .awesome{

background: #222 url(/images/alert-overlay.png) repeat-x;

display: inline-block;

padding: 5px 10px 6px;

color: #fff;

text-decoration: none;

font-weight: bold;

line-height: 1;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-moz-box-shadow: 0 1px 3px #999;

-webkit-box-shadow: 0 1px 3px #999;

text-shadow: 0 -1px 1px #222;

border-bottom: 1px solid #222;

position: relative;

cursor: pointer;

}

/* Sizes ---------- */

.small.awesome {

font-size: 11px;

}

.medium.awesome {

font-size: 13px;

}

.large.awesome {

font-size: 14px;

padding: 8px 14px 9px;

}

/* Colors ---------- */

.blue.awesome {

background-color: #2daebf;

}

.red.awesome {

background-color: #e33100;

}

.magenta.awesome {

background-color: #a9014b;

}

.orange.awesome {

background-color: #ff5c00;

}

.yellow.awesome {

background-color: #ffb515;

}

 

 

 

http://webjx.com/css/divcss-24428.html

http://blog.csdn.net/dojotoolkit/article/details/6859754

http://zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

http://webdesignerwall.com/tutorials/css3-dropdown-menu

http://www.php100.com/html/webkaifa/DIV_CSS/2012/1029/11403.html

  • 大小: 2.8 KB
  • 大小: 1.6 KB
  • 大小: 1.9 KB
  • 大小: 2.6 KB
  • 大小: 4.7 KB
  • 大小: 2.3 KB
  • 大小: 2.2 KB
  • 大小: 3.2 KB
  • 大小: 3.4 KB
  • 大小: 2.9 KB
  • 大小: 2.3 KB
  • 大小: 2.7 KB
  • 大小: 4.9 KB
  • 大小: 5.3 KB
  • 大小: 7.3 KB
  • 大小: 11.5 KB
  • 大小: 7.9 KB
分享到：
| 备忘录
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    art.css:用css绘图

    《CSS绘图艺术：探索与实践》 在网页设计领域，CSS（层叠样式表）是一种不可或缺的语言，它赋予HTML元素以风格和布局。而当我们谈论"art.css:用css绘图"时，我们是在讨论一种创新的方式，利用CSS来创作视觉艺术作品...

    dibujo-css:用html和css绘图

    CSS绘图的关键在于理解并巧妙运用其各种属性和选择器。例如，可以使用`border-radius`来创建圆形或椭圆，利用`transform`属性中的`rotate`、`translate`和`scale`来实现旋转、平移和缩放效果。此外，`linear-...

    纯CSS实现的自行车动画

    3. **CSS绘图**：自行车的各个部分，如车轮、脚踏、链条、牙盘，可能是通过CSS伪元素（`:before`和`:after`）和边框、背景色等属性绘制的。CSS也可以使用`border-radius`创建圆角，利用`linear-gradient`和`radial-...

    超级简单丨用最基础的css做出来的哆啦A梦头像

    在这个过程中，学习者将接触到选择器的应用、盒模型的理解、背景图片的设置、以及可能的CSS绘图技巧。这样的实践性学习方式有助于将理论知识转化为实际操作能力，使初学者能更好地掌握CSS这一强大的网页设计工具。

    CSS_shape.zip_CSS 绘制图形

    这个文件可以作为学习和理解CSS绘图的起点。 接下来，我们逐一探讨压缩包中的其他子文件： 1. `shape_star_five.html`：此文件展示了如何使用CSS创建五角星形状。通过组合使用`transform`属性和`before`与`after`...

    南方绘图css7.0

    《南方绘图CSS7.0：与CAD2006协同工作的强大工具》 南方测绘公司的CSS7.0，全称为“Chinese Surveying and Mapping System 7.0”，是一款专为地形测绘、城市规划和工程设计等领域打造的专业软件。这款软件在CAD2006...

    css3绘图制作css3响应式组织架构图形代码

    "css3绘图制作css3响应式组织架构图形代码"这一主题，主要探讨的是如何利用CSS3的特性来创建动态、适应不同设备屏幕尺寸的组织架构图。下面我们将深入探讨这一话题，详细介绍相关的CSS3技术。 首先，组织架构图是一...

    cssplot:纯 CSS 图表

    cssplot 简单的，仅 css 绘图。特征不需要javascript 易于使用React灵敏检查以获取演示。用法 &lt; link media =" all " rel =" stylesheet " type =" text/css " href =" /build/cssplot.full.css " /&gt; 或者...

    css3绘图卡通人物表情动画特效

    本话题聚焦于“CSS3绘图卡通人物表情动画特效”，这是一项利用CSS3特性来创建动态、生动的卡通角色表情的技术。 首先，让我们了解CSS3绘图的基本概念。CSS3提供了`border-radius`、`box-shadow`、`linear-gradient`...

    html5+css3绘图例子

    清华大学教授写的一个html5+css3的绘图例题。

    CSS3自定义单选按钮美化特效.zip

    3. **CSS绘图技术**：CSS3的`border-radius`可以用来创建圆角，而`box-shadow`可以添加阴影效果，`linear-gradient`则可用于创建渐变背景。这些技术可以结合使用，为单选按钮创建更复杂的外观。 4. **动画效果**：...

    纯CSS绘制的GitHub吉祥物表情特效源码.zip

    2. **CSS绘图**：利用 `border-radius` 创建圆角，`box-shadow` 创建阴影，以及 `transform` 属性中的 `translate()` 和 `rotate()` 来形成吉祥物的形状和表情。 3. **CSS3动画**：通过 `@keyframes` 规则定义动画...

    纯css3绘图哆啦a梦机器猫头像特效

    CSS3引入了若干新的绘图工具，如边框半径、渐变、阴影、多列布局以及变换、过渡和动画等。这些特性为网页设计提供了无限可能，特别是对于创建复杂的矢量图形和动态效果。 1. **边框半径**：CSS3允许我们创建圆角，...

    purecss-character:纯HTMLCSS绘图-游戏角色创建场景样式。完全以HTML和CSS手工编码

    纯CSS字符 这是一个正在进行的系列，其中我仅使用CSS和HTML创作艺术品。 受到视频游戏角色创建屏幕的启发。 我自己的规则： 所有元素必须手动输入 仅允许使用Atom文本编辑器和Chrome开发者工具。 SVG的使用受到限制...

    CSS3实现MacBook苹果笔记本特效.zip

    【描述】中提到“纯CSS3绘图制作的苹果笔记本样式代码”，这意味着没有使用JavaScript或其他编程语言，仅仅通过CSS3的特性，如选择器、边框、背景、过渡、动画等，就实现了MacBook的外观和交互效果。这可能包括屏幕...

    纯css3绘图制作萌萌的大白动画特效.zip

    这是一款基于纯css3绘图制作萌萌的大白动画特效源码。画面中的大白呈现非常逼真的3D立体效果，且眼部可以不时的眨眼，显得很萌很有灵气。该动画效果源码采用纯css3绘制，没有引入任何外部图形或js脚本元素。建议使用...

    css3绘图制作萌萌的大白样式代码

    在CSS3中，绘图能力得到了极大的提升，使得开发者可以通过纯CSS实现许多以前只能通过图像或者JavaScript实现的视觉效果。本教程将详细讲解如何利用CSS3的绘图特性来制作一个萌萌的大白样式代码。 首先，我们需要...

    HTML5+CSS3网页布局任务教程课件汇总整本书电子教案全套课件完整版ppt教学教程.pptx

    * CSS 由多个版本，包括 CSS1.0、 CSS2.0、 CSS3.0 等 * CSS3 是 CSS 的新版本，增加了更多的 CSS 选择器，可以实现更简单、更强大的功能 网页开发需要使用 HTML 和 CSS 语言， HTML 负责网页的结构， CSS 负责网页...

    html5 css3带翻页数字时钟动画特效

    开发者可以使用JavaScript或WebGL在`&lt;canvas&gt;`上进行动态绘图，实现时间的实时更新和翻页动画。 CSS3则为网页样式和动画提供了更多的可能性。例如，我们可以使用CSS3的`@keyframes`规则定义动画的关键帧，然后通过`...

Magicbox
Global site tag (gtag.js) - Google Analytics