爱站程序员基地效果如图:
1.动画的基础属性,上面添加了两个动画,一为旋转,二为变色,当给section元素添加这两个动画时,两个动画不分先后同时执行
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>2D基础动画</title><style>html{height: 100%;}body{height: 100%;margin: 0;}/*中心点*/div{width: 20px;height: 20px;background-color: black;border-radius:50%;/*定位，相对body设置绝对定位*/position: absolute;left: calc(50% - 10px);top: calc(50% - 10px);}/*旋转的小球*/section{width: 100px;height: 100px;background-color: red;/*定位，相对body设置绝对定位*/position: absolute;left: calc(50% + 60px);top: calc(50% + 60px);border-radius: 50%;/*添加动画*//*动画名称*/animation-name: xuanzhuan,changeColor;animation-duration: 3s;animation-iteration-count:infinite;/*速率默认ease（慢-快-慢）ease-in(慢-快)ease-out(快-慢)*/animation-timing-function:ease;animation-timing-function: cubic-bezier(0.05,0.66,0.28,1.2);/*origin赋值为x轴 y轴的坐标点*/transform-origin: -60px -60px;/*添加变色的动画----不能在这里添加新的动画，旧的会被覆盖，可以将两个动画属性写在一起*//*animation: changeColor 3s linear infinite;*/}/*动画规则*/@keyframes xuanzhuan{from{transform: rotate(0);}to{transform: rotate(360deg);}}@keyframes changeColor{0%{background-color: red;}20%{background-color: forestgreen;}40%{background-color: darkblue;}60%{background-color: tomato;}80%{background-color: mediumvioletred;}100%{background-color: yellow;}}</style></head><body><div></div><section></section></body></html>
2.动画的其他属性
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>2D动画的其他属性</title><style>html{height: 100%;}body{height: 100%;margin: 0;}section{width: 100px;height: 100px;background-color: darkcyan;position: absolute;left: 100px;top: 100px;/*添加动画 将容器移动到距离右侧100px的位置上*/animation: move 3s;animation-delay: 0s;animation-iteration-count: 3;/*设置动画的方向alternate属性使动画能够正反轮流播放*/animation-direction: alternate;/*动画的填充模式，当动画无限次数执行时以下样式无效*//*动画结束后将保持到动画开始前的状态*/animation-fill-mode:backwards;/*动画结束后将保持到动画结束后的状态*/animation-fill-mode: forwards;/*应用以上两者模式，动画最终保持在结束后的状态*/animation-fill-mode: both;/*动画的速率是通过贝塞尔曲线实现的，数值越大，速度越慢 数值越小，速度越快参数中，前两个值指的开始状态的速率，后两个值指的结束状态的速率*/animation-timing-function: cubic-bezier(0.975, 0.02, 0.165, 1);}@keyframes move{from{/*transform: translate(0);*/left: 100px;}to{/*transform: translateX(calc(100% - 200px));*//*from中使用left to中使用right是无效的*/left: calc(100% - 100px - 100px);}}</style></head><body><section></section></body></html>
如果文章对你有帮助,麻烦点个赞,谢谢~
