transform
/* 元素进行平移 translate(x,y) translateX(x) */
/* transform: translate(20px,50px); */
/* 进行 缩放 scale(x,y) scaleX()*/
/* transform: scale(); */
/* 旋转 */
/* transform: rotate(10deg ); */
/* 过渡效果 */
/* transition: width 10s ; */
/* 多个 */
/* transition:width 10s , height 10s ; */
/* 透明 */
/* transition: opacity 10s; */
/* 所有 */
/* transition: all 8s; */
/*加延迟时间 第一个是持续时间,第二个是延迟时间 */
/* transition: all 5s 2s; */
/* ease 慢快慢 */
/* transition:all 15s ease; */
/* 执行动画,执行时间 线性 延迟 循环几次(infinite 无限次)
从开始到结束,再返回到开始 保持最后状态(forwards),backwards
在延迟的时间内,动画已经进行应用了。
*/
/*
animation: first 1s linear infinite ;
animation-name
animation-duration
animation-timing-function: ;
animation-delay:
animation-iteration-count: 播放次数 */
/* animation-direction: ; 逆向播放 normal默认 逆向alternate
animation-play-state: ; 运行 暂停
animation-fill-mode: 动画状态 默认是 none 保持最后状态(forwards),backwards
在延迟的时间内,动画已经进行应用了。 */
动画
/* 动画 */
@keyframes first{
/* //开始
from{
background-color: antiquewhite;
}
//结束
to{
background-color: #00008B;
}
}
*/
//第2中方式:
//这种方式 是按照动画进行的百分比进行动画的。
0%{
background-color: cadetblue;
transform: translate(230px,-60px);
}
25%{
background-color:aqua;
transform: translateY(200px);
}
50%{
background-color:#F0F8FF ;
transform: translateX(-200px);
}
75%{
background-color:cadetblue;
transform: translateY(-80px);
}
100%{
background-color:red;
transform: translateX(60px);
}
}
动画的小练习
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<style>
.ma{
width: 300px;
height: 300px;
transform: translate(200px,200px);
}
.box{
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
border-radius: 10px;
backface-visibility: hidden;
/* 鼠标:小手 */
cursor: pointer;
transition: all 2s;
}
.b1{
background-color: #00008B;
}
.b2{
background-color: #FF0000;
transform: rotateY(-108deg);
}
</style>
</head>
<body>
<div class="ma">
<div class="box b1" id="ss"></div>
<div class="box b2"></div>
</div>
</body>
<script>
var bt1=document.querySelector(".b1");
var bt2=document.querySelector(".b2");
bt1.onclick = function(){
console.log(1);
bt1.style.transform="rotateX(180deg)";
bt2.style.transform="rotateX(0deg)"
}
bt2.onclick=function(){
bt1.style.transform="rotateX(0deg)";
bt2.style.transform="rotateX(180deg)"
}
</script>
</html>