css常用属性

<!-- placeholder 属性意思是搜索框内预期值的剪短提示文字 -->
<input type="text" placeholder="搜索电影、电视剧、综艺、影人">

.koubei_body table {
	width: 300px;
	height: 360px;
	/*合并边框，只有合并边框了，才能给tr添加border-bttom属性生效*/
	border-collapse:collapse;
}

.remen_img {
	height: 240px;
	width: 675px;
	/*动画名称，时间，匀速，无线循环，反向动画*/
	animation: haibao 12s  linear infinite alternate;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 34px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #939CA3;
  border: none;
  /*去掉点击按钮默认的蓝色边框*/
  outline: none;
  /*下面的意思是，放上去有小手手*/
  cursor: pointer;
}

div:hover .a {
			/*顺时针旋转225度*/
			transform: rotate(225deg);
			/*过渡动画 0.2秒*/
			transition: all 0.2s;
		}

.c {
			margin: 100px auto;
			width: 100px;
			height: 100px;
			background-color: red;
			/*选择旋转中心点，left，center，或者x y 坐标，单位px*/
			transform-origin: 10px 10px;
			/*过渡动画，默认值是all，后面跟的是时间*/
			transition: all 0.6s;
		
		}

	/*先规定动画，@keyframes 后面写动画名称，花括号里面写动画执行的程序*/
	@keyframes donghua {
		0% {
			background-color: yellow;
			/*沿着左上角旋转*/
			transform-origin:left top;
			/*顺时针旋转90度*/
			transform: rotate(90deg);
		}
		25%{
			background-color: blue;
			/*到了蓝色的时候，放大1.2倍*/
			transform: scale(1.2);
			/*沿着左上角旋转*/
			transform-origin:right top;
			/*顺时针旋转90度*/
			transform: rotate(180deg);
		}
		75%{
			background-color: pink;
			/*到了粉色时候缩小0.8*/
			transform: scale(0.8);
			/*沿着左上角旋转*/
			transform-origin:right bottom;
			/*顺时针旋转90度*/
			transform: rotate(270deg);
		}
		100%{
			background-color: red;
			/*沿着左上角旋转*/
			transform-origin:left bottom;
			/*顺时针旋转90度*/
			transform: rotate(360deg);
		}
	}

div[class^="round"],div[class="dot"] {
			/*绝对定位，保证圆圈在盒子里的位置*/
			position: absolute;
			/*这个一定要写top和left，其他任何right，bottom，都不能写，一定是50%,否则圆圈不会在盒子正中心相四周发散*/
			top:50%;
			left:50%;
			/*transform移动，移动round本身的xy各-50%*/
			transform:translate(-50%,-50%);
		}

/*给盒子添加阴影,x,y,阴影大小，阴影颜色.添加阴影而不给边框，好看些*/
			box-shadow: 0 0 14px yellow;

div.round2 {
			/*第二个圆圈等待0.3s后运行*/
			animation-delay: 0.3s;
			/*透明度，0-1之间，数值越小越透明*/
			opacity:1;	
		}

.hz {
			/*绝对定位要加，不加最后left50%的时候，动画会往后退*/
			position: absolute;
			width: 124px;
			height: 220px;
			background: url(动画帧.jpg) 0 0 no-repeat;
			/*调用动画：名称，动画走完时间，按步数走，走8步，无线循环*/
			/*动画video 用3s，匀速，走完后不返回，停原地坐标*/
			animation: move 0.6s steps(8) infinite,video 3s linear forwards;
		}

img {
    /* 去除图片顶部的空白缝隙 */
    vertical-align: top;
}