css设计指南-笔记7

CSS3 过渡

过渡属性

transition-property			//过渡的css属性名，如color、width
transition-duration			//过渡的持续时间，如2s、500ms
transition-timing-function	//过渡的调速函数，如linear、ease-in、ease-out、ease-in-out
transition-delay			//过渡开始前的延迟时间

简写
transition: color 2s ease-in 100ms;

第一条规则设定属性的初始状态和过渡参数
第二条规则设定事件发生时属性的目标状态

用户单击输入字段后，输入框的边框颜色会从黑色变化为绿色，过渡周期为2s
input {border-color:black; transition:border-color 2s;}
input:focus {border-color:green;}
//注意厂商前缀

通常过渡动画是由用户鼠标悬停的:hover伪类规则和表单元素获得焦点时的:focus伪类规则触发

用css创造三角形

div {
	border: 12px solid;
	border-color: transparent red transparent transparent;
	height: 0;
	width: 0;'
}