css-动画效果

原创于 2019-10-30 13:55:59 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

前端开发、java web、数据库专栏收录该内容

71 篇文章

订阅专栏

css3的动画效果
过渡
变换
动画
transition: width 2s,height 2s,background-color 2s;
transition: all 2s;
变换
translate(200px,0px)
旋转：transform:rotate(360deg);
比例方法
transform:scale(2,2);
动画

@keyframes  myframe{
from{
     }
to{
  }
}

from to 从啥到啥
按百分比写
animat myframe 5s;
infinite 死循环永远的转

<!DOCTYPE html>
<html>
<head>
	<title>过渡效果</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="./css/过渡.css">
</head>
<body>
	<div class="action">
		
	</div>

</body>
</html>

.action{
	width: 200px;
	height: 200px;
	background-color: red;
	/*transition: width 2s,height 2s,background-color 2s;*/
	/*transition: all 2s;*/
	transition: transform 2s;


}
.action:hover{
	animation: myf 5s;
	/*width: 400px;
	height: 400px;
	background-color: green;*/
	/*transform:translate(200px,0px);*/

   /* transform:rotate(360deg);*/
    transform:scale(2,2);

}
@keyframes myf{
     from{
     	background: red;
     }
     to{
     	background: green;
     }

}