层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。
注:单独使用CSS是无法实现QQ邮箱登录实例(CSS为样式代码)。
实例可以使用iframe代码实现QQ邮箱登录实例。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>qq邮箱登录实例</title>
</head>
<body>
<p align="center" style="margin-top:0pxmargin-left:0">
<iframe width="1000" height="500" src="https://mail.qq.com" class="t-iframe" scrolling="no" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</p>
</body>
</html>
代码解释:
url是你要调用的网址,<p align="center" style="margin-top: -109margin-left: -109">是网页布局、其中margin-top: 0表示顶部缩进,margin-left: 0表示左边缩进。至于右边和底部缩进,很简单,修改<iframe>的宽度和高度就可以了。
其实css3有两种方式实现这个效果:1. css3 过度transition
.class{
position:relative
-webkit-transition: top 10s linear/*top 时间(用秒计算)s linear*/
-moz-transition: top 10s linear
-o-transition: top 10s linear
transition: top 10s linear
}
.class:hover{
top:100px
}
详见:http://www.w3school.com.cn/css3/css3_transition.asp
2. css3 动画animation
@-webkit-keyframes myfirst{
from {top: 0}
to {top: 100px}
}
@-moz-keyframes myfirst{
from {top: 0}
to {top: 100px}
}
@-o-keyframes myfirst{
from {top: 0}
to {top: 100px}
}
@keyframes myfirst{
from {top: 0}
to {top: 100px}
}
.class{
position:relative
}
.class:hover{
-webkit-animation:myfirst 10s
-moz-animation:myfirst 10s
-o-animation:myfirst 10s
animation:myfirst 10s
}
详见:http://www.w3school.com.cn/css3/css3_animation.asp
tansh96 2013-08-07 09:18
其他回答
利用css3可以实现一些动画 或者是html5里的canvas作画布
jk刚子2013-08-07 13:05
css3有这种效果,不过很多浏览器不支持。
@-webkit-keyframes twinkling{0% {
opacity: 0
}
100% {
opacity: 1
}
}
#110 {
-webkit-animation: twinkling 1s infinite ease-in-out
}
参考如上。
稍微解释一下,定义两个状态,一种状态下透明度为 0%,另一种状态下透明度为 100%,无限次地在 1 秒内切换这两种状态,看起来就是闪烁了。