1. css3 起步 (图形2D旋转)
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>
2. CSS3 模块
CSS3 被划分为模块。
其中最重要的 CSS3 模块包括：
- 框模型
- 背景和边框
- 文本效果
- 2D/3D 转换
- 动画
- 多列布局
- 用户界面
3. 文本效果
字体阴影
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
/** text-shadow: 右 左 锐利 #FF0000; **/
text-shadow: 5px 0 0 #FF0000;
}
</style>
</head>
<body>
<h1>文本阴影效果！</h1>
</body>
</html>
4. 允许长单词 拆分
<!DOCTYPE html>
<html>
<head>
<style>
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>
5. 元素旋转矩阵值设置
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
6. 动画效果
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
/** text-shadow: 右 左 锐利 #FF0000; **/
text-shadow: 5px 5px 5px #FF0000;
border: 5px;
border-style: groove;
transform:rotate(1deg);
}
</style>
</head>
<body>
<h1 id="firstname" class="info">文本阴影效果！</h1>
</body>
</html>
<style>
.info:hover{
animation:myfirst 2s;
}
#firstname{
}
@keyframes myfirst
{
0% {transform: rotate(1deg);}
25% {
transform: rotate(90deg);
}
30% {
transform: rotate(190deg);
}
35% {
transform: rotate(90deg);
}
40% {
transform: rotate(190deg);
}
45% {
transform: rotate(90deg);
}
100% {
transform: rotate(90deg);
}
}
h1{
margin:50px;
width:200px;
}
</style>
网友评论