传统上,css就是用来对网页进行布局和渲染网页样式的。然而,css3的出现彻底打破了这一格局。了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形、对元素进行2D和3D变换。从而可以替代一些以前必须使用图片实现的功能,大大加快了网页的响应速度。例如,css3可以实现渐变背景、绘制圆角和一些小图标等!

  今天,就来说说如何用css3绘制一些小图标和css3中的变形。建议用chrome浏览器查看,这里为了方便大家理解,暂时没有写其他浏览器前缀!

 一、div和css3在一起会发生什么

  在没有css3的时候,div在大家的眼中就是一个四四方方的方框,一个容器,有时候会有一个背景和边框。由于背景不在今天的讨论范围之内,那么,我们就从边框说起吧,下面我们来看看css3中的边框有哪些特性。

下面,我们看到的是css3的新特性,就是可以单独设置div每条border的样式,包括width和color。

.box1 {
width: 100px;
height: 100px;
border: 20px solid #333;
border-left-color:red;
border-right-color:yellow;
border-bottom-color:blue;
border-top-color:green;
}
 

上面你看到的不是图片,这就是由css3渲染出来的效果。下面,我们来加上border-radius后效果是什么样,代码如下:

.content {
margin:200px;
width: 100px;
height: 100px;
border: 20px solid #333;
border-left-color:red;
border-right-color:yellow;
border-bottom-color:blue;
border-top-color:green;
border-radius:50%;

}
 

是不是很神奇?一个div竟然会变成一个圆。这里border-radius有两种参数,跟margin和padding类似,可以使用px、em等单位,或者使用百分比。后面可以有4个参数,分别设置四个边框的radius值。

我们都知道color中有个值是transparent,也就是透明的意思。那么,元素的边框颜色为transparent时,也就意味这边框变为透明,不可见了。我们来看看设置左边边框为透明,效果如下:

    .content {
margin:200px;
width: 100px;
height: 100px;
border: 20px solid #333;
border-left-color:transparent;
border-right-color:yellow;
border-bottom-color:blue;
border-top-color:green;
border-radius:50%;
}
 

看到了吧,左边的红丝区域消失了~~看到这个想到了什么?如果我们因此不想要的边框,剩下的就是我们想要的图形。下面先来看看,如果我们把div的宽高都设置为0,并加大border的宽度,会发生什么,代码如下:

.content {
margin:200px;
width: 0px;
height: 0px;
border: 100px solid #333;
border-left-color:red;
border-right-color:yellow;
border-bottom-color:blue;
border-top-color:green;
}
 
 

到这里,看到了什么?来数数里面有几个三角形,几个扇形?没错,出现了三角形和扇形,就是说我们可以通过设置其他三条边的颜色位transparent,然后就能得到三角形和扇形,包括半圆。

到这里,有人可能会问:“这里的三角形不是我想要的,我想要一个等边三角形,该怎么办呢?”(忘了什么是等边三角形,自己默默翻开小学数学书看看吧),其实,想得到等边三角形,其实就是保证底不变,增加三角形的高度,也就是增加border的宽度了呗!

这里为了让大家看到原理,所以不隐藏其他三边。代码如下:

    .content {
margin:200px;
width: 00px;
height: 00px;
border: 100px solid #333;
border-top-width:200px;
border-left-color:red;
border-right-color:yellow;
border-bottom-color:blue;
border-top-color:green;
}
 

这里我增加了top边的width,我设置成了200px,当然这还不是等边三角形,等边三角形边长200,高为多少?大家自己算吧~~

同理,我们也可以通过改变不同的边的宽度来得到不同的扇形,如锐角、钝角、直角等,精确到多少度的,自己好好算算吧!

小结:

到了这里,你应该能用css3画出三角形、扇形、梯形、实心圆、实心半圆、圆环、半圆环等基本形状了~~发散你的思维,还可以画出来更多的东西!

 二、div + css3图形进阶

  现在,我们已经学会了基本图形的绘制。下面我们来学习绘制一些复杂的图形,当然,我们并没有用新的css3数学,还是之前的border和border-radius。下面,我们来好好领悟border-radius的威力吧~~

下面,我们来再熟悉一下border-radius的用法,稍微改动点代码,如下:

.content {
margin:200px;
width: 0px;
height: 0px;
border: 100px solid #333;
border-left-color:red;
border-right-color:yellow;
border-bottom-color:blue;
border-top-color:green;
border-radius:50% 0 0 0;
}
 

我们可以看到红色和绿色产生了特殊的形状,border-radius后面如果又四个参数的话,就是从左上角开始,依次顺时针赋值。下面,我们来看看椭圆怎么画出来,正方形设置圆角可以得到圆,同理,如果我们用长方形的话,我们就可以得到椭圆,代码如下:

    .content {
margin:200px;
width: 200px;
height: 0px;
border: 100px solid #333;
border-left-color:red;
border-right-color:yellow;
border-bottom-color:blue;
border-top-color:green;
border-radius:50%;
}
 

下面我们来开一下脑洞,如果一条边的border宽度为0会怎么样呢?例如我们将左边的border的宽度设置为0,css如下:

    .content {
margin:200px;
width: 300px;
height: 100px;
border: 100px solid #333;
border-left-width:;
border-left-color:red;
border-right-color:yellow;
border-bottom-color:blue;
border-top-color:green;
border-radius:50%;
}
 

那么如果一边的值很大呢?其他的边都是一样的,下面我们来看一个栗子,如下:

.content {
margin:200px;
width: 300px;
height: 100px;
border: 6px solid #333;
border-left-width:150px;
border-radius:20%;
}
 

有点像优盘有没有?当然,如果修改border-radius和border-left的宽度,还可以做出胶囊。这里就不做演示了,大家自己动手试试吧!

小结:

用css3绘制的图形,都可以任意的横向和纵向拉伸,从而得到我们想要的图形,更加复杂的图形,我们要通过多个div来叠加得到。如我们常见的关闭图标,就是三个div叠加得到的,一个div本身,还有两个时通过:before和:after.

css3的潜力很大,至于能创造出多么复杂的画面,后面还要靠你的艺术造诣了~~ 当然,园子里面已经有人用css3画出了阿童木、多啦A梦、小黄人等动画人物!大家可以尽情的发挥自己的创造力!

 三、css3的2D变形

  在绘制图形过程中,我们会发现无法绘制斜线等图形,因为斜线其实是通过直线旋转一定角度得到的,下面我们先来看看如何旋转一个图形,代码如下:

<style>
.content {
position:absolute;
margin:200px;
width: 300px;
height: 100px;
border: 6px solid #333;
border-left-width:150px;
border-radius:20%;
font-weight:bold;
text-align:center;
font-size:36px;
line-height:80px;
}
.content:nth-child(1){
transform:rotate(0deg);
}
.content:nth-child(2){
transform:rotate(65deg);
}
.content:nth-child(3){
transform:rotate(130deg);
}
</style>
<body>
<div class="content">One</div>
<div class="content">Two</div>
<div class="content">Three</div>
</body>

我们使用transform:rotate(65deg);来进行图形的旋转,rotate就是进行2D旋转的,默认旋转中心为div的中心。这里要注意的是单位为deg。效果如下:

我们可以通过transform-origin来改变旋转的原点,后面可以又两个值,是left,top,right,bottom中的一个,如果只给了一个值,如top,则会以顶边的中心进行旋转,如下是以右边的中心transform-origin:right;旋转得到的图形:

旋转很简单,大家可以试试,设置旋转原点和旋转角度进行旋转。

下面,关于形变的还有一个比较重要的属性就是skew,他就是对div做平行转换,如:我们对X方向做转换,效果如下:

<style>
.content {
position:absolute;
margin:500px;
width: 300px;
height: 100px;
border: 6px solid #333;
font-weight:bold;
text-align:center;
font-size:36px;
line-height:80px;
transform-origin:right;
}
.content:nth-child(1){
transform:skew(30deg, 0deg);
}
</style>
<body>
<div class="content">One</div>
</body>

看到效果了吧,就是拉成平行四边形了,同理,第二参数,就是在Y轴上面进行拉伸。

关于2D变换,还有两个方法,分别是平移和放大缩小的,主要用在动画里面,用法如下:

translate() 方法

通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标)

scale() 方法

通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)

这两个方法比较简单,就不写例子了~~

 四、总结

  通过对div的border、border-radius、border-color、border-widht、width、height等属性进行设置,我们可以得到很多不同的图形,然后再加上对图像进行平移、放大、缩小、旋转等操作,我们将的到更加丰富的图形,还可以做出更多的动画效果。今天就先写到这里了,下一篇将会带领大家分析一些css3写的一些小图标的例子,然后介绍css3中的3D变换,3D变换效果更加的炫~~

作者:雲霏霏

QQ交流群:243633526

博客地址:http://www.cnblogs.com/yunfeifei/

声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。

如果大家感觉我的博文对大家有帮助,请推荐支持一把,给我写作的动力。

CSS3变形记(上):千变万化的Div的更多相关文章

  1. CSS3 变形记

    CSS3 变形 CSS3变形是一些效果的集合,比如平移,旋转,缩放和倾斜效果,每个效果都称为变形函数. transform transform属性向元素应用 2D 或 3D 转换.该属性允许我们对元素 ...

  2. 三角形变形记之纯css实现的分布导航条效果

    三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...

  3. css3 渐变记

    css3 渐变 线性渐变 径向渐变 重复线性渐变 重复径向渐变 线性渐变 线性渐变接受三个参数,渐变的方向,起始颜色,结束颜色. 标准语法及参数:linear-gradient:([[<angl ...

  4. 前端 MVC 变形记

    背景: MVC是一种架构设计模式,它通过关注点分离鼓励改进应用程序组织.在过去,MVC被大量用于构建桌面和服务器端应用程序,如今Web应用程序的开 发已经越来越向传统应用软件开发靠拢,Web和应用之间 ...

  5. 从零开始学习前端开发 — 14、CSS3变形基础

    一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotat ...

  6. 重新想,重新看——CSS3变形,过渡与动画②

    本篇文章主要用来归纳总结CSS3变形属性. CSS3变形属性大致可以分为以下三个部分: 变形控制属性 2D变形函数 3D变形函数 下面将对其一一进行分析: 1.变形控制属性 所谓的变形控制属性主要指“ ...

  7. 重新想,重新看——CSS3变形,过渡与动画①

    学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...

  8. 旧书重温:0day2【5】shellcode变形记

    紧接上一篇,结合第一篇 //这篇文章主要成功溢出一个带有缓冲区溢出的小程序,其中我们的shellcode被strcpy截断了所以我们需要变形shellcode,这个实验中也出现了很多意想不到的拦路虎, ...

  9. css3变形

    CSS3变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点 ...

随机推荐

  1. GET和POST有什么区别?及为什么网上的多数答案都是错的

    如果有人问你,GET和POST,有什么区别?你会如何回答? 最普遍的答案 回来之后寻思了很久,他到底是想问我什么?我一直就觉得GET和POST没有什么除了语义之外的区别,自打我开始学习Web编程开始就 ...

  2. Apache Shiro 简单概念

    Apache Shiro 是ASF旗下的一款开源软件(Shiro发音为"shee-roh",日语"堡垒(Castle)"的意思),提供了一个强大而灵活的安全框架 ...

  3. flashftp连接虚拟机centos报错的解决方法

    flashftp连接虚拟机centos报错,一般情况可能是因为端口(22)的权限没有开放 先在centos中检查并开放22端口,执行:iptables -I INPUT -p tcp --dport ...

  4. c# 中get和post的方法

    用GET发送数据则用REQUEST.QUERYSTRING[''ID'']接收 一.request.aspx 二.request.aspx.cs 三运行效果: 以下是数据发送的途径http://loc ...

  5. 中科微北斗定位模组ATGM336H简介

    36H系列卫星定位模块 产品介绍 ATGM336H是高灵敏度,支持BDS/GPS/GLONASS卫星导航系统的单系统定位,以及任意组合的多系统联合定位的接收机模块.ATGM336H基于本公司自主独立研 ...

  6. Java课设(学生信息管理系统)

    1.团队课程设计博客链接 http://www.cnblogs.com/Min21/p/7064093.html 2.个人负责模板或任务说明 设计登陆界面和学生信息界面的设计,学生信息的显示.退出等功 ...

  7. iOS XIB使用中适配iPhoneX的安全区域、调用UiView动画

    2.调用UiView动画 WeakSelf; self.detailsViewBom.constant += 230; [UIView animateWithDuration:animotiontim ...

  8. Linux中shell和子shell一点点理解

    Linux执行脚本有两种方式,主要区别在于是否建立子shell   1.像sh,bash,./命令是用来执行shell脚本的,在bash/sh命令下,脚本文件可以无"执行权限",即 ...

  9. 网页三剑客:HTML+CSS+JavaScript 之CSS概述

    CSS 简介 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是 ...

  10. 初识zookeeper(1)之zookeeper的安装及配置

    初识zookeeper(一)之zookeeper的安装及配置 1.简要介绍 zookeeper是一个分布式的应用程序协调服务,是Hadoop和Hbase的重要组件,是一个树型的目录服务,支持变更推送. ...