scale的应用(分页按钮)
实现当鼠标碰到按钮时,按钮放大且不会影响其他盒子,用scale可以不影响其他盒子
li{
float: left;
width: 30px;
height: 30px;
border: 1px solid pink;
text-align: center;
line-height: 30px;
list-style: none;
margin: 10px;
border-radius: 50%;
transition: all .4s;
cursor: pointer;
}
li:hover{
transform: scale(1.1);
}
tranform的综合使用
当transform同时有位移和其他属性时,将位移属性放在最前面
div{
width: 200px;
height: 200px;
background-color: pink;
transition: all 0.5s;
}
div:hover{
/* 我们同时位移和其他属性,要把位移放在最前面 */
transform: translate(50px,50px) rotate(180deg) scale(1.2);
}
动画
动画制作分为两步:
1、定义动画,from = 0%, to = 100%
/* 我们想页面一打开就有一个盒子从左边到右边 */
/* 定义动画 */
@keyframes move{
/* 开始状态 */
/* from 和 to与 0% 和 100% 对应 */
from{
transform: translate(0, 0);
}
/* 0% {
transform: translateX(0px);
} */
/* 结束状态 */
to{
transform: translate(1000px, 0);
}
/* 100% {
transform: translateX(1000px);
} */
}
2、调用动画,一定要写上动画名称,动画持续时间
div{
width: 200px;
height: 200px;
background-color: pink;
/* 调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
动画序列
可以做多个状态的变化 keyframe关键帧
里面的百分数要是整数
里面的百分比就是总的时间的划分
<style>
@keyframes move{
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0,500px);
}
100% {
transform: translate(0, 0);
}
}
div{
width: 200px;
height: 200px;
background-color: pink;
animation-name: move;
animation-duration: 3s;
}
动画的属性
@keyframes move{
0%{
transform: translate(0, 0);
}
100% {
transform: translate(1000px, 0);
}
}
div{
width: 200px;
height: 200px;
background-color: pink;
animation-name: move;
animation-duration: 2s;
/* 动画的运动方式 */
/* animation-timing-function: ease; */
/* 动画开始的时间 */
/* animation-delay: 2s; */
/* 是否要重复播放动画,infinite为一直循环 */
/* animation-iteration-count: infinite; */
/* 是否在一次播放结束就倒过来播放 */
/* animation-direction: alternate; */
/* 最后动画停止的地方 */
/* animation-fill-mode: forwards; */
}
div:hover {
/* 鼠标放上去就停止 */
animation-play-state: paused;
}