<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #first{ width: 200px; height: 200px; background-color: orange; margin-left: 200px; margin-top: 200px; /*=========过渡========*/ transition: 5s; } #first:hover{ /*===========2D==========*/ /*transform: rotate(45deg);*/ /* 平面内旋转*/ /*transform: translate(30px,30px); 位置的移动,表示向右30px,向下30px*/ /*transform: scale(2); 倍数的放大*/ /*transform: skew(0deg,-30deg); 扭曲*/ /*transform: skew(30deg,30deg);*/ /*===========3D=============*/ /*transform: rotateX(180deg);*/ /*transform: rotateY(360deg);*/ /*transform: rotateZ(360deg);*/ } #second{ width: 300px; height: 300px; background: black; position: relative; /*相对定位*//*由于需要位置改变,所以增加了position属性*/ animation: mysecond 5s infinite /*alternate; 动画捆绑,两个值,动画名称/时长,加上一个无限执行,交替执行 */; } @keyframes mysecond{ /*改变位置和背景颜色*/ 0%{background: red;border-radius: 90px/*为元素添加圆角边框*/;box-shadow: -35px 0px 15px gray;left: 0px;top: 0px;} 25%{background: yellow;border-radius: 0px;left: 400px;top: 0px;} 50%{background: blue;border-radius: 90px;left: 400px;top: 300px;} 75%{background: green;border-radius: 0px;box-shadow: 0px 30px 15px gray;left: 0px;top: 300px;} 100%{background: red;border-radius: 20px;left: 0px;top: 0px;} /*from{background: red;border-radius: 90px;box-shadow: -35px 0px 15px gray;left: 0px;top: 0px;} to{background: yellow;border-radius: 0px;left: 400px;top: 0px;} }*/ </style> </head> <body> <!--<div id="first"> 今天周末 </div>--> <!----------------动画---------------> <div id="second"> </div> </body> </html>
--旋转transform
-----2D
--------rotate(edg)平面内旋转
--------translate(横向，纵向)
--------scale(宽，高)
--------skew(水平角度，垂直角度)
-----3D
--------rotateX(edg)
--------rotateY(edg)
--过渡transition:3s 时间 不是hover加 是那个容器需要给那个容器加
--动画
-----属性:animation:动画名称、时长，加上一个无限执行，交替执行
-----@keyframes动画名称{
0%
25%
50%
75%
100%
}
----------------动画名称{
form{}
to{}
}