CSS3 应用程序

PUBLISHED

概述

本文演示了CSS3的一些功能，CSS3是CSS的最新标准， 涵盖了以下提到的模块：

  • 边框
  • 背景
  • 文本效果
  • 字体
  • 2D 和 3D 转换
  • 转变
  • 动画
  • 多个列

CSS3 HTML 页面

此 web 应用程序包含三个页面，每个页面展示了不同的 CSS3 属性。

页面 1

第一页的内容区域有一个 div 元素，该元素带有id "shape"，并包含了文字。 针对动画效果，此 div 元素绑定了 @keyframes 规则，通过指定 @keyframes 规则中的 CSS 样式，动画将从当前样式逐渐转变为新的样式。 Div 元素从顶部移到页面的底部，在此期间，使用 CSS3 功能（如下面的代码），它的形状、 颜色、 规模等经历了各种转换。

HTML
<div data-role="content" id="content1">
  <div id="shape">Hello World!</div>
</div>
CSS
#shape
{
width:100px;
height:100px;
background:red;
position:relative;
border:2px solid brown;
-webkit-animation: myfirst 15s linear 2s infinite alternate;
}

@-webkit-keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
10%  {background:yellow; left:200px; top:0px;width:140px;height:80px;border:2px solid pink;}
20%  {background:white; left:200px; top:100px;box-shadow: 10px 10px 5px #888888;}
30%  {background:blue; left:0px; top:100px;-webkit-transform:rotate(30deg);border:4px solid yellow;}
40%  {background:orange; left:0px; top:200px;border-radius:98px;}
50%  {background:green; left:200px; top:200px;border-radius:48px;text-shadow: 5px 5px 5px #FF0000;-webkit-transform:rotateY(130deg);}
60%  {background:pink; left:200px; top:300px;border-radius:58px;-webkit-transform:skew(30deg,20deg);}
70%  {background:violet; left:0px; top:300px;-webkit-transform:rotateX(120deg);}
80%  {background:yellow; left:0px; top:400px;-webkit-transform:scale(3,3);border:4px solid blue;}
100% {background:red; left:200px; top:400px;border-radius:0px;width:100px;height:100px;}
}
#content1{
background:url(./css/img_flwr.gif);
background-size:370px 500px;
background-repeat:no-repeat;
}

上面代码涵盖的CSS3 模块如下所示：
Animation : 代码中使用的动画属性

  • -webkit-animation-name为"myfirst".
  • -webkit-animation-duration是15秒 - 动画将在 15 秒完成。
  • -webkit-animation-direction是"alternate" - 动画在奇数时间（1，3，5等）正常显示，在偶数时间（2，4，6等）反向显示。
  • -webkit-animation-timing-funtion为"linear" - 动画从头到尾都使用相同的速度。
  • -webkit-animation-iteration-count为 "infinite" - 动画将无限次播放（永远）。
  • 动画开始时为0%，动画完成后为100%。 在动画的过程中，此参数指定了 CSS 在何时发生变化。 例如，在上面提到代码中，当动画完成了10%时，div 元素的背景颜色从红色变成了黄色。
  • 页面底部有一个标签式菜单，用来暂停和播放动画。 "-webkit-animation-play-state" 将指示动画是否正在运行或已暂停. 在 main.js 中添加了如下的代码，用来暂停和播放动画
JavaScript
function pause_anim1(){
	$('div').css('webkit-animation-play-state','paused');
}
function play_anim1(){
	$('div').css('webkit-animation-play-state','running');
}

Border : 代码中使用的边框的属性

  • 当动画完成 20%时，应用于 div 元素的边框属性"box-shadow"用于将shadow添加到boxes上。
  • 当动画是 40 ％ 完成，应用于 div 元素的边框属性"border-radius""用来创建圆角。

Text Effects : 代码中使用的文本的属性

  • 当动画完成 50%时，text 属性"text-shadow"将shadow添加到div元素中使用的文本上。

2D Transforms ： 代码中使用的二维变换属性

  • 当动画完成 30%时，二维变换法"rotate()"按照给定的角度，将div顺时针旋转。
  • 当动画完成了 60%，二维变换法"skew()"根据给定的水平（x 轴）和垂直（y 轴）行数参数，将div放到一个给定的角度。
  • 当动画完成了 80%，二维变换法"scale ()"根据给定的宽度（x 轴）和高度（y 轴）参数，增大或减小 div 元素的大小。

3D Transforms : 代码中使用的 3D 转换属性

  • 当动画已完成 50%时，3d 变换法"rotateY()"围绕y 轴将div旋转一个给定的角度。
  • 当动画已完成 70%时，三维变换法"rotateX()"围绕x 轴将div旋转一个给定的角度。

Background : 代码中使用的背景属性

  • 内容区域有一个背景图片，使用 CSS3 的 background 属性"background-size"进行设置。 此属性指定背景图像的大小。

页面 2

第二页的内容区域有六个图像和带长字的段落。

HTML
<div data-role="content" id="content2">
  <p id="box">thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
  <img src="./css/butterfly1.png" id="div1" class="divs" />
  <img src="./css/butterfly1.png" id="div2" class="divs" />
  <img src="./css/butterfly1.png" id="div3" class="divs" />
  <img src="./css/butterfly1.png" id="div4" class="divs" />
  <img src="./css/butterfly1.png" id="div5" class="divs" />
  <img src="./css/butterfly1.png" id="div1" class="divs" />
</div>
CSS

代码中覆盖的 CSS3 模块如下所示：
Background： 代码中使用的背景的属性

#content2
{
background-image:url(./css/img_flwr.gif),url(./css/img_tree.gif);
background-size:370px 500px;
background-repeat:no-repeat;
}
  • 在内容区域有多个背景图像。

Font : 代码中使用的字体字体

#box{
font-family:myFirstFont;
}
@font-face
{
font-family: myFirstFont;
src: url(./css/PapyrusRegular.woff);
}
  • 字体的定义使用了 CSS3 @font-face 规则，并应用于段落中的文本。 在 @font-face 规则中，首先定义一个名称为"myFirstFont"的字体，然后指向一个"woff"格式的字体文件，该文件从 web 上下载，并放在项目中。 要使用该字体，通过font-family属性查找名为myFirstFont的字体。

Border : 代码中使用的边框属性

#box
{
border-image:url(./css/border2.jpg) 30 30 stretch;
}
  • "border-image"属性使用一个图像来为段落创建一个边框。

Text Effects : 代码中使用的文本属性

#box{
word-wrap:break-word;
}
  • 如果有个单词太长而不能放到段落的行中，它将超出行的边界。 要避免此问题，可以使用"word-wrap"属性，它强制文本换行，即使将单词从中间拆分。

Multiple Columns : 代码中使用的列属性

#box{
-webkit-column-count:2;
-webkit-column-rule:4px outset #ff00ff;
-webkit-column-rule-style:dotted;
}
  • -webkit-column-count 属性将文本分成两列。
  • -webkit-column-rule 属性设置列之间的宽度、样式和颜色等规则。
  • -webkit-column-rule-style 属性指定列之间的样式规则。

动画应用于内容区域中的图像。 每个图像将从底部移到顶部，并被赋予了不同的animation-timing-function，即速度。

@-webkit-keyframes mymove
{
from {top:500px;}
to {top:-600px;}
}
.divs
{
width:50px;
height:50px;
position:relative;
-webkit-animation:mymove 5s infinite;
}
#div1 {-webkit-animation-timing-function:linear;}
#div2 {-webkit-animation-timing-function:ease;}
#div3 {-webkit-animation-timing-function:ease-in;-webkit-animation-direction:alternate-reverse;}
#div4 {-webkit-animation-timing-function:ease-out;-webkit-animation-direction:alternate-reverse;}
#div5 {-webkit-animation-timing-function:ease-in-out;}

页面 3

内容区域包括使用CSS设计的Landscape和应用到该Landscape的动画（使用 CSS3）。

CSS3 应用程序的屏幕截图

文件附件: 
Package icon css3_app.zip
评论: 
示例代码
标签: 
CSS3