css3 一些简单的动画使用方法
程序员文章站
2024-03-24 21:00:10
...
css3 一些简单的动画使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
height: 200px;
background: #3be637;
margin: 100px auto;
/*旋转*/
/*transform: rotate(100deg);*/
/*位移*/
/* transform: translate(150px,150px);*/
/*缩放*/
/* transform: scale(2);*/
/*斜切*/
/*transform: skew(30deg,30deg);*/
transition: all 1s ease;
}
/*transform 需要事件来触发*/
.box:hover{transform: skew(30deg,30deg); }
.box2{
width: 100px;
height: 100px;
background: blue;
animation: run 5s infinite linear;
margin-left: 100px;
/*定义动画执行到100%的位置停止住*/
/*animation-fill-mode: forwards;*/
}
@keyframes run {
0%{
width: 200px;
}
50%{
width: 500px;
}
100%{
width: 1000px;
}
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>上一篇： 点击展示/收起Animation