css3

css遇到不能识别的属性不会报错， 1盒模型中：box-sizing:border-box;将border和padding计算在宽高之内， content-box:border和padding不在宽高之内， 2圆角属性：border-radius 3:盒子阴影和选择器和变型 4：过渡动画：属性 transition: 发生过渡动画的属性名 过渡动画的时间 缓动曲线 延迟的时间; transition-property 突变的属性名 transition-duration 过渡动画的时间 transition-timing-function 缓动曲线 transition-delay 延迟的时间 transformcss3过渡是从一种样式逐渐变成另一种的效果， 语法：transition:width,.5s ease .2s; 凡是有值可以转化为属性的属性，都可以发生过渡动画。例如：padding, margin, border, color, line-height等。 变型：二维变型：旋转变型，斜切变型，缩放变型，位移变型，

https://github.com/xunzhaoxiwang

5:css3动画 自定义动画通过@keyframes 自定义动画名称{ from{ /起始状态/ } to{ /结束状态/ } } 在css选择器中 animation: 自定义动画的名称 动画时长 缓动曲线 延迟时间

div{
      width: 250px;
      height: 250px;
      position:absolute;
      left:10px;
      top:300px;
      background: url('images/51/51.jpg');

       /*从左向右移动(一次)*/
      /*animation: gogo 4s ease 0s;*/
      /*从左向右移动(一次，并停留在终点)*/
      /*animation:gogo 2s ease 0s forwards;*/
      /*从左向右移动(延迟2秒才开始动画)*/
      /*animation:gogo 2s ease 2s forwards;*/
      /*从左向右移动(3次)*/
      /*animation:gogo 2s ease 0s 3 forwards;*/
      /*从左向右交替移动5次*/
      /*animation:gogo 2s ease 0s 5 alternate forwards;*/
     /*从左向右交替移动(无限次)*/
   /*animation:gogo 2s ease 0s alternate forwards infinite;*/
     /*从左向右先快后慢移动  animation:kuaiman 2s ease 0s;
    }

小风轮
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2017/12/5/16025a418b7db9f7~tplv-t2oaga2asx-image.image" alt="" class="fengche">
.fengche{
		animation:zhuan 4s linear 0s infinite;
		}
		@keyframes zhuan{
			0%{
				transform:rotate(0deg);
			}
			100%{
				transform:rotate(-360deg);
			}
		}

小球上下跳动 img{ margin:200px 50px; }

	.ball{
		animation:tiao 0.8s ease-in 0s infinite alternate;
	}

	@keyframes tiao{
		from{
			transform:translateY(-200px);
		}
		to{
			transform:translateY(0);
		}
	}

案例：github.com/xunzhaoxiwa…