十天精通CSS3(1)
2024-08-23 00:23:07
什么是CSS3?
CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。
在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。
前缀 |
浏览器 |
-webkit |
chrome和safari |
-moz |
firefox |
-ms |
IE |
-o |
opera |
相信CSS3的时代马上就要到来了!
IE党注意了:不支持IE9版本以下,建议使用 chrome、safari、firefox、opera浏览器的最高版本。
body{
background:#000;
} h1 {
text-align:center;
color:#fff;
font-size:48px;
font-family: 'Fruktur', cursive;
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de; transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d; animation: run ease-in-out 9s infinite;
-moz-animation: run ease-in-out 9s infinite ;
-webkit-animation: run ease-in-out 9s infinite;
-ms-animation: run ease-in-out 9s infinite; -o-animation: run ease-in-out 9s infinite;
} @keyframes run {
0% {
transform:rotateX(-5deg) rotateY(0);
}
50% {
transform:rotateX(0) rotateY(180deg);
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #3EFF3E,
0 0 70px #3EFFff,
0 0 80px #3EFFff,
0 0 100px #3EFFee,
0 0 150px #3EFFee; }
100% {
transform:rotateX(5deg) rotateY(360deg);
}
} @-moz-keyframes run {
0% {
-moz-transform:rotateX(-5deg) rotateY(0); }
50% {
-moz-transform:rotateX(0) rotateY(180deg);
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #3EFF3E,
0 0 70px #3EFFff,
0 0 80px #3EFFff,
0 0 100px #3EFFee,
0 0 150px #3EFFee; }
100% {
-moz-transform:rotateX(5deg) rotateY(360deg);
}
} @-webkit-keyframes run {
0% {
-webkit-transform:rotateX(-5deg) rotateY(0); }
50% {
-webkit-transform:rotateX(0) rotateY(180deg);
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #3EFF3E,
0 0 70px #3EFFff,
0 0 80px #3EFFff,
0 0 100px #3EFFee,
0 0 150px #3EFFee; }
100% {
-webkit-transform:rotateX(5deg) rotateY(360deg);
}
}
@-ms-keyframes run {
0% {
-ms-transform:rotateX(-5deg) rotateY(0); }
50% {
-ms-transform:rotateX(0) rotateY(180deg); }
100% {
-ms-transform:rotateX(5deg) rotateY(360deg);
}
} </style>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello CSS3</title>
<link href='http://fonts.googleapis.com/css?family=Fruktur' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello CSS3</h1>
</body>
</html>
CSS3能做什么?
CSS3给我们带来了什么好处呢?简单的说,CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影,过渡、动画等。
CSS3简化了前端开发工作人员的设计过程,加快页面载入速度。
CSS3都有哪些强大功能呢?各位小伙伴们先来一睹为快吧!
选择器
以前我们通常用class、 ID 或 tagname 来选择HTML元素,CSS3的选择器强大的难以置信。它们可以减少在标签中的class和ID的数量更方便的维护样式表、更好的实现结构与表现的分离。
圆角效果
以前做圆角通常使用背景图片,或繁琐的元素拼凑,现在很简单了 border-radius 帮你轻松搞定。
块阴影与文字阴影
可以对任意DIV和文字增加投影效果。
色彩
CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL , CMYK ,HSLA and RGBA。
渐变效果
以前只能用Photoshop做出的图片渐变效果,现在可以用CSS写出来了。IE中的滤镜也可以实现。
个性化字体
网页上的字体太单一?使用@Font-Face 轻松实现定制字体。
多背景图
一个元素上添加多层背景图片。
边框背景图
边框应用背景图片。
变形处理
你可以对HTML元素进行旋转、缩放、倾斜、移动、甚至以前只能用JavaScript实现的强大动画。
多栏布局
可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏,让文本实现一个仿报纸的多栏结构。
媒体查询
针对不同屏幕分辨率,应用不同的样式。 等等 …… 很神奇吧!CSS3使代码更简洁、更高效。可以极大的提高工作效率,打造更高级的用户体验。使web应用的界面设计进入一个新的台阶。
最新文章
- CATransition转场动画
- CentOS 7.2 安装配置mysql主从服务器
- java POI 解析excel 2003和2007 直接转为List<;Map>; 返回
- 个人阅读作业Week7
- JAVAWEB安全开发
- 【python】list。列表
- C#(HTML)_小技巧_关于textbox框中不能输入HTML标签的解决方法(如输入“<;p>;”后,在提交表单时系统会崩溃)
- 545C. Woodcutters
- 类 ArrayBlockingQueue<;E>;(一个由数组支持的有界阻塞队列。)
- [Audio processing] wav音频文件读取int和double数组的关系
- java从文件中读取json
- 编程岗位电话面试问答Top 50[转]
- 【C++】C++中const与constexpr的比较
- 在vue中使用highcharts的仪表图等扩展
- vim 命令学习(高级篇)
- 堆叠箱子(基础dp)
- Bell(矩阵快速幂+中国剩余定理)
- jquery ui draggable,droppable 学习总结
- STM32中用 stop 模式 配合低功耗模式下的自动唤醒(AWU) 能否实现FreeRTOS tickless 模式
- JQuery的筛选方法
热门文章
- 《转》win7 安装ujson 出现的“error: Microsoft Visual C++ 9.0 is required. Get it from http://aka.ms/vcpython27”
- Git学习(一)(2015年11月12日)
- TCP端口号范围及分类
- Android 全屏Activity以透明的对话框形式弹出
- SSL &; TLS &; STARTTLS
- [原]secureCRT 改变显示宽度
- oAuth 认证和授权原理
- gnuplot生成gif动画
- mysql count(*) 和count(列) 的区别
- VS2015:出现devenv.sln解决方案保存对话框