CSS3秘笈复习:第九章&第十章
第九章
1.和链接有关的伪类:
(1):link,未访问过的链接
(2):visited,已访问过的链接
(3):hover,鼠标悬停链接
(4):active,单击链接时
这四种方式一定要严格按上面的顺序执行否则就会无效。
第十章
1.transform属性:
要旋转一个元素,首先要提供关键字rotate,后面是要旋转的角度,例如:
transform : rotate(10deg); //顺时针旋转10度
另一个关键字是scale(缩放),让它变得更大或更小,例如:
transform : scale(2) //使元素放大两倍 ,0-1之间的数字表示缩小,大于1的数字表示放大
(1)分别对水平方向和垂直方向的缩放:
transform : scale(.5 , 2); //第一个表示水平方向的缩小,第二个表示垂直方向的放大
(2)分别对X轴或者Y轴缩放:
transform : scaleX(3.5);
transform : scaleY(3.5);
2.translate函数:
transform属性的translate函数只是将一个元素从它现有的位置向左或右以及向上或下移动一定的距离。translate有两个值:第一个值指定水平距离,第二个值指定垂直距离。
(1)translateX只是将元素向左或者向右移动:
transform : translateX(-0.5em);
(2)translateY是将元素向上或者向下移动:
transform : translateY(-0.5em);
3.transition属性:
skew:将元素沿着X轴或Y轴倾斜,例如:
transform : skew(0deg , 45deg); //第一个值是一个0deg~360deg之间的度数值,从元素上方沿着逆时针方向进行;第二个值也是一个0deg~360deg之间的度数值,沿着顺时针方向从元素的右侧进行。
skew函数也有X轴和Y轴函数:skewX和skewY。
CSS transition的核心是用4个属性控制要以动画展示哪些属性、动画过程要多久、使用什么类型的动画,以及动画开始之前要不要延迟。例如:让一个导航按钮的背景色,在访问者的鼠标经过它时,由橙色变成蓝色:
.navButton{
background-color : orange ;
transition-property : background-color ;
transition-duration : 1s ;
}
.navButton : hover{
background-color : blue ;
}
第一个属性transition-property定义了要以动画形式展示哪些属性。多个属性以逗号隔开。第二个属性transition-duration指定动画持续时间。
还可以通过transition-ptiming-function控制动画的速度。值可以是以下关键字之一:linear、ease、ease-in、ease-out以及ease-in-out。
延迟启动transition属性:transition-delay。
4.animation:
transition只能从一组属性转变到另一组属性,而animation可以从一组属性转变到另一组属性,再转变到另一组属性等。
创建动画的步骤:
(1)定义关键帧:
基本结构:
@keyframes animationName{
from{
/*list CSS properties here*/
}
to{
/*list CSS properties here*/ }
}
它以@keyframes开头,接着是一个名称,这个名称就是你要运用到元素上的动画名字。然后添加起始关键帧(from)和结束关键帧(to)。并非仅限两个关键帧,还可以用百分比定义多个关键帧。例如:想要创建一种让元素的背景色从黄色变成蓝色再变成红色的效果,可以这样写:
@keyframes backgroundGlow{
from{
background-color:yellow; }
50%{
background-color:blue;
}
to{
background-color:red;
} }
(2)将动画引用给元素
html代码:
<div class=“announcement”></div>
css代码:
.announcement{
animation-name:fadeIn; //第一步中定义的动画名称
animation-duration:0.5s; //动画所需时间
}
CSS3秘笈复习:第九章&第十章的更多相关文章
- CSS3秘笈:第九章
1.链接状态:大部分浏览器支持4中基本的链接状态:未访问的链接.已访问的链接.访问者的鼠标正悬停在上方的链接.正被单击的链接.这些状态的4个对应伪类选择器分别是:link.:visited.:hove ...
- CSS3秘笈复习:十三章&十四章&十五章&十六章&十七章
第十三章 1.在使用浮动时,源代码的顺序非常重要.浮动元素的HTML必须处在要包围它的元素的HTML之前. 2.清楚浮动: (1).在外围div的底部添加一个清除元素:clear属性可以防止元素包围浮 ...
- CSS3秘笈复习:第六章
第六章 1.文本大写化: text-transform:uppercase; 另外三种选项是:lowercase或capitalize以及none. 2.文本修饰: text-decoration:u ...
- CSS3秘笈复习:第一章&第二章&第三章
第一章: 1.<cite>标签不仅可以将网页设置为斜体,还能给标题做上标记,使它便于被搜索引擎搜索到. 第二章: 1.import指令链接样式表: CSS本身有一种添加外部样式的方法:@i ...
- CSS3秘笈复习:第十一章
1.text-align与vertical-align: text-align控制水平方向的定位,关键字是left.right.center和justify. vertical-align控制垂直方向 ...
- CSS3秘笈复习:第七章
1.边距冲突: 当元素的bottom margin碰到另一个元素的top margin可能会产生一些怪异的计算,浏览器会忽略小的那个值而使用大的值. 2.边距折叠: 假设要在警告框里插入一个标题,并且 ...
- CSS3秘笈复习:第八章
一.背景的所有属性: 属性 作用 可选项 1.background-image 定义一张图片 url(...) 2.background-repeat 控制重复 no-repeat | repeat- ...
- CSS3秘笈:第一章
1.<div>和<span>标签: <div>和<span>标签:就像是一个空的容器,我们要往里面填充内容.一个div就是一个块,意味着它的前后都要空一 ...
- CSS3秘笈:第二章
1.一个样式由两个元素组成:浏览器对其设置格式的网页元素(选择器,selector)和实际的格式化指令(声明块,declaration block). 2.简单的样式也包含了以下几个元素: (1)Se ...
随机推荐
- Day1 老男孩python自动化运维课程学习笔记
2017年1月7日老男孩python自动化运维课程正式开课 第一天学习内容: 上午 1.python语言的基本介绍 python语言是一门解释型的语言,与1989年的圣诞节期间,吉多·范罗苏姆为了在阿 ...
- CodeForces 213B Numbers
$dp$,组合数. $dp[i][j]$表示只用数字$i$,$i+1$,$i+2$......,$9$,凑成长度为$j$的并且数字$i$到$9$符合要求的方案数.只要枚举数字$i$用几个就可以转移了. ...
- 教你成为全栈工程师(Full Stack Developer) 〇-什么是全栈工程师
作为一个编码12年的工程师老将,讲述整段工程师的往事,顺便把知识都泄露出去,希望读者能少走一些弯路. 这段往事包括:从不会动的静态网页到最流行的网站开发.实现自己的博客网站.在云里雾里的云中搜索.大数 ...
- 百度的hao123.com篡改浏览器首页,解决办法
快捷方式右键找到chrome.exe, 把chorme.exe修改成别的名字例如 chromeFuckHao123.exe 就OK了. hao123是用病毒的形式查找chrome.exe然后进程注入的 ...
- 使用java连接MySql,中文乱码解决的方法
排查MySql中文乱码的问题 1.在cmd中启动MySql. 打开命令提示符cmd,输入"mysql -uusername -ppassword",回车,就可以连接到数据库. 如输 ...
- git 基本用法
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "Helvetica Neue"; color: #454545 } p. ...
- SUSE Linux 下redis 的坑
前面redis服务器安装-SuSE Linux Enterprise Server 11 SP3一章中安装好提示开放防火墙后的一些坑 前面漏了说明redis作为一个高速数据库,在互联网上,对应的安全机 ...
- Django命令行相关命令 以及创建一个空白网页的步骤
django相关命令行命令: django.admin.py是Django的一个用于管理任务的命令行工具,manage.py是对django-admin.py的简单包装,每个Django Projec ...
- CentOS网络接口配置文件ifcfg-eth详解
======CentOS网络接口配置文件ifcfg-eth详解====== 文件 /etc/sysconfig/network-scripts/ifcfg-eth0在/etc/sysconfig/ne ...
- img 转化成iso镜像的办法
最近在使用KVM启用虚拟机,然后将里面的环境和配置 配置成我们公司需要的环境,再打包成iso镜像,之后再次生成新的虚拟机. 但是KVM启动出的镜像生成的是img镜像 ,需要将img镜像转换成iso镜像 ...