复习

总结
1，在回来这几天我回顾之前学习的知识温顾而知新。
2，对于CSS的和HTML的认识深了。
下面的是变大变小和旋转的结合。
@charset “utf-8”;
/* CSS Document /
{
margin: 0;
padding: 0;
}
body{
display: flex;
flex-direction: row;
justify-content: center;
}
.cont{
width: 1000px;
height: 1000px;
/background: #8F60C3;/
display: flex;
/ margin-left: 40%;/
flex-direction: row;
justify-content: center;
align-items: center;
}
.mkl{
width: 900px;
height: 900px;
background: #E40606;
display: flex;
flex-direction: row-reverse;
align-items: center;
border-radius: 50%;
}
.mkl img{
width: 900px;
height: 900px;
transform: rotate(360deg);
animation: ghu 0.2s ease-in-out infinite;
border-radius: 50%;
}
.btn{
width: 700px;
height: 700px;
border-radius: 50%;
text-align: center;
background: url(IMG_20170530_132133.jpg) no-repeat;
transform: rotate(360deg);
animation: xuanzhuan 0.1s ease-in-out infinite;
}
.cont .btn:hover{
transform:translate3d(300deg);
animation: niuqu 0.2s ease-in-out infinite;
}
.cont .btn:active{
transform: scale(0.8);
animation: fangsuo 1s ease-in-out infinite;
}
.mkl img:active{
transform: scale(0.8);
animation: fangsuo 1s ease-in-out infinite;
}
@keyframes fangsuo{
0%{
transform: scale(1.2);
}
100%{
transform: scale(0.1);
}
}
@keyframes niuqu{
0%{
transform: skewX(20deg);
}
50%{
transform: skewX(0);
}
100%{
transform: skewX(-20deg);
}
}
@keyframes xuanzhuan{
0%{
transform:rotate(0deg);
}
25%{
transform: rotate(90deg);
}
50%{
transform: rotate(180deg);
}
75%{
transform: rotate(270deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes ghu{
0%{
transform:rotateY(0deg);
}
25%{
transform: rotate(90deg);
}
50%{
transform: rotate(180deg);
}
75%{
transform: rotate(270deg);
}
100%{
transform: rotateY(360deg);
}
}