R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。 MUGer, hacker, developer, amateur UI designer, punster, Japanese learner.

【CSS教程第三篇】绚丽的特效

注意:本文发布于 2084 天前,文章中的一些内容可能已经过时。

本篇内容需要熟练掌握CSS的基本语法和常用属性。

先讲点昨天没讲完的东西。

颜色

CSS的颜色除了直接支持white、black之类的常见颜色单词(甚至包括steeelblue等奇怪的单词,事实上,CSS支持147个颜色单词)以外,还支持#开头的十六进制颜色值,例如#123456,解释方法是两个字符一组,转为十六进制。奇葩的是,如果这三组的两个数字都相同,那么可以省略为三个字符——#336699可以省略为#369。CSS还可以使用rgb(64,0,127)这样的RGB值,最新的CSS3还支持rgba(64,0,127,0.5)这样的RGBA值。所以,该用什么颜色,随你定啦。

伪类

昨天讲了一个【:hover】,表示鼠标移过的时候的效果,其实CSS还有一个【:active】,表示鼠标在该元素上按下时候的效果。所以可以用来做一个按钮了!把.button设成background-color:#DDD,.button:hover设成background-color:#EEE,.button:active设成background-color:#999,再试试效果!(P.S.如果一个效果在伪类下保持不变,那么可以不用写。)

单位

最常用的单位是px(像素),也就是屏幕上的一个点。但是随着目前移动设备的普及(移动开发的基础后续会讲),网页需要兼容不同类型的窗口大小,这时候就不能用固定的单位了(想想绝大部分的网页都是按照宽度为960px来设计的,这样可以在电脑屏幕上显示的很好,不过换成手机试试……)。宽高和位置可以用%(百分比),例如width:100%,而字体可以用em(相对尺寸),1em就是当前的字体尺寸——这个是依据浏览器的设定,而1.3em就相当于当前字体尺寸的130%。

下面开始今天的新内容!

“CSS只能挪动元素、改变元素大小、给元素加一点格式吗?弱爆了!”

如果这样说,那么恐怕弱爆了的是你了。最新标准CSS3支持一系列特效,比如说我主页上的动画都是用CSS写的,以后要学的JavaScript只占了很少的比重。虽说是个简单的上拉下拉动画,但是在以前,可是要调用大量JavaScript代码的。

border-radius用于给div加上圆角:

div {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 2px solid gray;
    /* 这里是新内容! */
    border-radius: 20px;
}
<div>圆角矩形</div>

只需要一句border-radius,即可设置圆角的半径。CSS2中必须用四张图片来做圆角,而且圆角的半径改起来也很麻烦。

box-shadow可以用来给div添加阴影:

div {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #DDD;
    /* 这里是新内容! */
    box-shadow: 2px 2px 3px black;
}
<div>这是阴影</div>

为了区分阴影阴影的四个参数的意思从左到右分别是:往右挪多少,往下挪多少,模糊多少,是什么颜色。好理解吧?再看看我们学校计院的网站,还在用图片实现阴影。虽说现在是为了兼容老版本的浏览器,但是在以后已经没有必要了。

text-shadow用于给文字添加阴影:

span {
    font-size: 2em;
    /* 这里是新内容! */
    text-shadow: 1px 1px 2px #09F;
}
<span>文字阴影</span>

阴影的四个参数含义跟box-shadow完全一样。

transform用于对div元素进行2D的转换,例如旋转:

div {
    transform:rotate(10deg);
    -ms-transform:rotate(10deg); /* IE 9 */
    -moz-transform:rotate(10deg); /* Firefox */
    -webkit-transform:rotate(10deg); /* Safari 和 Chrome */
    -o-transform:rotate(10deg); /* Opera */
}

需要注意的是,这个属性目前是需要跨浏览器支持的,所以要加上各种浏览器的私有前缀。

transition可以给元素的效果加上动画。与CSS的【:hover】选择器配合,我们可以写出很炫的特效来:

div {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #92B901;
    /* 这里是新内容! */
    transition: all 2s ease 0;
}
div:hover {
    transform: rotate(360deg);
    transition: all 2s ease 0;
    background-color: #1ec7e6;
}
<div>看,动画!</div>

博客里不方便直接演示,不过大家可以自己试试。是很炫吧?

作业:给昨天的网页加上简单的圆角、阴影和动画效果,尽量让其看起来“现代化”。

CSS的基础篇就到这里了。由于CSS的属性过于繁多,所以一般需要什么效果的话直接到网上找即可。

后续会发布与移动开发相关的CSS教程,不过时间未定……

版权声明:除文章开头有特殊声明的情况外,所有文章均可在遵从 CC BY 4.0 协议的情况下转载。
上一篇: 【CSS教程第二篇】合理的网页布局
下一篇: 【JS教程第一篇】语法当先

这是我们共同度过的

第 1559 天