公益html网页,【HTML5校企公益课】第三天

2D动画

/*根据id获取 选择器 #id名，根据class名 .class名*/.classA{

/*设置宽高*/width:20px;height:20px;

/*设置颜色*/background-color:black;

/*设置形状*/border-radius:50%;

/*position*/position:absolute;

/*运算符号两边一定要有空格*/left:calc(50% - 10px);top:calc(50% - 10px);

/*设置动画*/animation:changeColor 3s infinite linear reverse;

}

/*转动的圆*/.classB{

/*设置宽高*/width:100px;height:100px;

/*设置颜色*/background-color:black;

/*设置形状*/

/*border-radius: 50%;*/

/*position*/position:absolute;left:calc(50% - 50px + 100px);top:calc(50% - 50px + 100px);

/*设置动画*/

/*动画名称 必要的*/animation-name:xuanzhuan, changeColor;

/*设置动画时间 必要的。*/animation-duration:5s;

/*设置动画次数 inifinaite 匀速*/animation-iteration-count:infinite;

/*设置速率 linear 匀速*/animation-timing-function:linear;

/*设置动画的方向*/animation-direction:reverse;

/*将上面的动画属性合并为以下写法，仅适用于单个动画，多个动画的设置只能分开写

animation: xuanzhuan 3s infinite linear reverse;

animation: changeColor 0.25s infinite linear reverse;

/*设置旋转中心，默认是自转*/transform-origin:-50px -50px;

}

/*设置动画*/@keyframes xuanzhuan{

/*设置初始状态*/0%{/*转换 transform*/transform:rotate(0deg) scale(1);

}

/*设置结束状态 scale缩放 translate平移 倾斜 skew*/50%{transform:rotate(180deg) scale(2);

}100%{transform:rotate(360deg) scale(1);

}}

@keyframes changeColor{0%{

background-color:white;

}10%{background-color:aliceblue;

}20%{background-color:bisque;

}30%{background-color:white;

}40%{background-color:white;

}50%{background-color:#FF0000;

}60%{background-color:white;

}70%{background-color:#FF0000;

}80%{background-color:aquamarine;

}90%{background-color:blue;

}100%{background-color:red;

}}