动漫效果
transform 初始选择器
tranform:rotate旋转
transform:scale缩放
transform：translate 移动（translatex X轴移动；translatey Y轴移动）
transition:2s 过度2秒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 80px;
height: 80px;
background: #92B901;
border-radius: 6px;
animation: myfirst 5s infinite ;
}
@keyframes myfirst {
10% {
transform: rotate(30deg); background:#f00;
}
50% {
transform: translateX(500px) rotate(0deg);background:#ff0;
}
80% {
transform: translateX(0) rotate(360deg);transition: 8s; ;
}
100% {
transform: rotate(720deg) ;transform: tr ;
}
}
p{width: 80px;height: 80px;background: #ff0;margin: 0px auto;border-radius: 50%;}
p:hover{transition: 2s ease;transform:rotate(360deg) scale(2);background: #f00; }
</style>
</head>
<body>
<div>css3过度</div>
<p>css3过度</p>
</body>
</html>
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
