您的位置:首页 > Web前端 > CSS

Html与CSS快速入门03-CSS基础应用

2016-07-28 21:34 1086 查看
这部分是html细节知识的学习。

<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.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: