一个简单的CSS3动画案例

时间：2023-04-02 15:46:39 HTML

1.简单加载中@keyframesmyfirst{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.loading{animation:myfirst1.5sinfinitelinear;//无限控制执行次数总是这里执行，线性执行速度，统一边框：16pxsolid#f3f3f3;边界半径：50%；border-top:16px纯蓝色；宽度：120px；高度：120px；}

2.简单的进度条.move{width:0px;高度：10px；动画：moveHover5s无限线性；}

3。Transitionproperty.change{transition:width2s;字体大小：10px；宽度：100px；高度：20px；背景：黄色；-moz-过渡：宽度2s；/*Firefox4*/-webkit-transition:width2s;/*Safari和Chrome*/-o-transition:width2s;/*Opera*/}.change:hover{width:500px;}鼠标悬停

.bigger{字体大小：20px；宽度：0；height:0;//scale根据宽高变大，必须设置宽高background:#2A9F00;过渡：变换5s；}.bigger:hover{transform:scale(10);}更大