• 不断学习才有回报,学无止境!

css3的常用效果及应用方法

DIV+CSS技巧发现 箭翎 778次浏览 0个评论 扫描二维码

1, 替代图片:很多修饰的效果传统方式是使用图片,不仅影响加载速度而且不易维护,采用CSS3后不仅可以实现绚丽的视觉效果,而且可以随时修改代码改变效果,甚至是通过程序动态改变代码效果;
2, 定义不规则形状,打破栅格束缚:之前的网页元素全都是矩形的空间站位,无法定义一个不规则的形状,即使用图片做出一个不规则图形,其在网页上的占位仍是一个矩形,只是周边是空白的看不见而已。但随着CSS3的出现,有了旋转,变形,拉伸等使元素扭曲的方法,大大灵活了网页的视觉表现;
3, 动画:之前的网页动画基本上有3种实现方法,flash、js、gif。Flash动画强大,可与视频媲美,但制作复杂并且脱离了浏览器平台,与网页内容的融合与交互比较麻烦。Js动画效果也很强大,但影响网页性能,复杂的动画需要较高的编程要求。Gif动画过于简单且不易维护。CSS3的出现使常用的网页动画实现变得简单,且易维护性能高。

此次不是要探讨CSS3的基础技术,因为各种教程网上已经很多,本次分享内容只是把我们平时做项目时经常遇到的视觉效果可以用CSS3来简化实现的地方提出来,一旦标准浏览器普及,设计网页时便清楚什么样的设计是可以用代码来实现,并且代码能实现到什么程度,设计上需要做哪些取舍。

以下代码演示均是CSS3效果,请用谷歌或火狐浏览,不支持IE8及IE8以下版本。

一、圆角

最常见的视觉效果之一,可以使元素变得生动。

例如:1

 

CSS3实现:

<style type=”text/css”>
.btn {
border-radius:10px;
background:#ec6941;
display:inline-block;
width:200px;
height:50px;
line-height:50px;
text-align:center;
font-family:”微软雅黑”;
font-size:24px;
color:#fff;
}
</style>
<span class=”btn”>圆角按钮</span>

核心只有简单的一句 border-radius:10px,只要简单改动10px的值即可灵活改变圆角大小。

 

圆角的扩展:

1, 圆形: 元素长宽相等,圆角半径等于边长一半,即为圆形

2

CSS3实现:

<style type=”text/css”>
.btn {
border-radius:40px;
background:#ec6941;
display:inline-block;
width:80px;
height:80px;
line-height:80px;
text-align:center;
font-family:”微软雅黑”;
font-size:24px;
color:#fff;
}
</style>
<span class=”btn”>圆形</span>

 

2, 对角: 四个角不全为圆角

3

<style type=”text/css”>
.btn {
border-radius:20px 0 20px 0;
background:#ec6941;
display:inline-block;
width:200px;
height:50px;
line-height:50px;
text-align:center;
font-family:”微软雅黑”;
font-size:24px;
color:#fff;
}
</style>
<span class=”btn”>圆形</span>

 

3, 更多变形: 稍加改动边长和半径

4

 

二、渐变:

最常见的视觉效果之一,可以使元素变得生动。

基本渐变,例如:

5

CSS3实现:

<style type=”text/css”>
.btn {
background:#ec6941;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff45c), to(#ec6941));
background: -moz-linear-gradient(top, #fff45c, #ec6941);
border-radius:10px;
display:inline-block;
width:200px;
height:50px;
line-height:50px;
text-align:center;
font-family:”微软雅黑”;
font-size:24px;
color:#fff;
}
</style>
<span class=”btn”>圆角</span>

核心是这两句:
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff45c), to(#ec6941));
background: -moz-linear-gradient(top, #fff45c, #ec6941);
第一句是谷歌的语法,第二句是火狐的语法。

小渐变: 顶部一个小渐变阴影,这也是常用的视觉设计手法,通常是用1像素的图片平铺,在CSS3里变的简单。

6

<style type=”text/css”>
.btn {
background:#ec6941;
background: -webkit-gradient(linear, 0 0, 0 20%, from(#ccc), to(#fff));
background: -moz-linear-gradient(top, #ccc, #fff 20%);
border-radius:10px;
display:inline-block;
width:200px;
height:50px;
line-height:50px;
text-align:center;
font-family:”微软雅黑”;
font-size:24px;
color:#fff;
}
</style>
<span class=”btn”>圆角</span>

CSS3其实还可以实现更为复杂的多层渐变,但效果复杂代码也随之增加,会变得不易维护与修改,所以本次只分享最实用可行的代码,太复杂的效果还是采用图片较好。例如下面的效果CSS3都是可以实现的:

7

 

三、投影:

最常见的视觉效果之一,可以使元素变得立体,用于按钮等处。

例如:

8

CSS3实现:

<style type=”text/css”>
.btn {
box-shadow: 5px 5px 5px 0 #ccc;
background:#ec6941;
border-radius:10px;
display:inline-block;
width:200px;
height:50px;
line-height:50px;
text-align:center;
font-family:”微软雅黑”;
font-size:24px;
color:#fff;
}
</style>
<span class=”btn”>圆角</span>

核心为此句:box-shadow: 5px 5px 5px 0 #ccc;

box-shadow: hoff voff bd sd color inset;
这里,hoff 指示水平偏移,voff 指示垂直偏移,bd 指示模糊距离,sd 指示扩散距离,color 指示阴影的颜色,inset 是一个关键字,在使用时指示阴影是内部阴影,而不是外部阴影。

利用阴影实现描边效果:

9

CSS3实现:

<style type=”text/css”>
.btn {
box-shadow: 0 0 0 5px #000;
background:#ec6941;
border-radius:10px;
display:inline-block;
width:200px;
height:50px;
line-height:50px;
text-align:center;
font-family:”微软雅黑”;
font-size:24px;
color:#fff;
}
</style>
<span class=”btn”>圆角</span>

 

利用阴影实现外发光效果:

10

CSS3实现:

<style type=”text/css”>
.btn {
box-shadow: 0 0 5px 2px #ffff00;
background:#ec6941;
border-radius:10px;
display:inline-block;
width:200px;
height:50px;
line-height:50px;
text-align:center;
font-family:”微软雅黑”;
font-size:24px;
color:#fff;
}
</style>
<span class=”btn”>圆角</span>

四、内阴影:

最常见的视觉效果之一,可以使元素变得凹陷,用于输入框等处。

例如:

11

<style type=”text/css”>
.btn {
box-shadow: 5px 5px 5px 0 #ccc inset;
background:#fff;
border:#ccc solid 1px;
border-radius:10px;
display:inline-block;
width:200px;
height:50px;
line-height:50px;
padding-left:10px;
font-family:”微软雅黑”;
font-size:24px;
color:#ccc;
}
</style>
<span class=”btn”>用户名</span>

 

内阴影实现内发光效果:

例如: 边线+渐变+内发光,通常可以使元素变得更加立体

12

CSS3实现:

<style type=”text/css”>
.btn {
background:#ec6941;
box-shadow: 0 0 5px 0 #ffff00 inset;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f19149), to(#ec6941));
background: -moz-linear-gradient(top, #f19149, #ec6941);
border:#ec6941 solid 1px;
border-radius:10px;
display:inline-block;
width:200px;
height:50px;
line-height:50px;
text-align:center;
font-family:”微软雅黑”;
font-size:24px;
color:#fff;
}
</style>
<span class=”btn”>内发光</span>

五、文字阴影:

文字阴影在之前的网页设计中不常用,是因为文字本身不能做阴影效果,做成图片又不利于文字修改,有了CSS3之后就可以方便的使用文字阴影了,文字阴影可以使文字更突出,用于标题或背景复杂的地方,可以让文字与背景之间有明显的对比。

例如:

13

CSS3实现:

<style type=”text/css”>
.text {
text-shadow:#ff0000 1px 1px 1px
}
</style>
<p class=”text”>文字阴影</p>

调整参数可出现如下效果:

14

 

六、旋转:

以往的网页元素只能以水平和垂直的方式规规矩的安排在页面上,即使用图片设计成倾斜的样子,也只是视觉上效果,元素实际的占位还是会占据一个矩形空间。从CSS3开始,网页元素可以真正实现角度倾斜,为设计带来灵活的发挥空间。

例如:

15

CSS3实现:

<style type=”text/css”>
.btn {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
background:#ec6941;
display:inline-block;
width:100px;
height:100px;
line-height:100px;
text-align:center;
font-family:”微软雅黑”;
font-size:24px;
color:#fff;
}
</style>
<span class=”btn”>旋转</span>

 

应用实例之照片墙:

16

以往这种设计,只能用PS先排好版,切成固定的图片放在网页上,后期无法更新图片,也不能调整排版,有了CSS3后排列方式将不受限制:

CSS3实现:

<style type=”text/css”>
.p1 {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
}
.p2 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
}
</style>
<img src=”css3/1.jpg” class=”p1″>
<img src=”/css3/2.jpg” class=”p2″>

七、缩放:

CSS3可以对网页任意元素进行大小缩放,尤其用在一套大小不一的logo图片上特别方便。

例如:

17

这样一套logo以往要切大大小小多个图片,不但尺寸固定不灵活,而且影响页面加载速度,现在用CSS3实现,只需做一个最大的图片,其它尺寸按比例缩小:

<style type=”text/css”>
.logo2{
-webkit-transform:scale(0.7, 0.7);
-moz-transform:scale(0.7, 0.7);
}
.logo3{
-webkit-transform:scale(0.3, 0.3);
-moz-transform:scale(0.3, 0.3);
}
</style>
<img src=”/css3/logo.png” class=”logo”>
<img src=”/css3/logo.png” class=”logo2″>
<img src=”/css3/logo.png” class=”logo3″>

八、动画:

CSS3目前也可以实现比较复杂的动画效果了,但本着简单实用的原则,此次仅介绍最基本的位移,伸缩等效果。

CSS3演示:

<style type=”text/css”>
div{
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;

width:100px;
height:100px;
line-height:100px;
text-align:center;
background:#ccc;
margin-bottom:10px;
}
.d1:hover {
-webkit-transform:translate(30px, 0);
-moz-transform:translate(30px, 0);
}
.d2:hover {
-webkit-transform:translate(0, 30px);
-moz-transform:translate(0, 30px);
}
.d3:hover {
-webkit-transform:translate(30px, 30px);
-moz-transform:translate(30px, 30px);
}
.d4:hover {
-webkit-transform:skew(30deg, 30deg);
-moz-transform:skew(30deg, 30deg);
}
.d5:hover {
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
}
.d6:hover {
-webkit-transform:scale(2, 2);
-moz-transform:scale(2, 2);
}
.d7:hover {
height:200px;
line-height:200px;
}
.d8:hover {
width:200px;
}
</style>
<p>动画若不流畅请先刷新一下页面,是代码运行框的程序问题</p>
<div class=”d1″>水平移动</div>
<div class=”d2″>垂直移动</div>
<div class=”d3″>倾斜移动</div>
<div class=”d4″>倾斜扭曲</div>
<div class=”d5″>旋转</div>
<div class=”d6″>缩放</div>
<div class=”d7″>高度</div>
<div class=”d8″>宽度</div>

 

实例欣赏:

18

http://css-tricks.com/examples/CSS3Clock/

19

http://dinolatoga.com/demo/webkit-image-hover-effects/

20

http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html

21

http://designlovr.com/examples/dynamic_stack_of_index_cards/

22

http://demo.marcofolio.net/jquery_dj/

总结:

CSS3提供了许多新的网页视觉表现方式,为网页设计和用户体验带来提升,目前最简单实用的一些特性归纳为:
1, 圆角
2, 渐变
3, 元素阴影(外阴影、内阴影、描边、发光)
4, 文字阴影
5, 旋转、缩放、扭曲、镜像
6, 动画(位移、伸缩、旋转)(本文转载自网络本人进行补充说明)


箭翎 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明css3的常用效果及应用方法
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址