选择器+2D转换+动画

绝对的干货满满，后续做项目页面的时候再给出图示的较为清晰的例子吧

第二章 ＣＳＳ３

2-1 选择器：(类选择器、属性选择器、伪类选择器的权重为10)

快捷键： input：text

1. 属性选择器

   • 选择具有att属性的E元素： E[att]
     • 例子: button[disabled] { cursor: pointer;}
   • 选择具有att属性且属性值等于val的E元素： E[att=“val”]
     • input[type] ||| input[type=“text”]
   • 匹配具有att属性、且值以val开头的E元素: E[att^=“val”]
     • bddb
   • 匹配具有att属性，且值以val结尾的E元素： E[att$=“val”]
     • ndd

   • 匹配具有att属性、且值中含有val的E元素: E[att*=“val”]

2. 结构伪类选择器

   （一）

   • 匹配父元素中的第一个子元素E E:first-child
   • 匹配父元素中的最后一个E元素 E: last-child
   • 匹配父元素中的第n个子元素E E:nth-child(n)
     • n可以是数字、关键字和公式（even偶数，odd奇数）

   （二）

   • 指定类型E中放入第一个 E: first-of-type
   • 指定类型E的最后一个 E: last-of-type(n)
   • 指定类型E的第ｎ个　　　E:nth-of-type(n)

3. 伪元素选择器（和标签选择器一样，权重为1）【在父盒子的前面或者后面写】

   会创建一个行内元素，必须有content元素，在dom中找不到该节点

   • ：：before在元素前面插入内容

   • ：：after在元素后面插入内容

   • 例子：

     p::after{
     	content: '\ea50';
     	position: absolute;
     	top: 10px;
     	right: 10px;
     	font-family: 'icomoon';
     }
     

2-2 2D转换–概念+移动

1. 转换（transform）可以实现元素的而唯一、旋转、缩放等效果转换（===变形）

   x轴朝右为正，y轴朝下为正

   • 移动： translate
   • 旋转： rotate
   • 缩放： scale

2. 移动

   移动盒子的位置：　定位、合资的外边距、２ｄ转换移动

   • 在x,y轴上的移动 ： tramsform: translate(x,y)；

     • transform: translate(100px,0);
       //50%：相对于自身的一半
       transform: translate(50%,50%);
       

   • 注意：

     • transform不会影响其他盒子
     • 对行内元素没有效果

   让一个盒子垂直水平居中:

   p {
   	position: absolute;
   	top: 50%;
   	left: 50%;
   	width: 100px;
   	height: 100px;
   	/*margin-top: -50px;
   	margin-left: -50px;*/
   	transform: translate(-50%,-50%);
   	//transform: tranlateX(50%);
   	
   }
   

2-3 2D转化–旋转

1. 旋转：rotate

   • transform： ratate(度数)

   • 角度为正时，顺时针；负时，为逆时针

   • 默认旋转的中心点是元素的中心点

     img {
     	width: 150px;
     	border-radius: 50%;
     	border: 5PX SOLID PINK;
     	transition： all o.3s;
     }
     img: hover {
     	transform : rotate(360deg);
     }
     

2. 案例：2D旋转rotate（三角形）

   div{
   	position: relative;
   	width: 300px;
   	height: 100px;
   	border: 1px solid #000;
   }
   div::after{
   	content: "",
   	positioN: absolute;
   	top: 8px;
   	right: 10px;
   	border-right: 1px solid #000;
   	border-bottom: 1px solid #000;
   	transform: rotate(45deg);
   	transition: all 0.2s;
   }
   div:hover::after{
   	transform: rotate(225deg);
   }
   

3. 2D设置旋转中心transform-origin：

   • 语法： transform-origin: x y;
     • x，y中间用空格隔开
   • 注意：
     • x，y默认旋转的中心点是元素的中心点（50% 50%）

4. 例子：

   div {
   	width: 200px;
   	height: 200px;
   	b-color: pink;
   	margin: 100px auto;
   	transition: all 1s;
   	/*1. 可以跟方位名词*/
   	/*transform-origin: left bottom;*/
   	/*2. 默认的是50% 50%，等价于 center center*/
   	/*3. 可以是px像素*/
   	/*transform-origin: 50px 50px;*/
   }
   div:hover {
   	transform: rotate(360px);
   }
   

   div{
   	overflow: hidden;
   	width: 200px;
   	height: 200px;
   	border: 1px solid pink;
   	margin: 10px;
   	float: left;
   }
   div::before{
   	content: ”黑马“;
   	diaplay: block;
   	width: 100%;
   	height: 100%;
   	b-color: hotpink;
   	transform: rotate(180deg);
   	transform-qrigin: left bottom;
   	transition： all .4s;
   }
   div:hover::before {
   	transform: rotate(0deg);
   }
   

   效果图：

2-4 2D转化–缩放scale

1. 语法： transform: scale(x,y);
   • x，y为宽高的倍数，不加单位
   • 等比例放缩： transform: scale(3);
   • 不影响其他盒子，而且可以设置缩放的中心点transform-origin: left bottom;
2. 分页按钮案例：（*快捷键：ul>li{$}7）
3. 2D转化综合写法：
   • 同时使用多个转化：
   • 格式： transform : translate() rotate() scale()...等
   • 其顺序会影响转化的效果，先旋转会改变坐标轴的方向
   • 同时有位移和其他属性时，记得要将位移放在最前

2-5 动画

1. 相较于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

2. 动画的基本使用：

   • 先定义动画

     @keyframs(规定某项CSS样式，就能创建由) move {
     	/*开始状态*/
     	0%/from{ transform: translate(0px,0px); }
     	
     	25%{ transform: translateX(1000px); }
     	
     	50%{ transform: translate(1000px,500px); }
     	
     	75%{ transform: translate(0,500px); }
     	/*结束状态*/
     	100%/to { transform: translate(0,0); }
     }
     
     

   • 在调用动画

     div{
     	width: 200px;
     	height: 200px;
     	animation-name: move;   /*动画名称*/ 
     	animation-duration: 2s;
     }
     

3. 动画的基本属性

   • @keyframs： 规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果

   • animation-timing-function:规定动画的速度曲线，默认为”ease“

     • 默认是ease：低速开始，加速在结束前变慢
     • linear：匀速
     • ease-in: 低速开始
     • ease-out： 低速结束
     • ease-in-out： 低速开始和结束
     • steps(): 指定了时间函数中的间隔数量

   • animation-delay:规定动画何时开始，默认为0

   • animation-iteration-count:规定动画被播放的次数，默认为1，还有infinite

   • animation-direction:规定动画是否在下一周期逆向播放，默认是”normal“，alternate逆播放

   • animation-play-state：规定动画是否正在运行或暂停，默认是”running“,还有”paused"

   • animation-fill-mode:规定动画结束后状态，保持forwards，回到起始backwards

     div: hover{
     	animation-play-mode: paused;
     }
     

4. 动画简写属性：

   animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
   animation: **name** **duration** timing-function delay iteration-count direction fill-mode;
   

   • 例子：animation: myfirst 5s linear 2s infinite alternate;

5. 热点图案例（城市的波纹图）：

.dotted{
	width: 8px;
	height: 8px;
	background-color: #09f;
	border-radius: 50%;
}
.city(10) div(1)[class^="pulse"](10){
	/*保证我们小波纹在父盒子里面水平垂直居中，放大之后就会中心向四周发散*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 8px;
	height: 8px;
	box-shadow: 0 0 12px #009dfd;
	border-radius: 50%;
	animation: pulse 1.2s linear(匀速) infinite;
}
.city div.pulse2(10){
	animation-delay: 0.4s;
}
.city div.pulse3{
	animation-delay: 0.4s;
}
@keyframes pulse {
	0%{}
	70%{
        width: 40px;
        height: 40px;
        opacity: 1;
	}
	100%{
		width: 70px;
		height: 70px;
		opacity: 0;
	}
}

<div class="map">
	<div class="city">
		<div class="dotted"></div>
		<div class="pulse1"></div>   //3个波纹
		<div class="pulse2"></div>
		<div class="pulse3"></div>
	</div>
</div>

6. 案例： 打字机效果：

   div{
   	overflow: hidden;
   	font-size: 20px;
   	width: 0;
   	height: 30px;
   	b-c: pink;
   	white-space: nowrap;   //文字强制一行显示
   	animation: w 4s steps(10) forwards;
   }
   @keyframes w{
   	0%{
   		width: 0;
   	}
   	100%{
   		width: 200px;
   	}
   }
   
   <div>世纪佳缘我们这里等你</div>
   

7. 案例： 奔跑的小熊案例(跑到最中央之后，停下不停奔跑)

   div{
   	position: absolute;
   	width: 200px;
   	height: 100px;
   	background: url(media/bear.png) no-repeat;
   	animation: bear 1s steps(8) infinite，
   				move 1s forwards;
   }
   
   @keyframes bear {
   	0% {
   		background-position: 0 0;
   	}
   	100%{
   		backgtound-positionL -16oopx 0;
   	}
   }
   @keyframes move {   //跑到舞台中央
   	0% {
   		left: 0;
   	}
   	100% {
   		left: 50%;
   		margin-left: -100px;
   	}
   }