Html与CSS快速入门03-CSS基础应用
2016-07-28 21:34
1086 查看
这部分是html细节知识的学习。
View Code
在介绍CSS3变形transformation,渐变transition和动画animation之前,需要了解浏览器的差异,比如chrome和safari使用-webkit,firefox使用-moz,微软使用-ms,Opera使用-o前缀,这是基于不同浏览器内核决定的。对于2D图形,可以使用transform:translate(x,y)平移元素,使用rotate(45deg)旋转元素,使用scale(.5)缩放元素,skewX(45deg)扭曲元素。
对于3D图像来说,需要在2D图形的基础上增加Z轴深度,通常通过透视图perspective来绘制图形,提供从特定点(vanishing point没影点)查看它们彼此之间的高度、宽度和深度。使用方式为perspective:500px, transform-style:preserve-3d,rotate(180deg), translateZ(75px)。CSS的渐变可以通过transition:transform 5s ease-in 1s;
而对于动画来说,有一个关键的概念,即关键帧,@keyframes spin{ from {} to {}}, animation:spin 5s infinite linear,看到这不经想到还是jQuery方便。
该部分内容比较复杂,在之后使用到时再回顾学习。
参考资料:
梅洛尼. HTML与CSS入门经典(第9版) [M]. 北京:人民邮电出版社, 2014.
<head> <meta charset="utf-8"> <title>实现hit, tooltip效果</title> <style type="text/css"> a{ text-decoration: none; font-weight: bold; } a.tip{ position: relative; z-index: 24; } a.tip:hover{ z-index: 25; } a.tip span{ display: none; } a.tip:hover span{ font-weight: normal; font-style: italic; display: block; position: absolute; top: 20px; left: 25px; width: 150px; padding-left: 3px; border:1px solid #000; background-color: #ddd; color: #000; } </style> </head> <body> <a href="http://www.ctrip.com" class="tip">Ctrip<span>一个不错的公司</span></a> </body>
View Code
在介绍CSS3变形transformation,渐变transition和动画animation之前,需要了解浏览器的差异,比如chrome和safari使用-webkit,firefox使用-moz,微软使用-ms,Opera使用-o前缀,这是基于不同浏览器内核决定的。对于2D图形,可以使用transform:translate(x,y)平移元素,使用rotate(45deg)旋转元素,使用scale(.5)缩放元素,skewX(45deg)扭曲元素。
对于3D图像来说,需要在2D图形的基础上增加Z轴深度,通常通过透视图perspective来绘制图形,提供从特定点(vanishing point没影点)查看它们彼此之间的高度、宽度和深度。使用方式为perspective:500px, transform-style:preserve-3d,rotate(180deg), translateZ(75px)。CSS的渐变可以通过transition:transform 5s ease-in 1s;
而对于动画来说,有一个关键的概念,即关键帧,@keyframes spin{ from {} to {}}, animation:spin 5s infinite linear,看到这不经想到还是jQuery方便。
该部分内容比较复杂,在之后使用到时再回顾学习。
参考资料:
梅洛尼. HTML与CSS入门经典(第9版) [M]. 北京:人民邮电出版社, 2014.
相关文章推荐
- css样式表和选择器的优先级以及position元素属性值的区别
- css样式表和选择器的优先级以及position元素属性值的区别
- 对h5 css3的更多新的认识
- listview的多条目样式适配
- css关于position属性的用法(绝对定位和相对定位的混淆)
- css系列(7)成品网页
- css知识总结
- css:子元素div 上下左右居中方法总结
- Input输入框中加入小图标
- Gulpfile.js——编译、压缩、合并js和css文件
- css3中的zoom元素属性值测试
- css3中的zoom元素属性值测试
- 块级元素、行内元素、空元素
- html表格样式
- CSS Border属性solid(实线)使用介绍
- CSS box-flex属性,然后弹性盒子模型简介
- 巧用cssText属性批量操作样式
- CSS学习笔记--基础(二)
- CSS学习笔记:inline和inline-block的区别
- checkbox样式自定义