css3形变与动画

  • css3形变效果
#box{
     transform:matrix(); //矩阵变换
     transform:translate(x,y)//平移变换
     transform:scale(x,y) //水平竖直方向伸缩变换
     transform:rotate(); //2d旋转
     transform:skew();//倾斜变换

     transform: rotate() scale(x,y) skew(); //缩写形式
}
  • css3过渡动画(鼠标移入动画发生,鼠标移出恢复默认)
   #div{
      transition-property:all;//指定动画属性一般写all即可
      transition-duration:2s;//动画过渡时间
      transition-timing-function:ease/linear //定义动画效果
      transition-delay:1s;//动画延迟时间
     
      transition:background-color 1s ease 1s,transform 1s linear 1s;//缩写形式
   } 
   #div:hover{
       background-color:red;
       transdorm:scale(2);
   }
  • animations动画
    animations和transitions都是通过改变元素属性实现动画效果,但transitions只能指定开始和结束,animations可以实现更复杂的效果。
//声明一个自定义动画name1
@keyframes name1{
    0%{ margin-left:0px; }
   50%{ margin-left:100px; }
  100%{ margin-left:200px; }
}

#div{
  animation-name:name1;//调用声明的动画
  animation-duration:2s;//动画持续时间
  animation-timing-function:linear;//动画播放方式
  animation-delay:1s;//动画延迟时间
  animation-iteration-count:3;//动画播放次数
  animation-direction:aalternate://动画方向交替
  animation-fill-mode:forwards;//动画会停留在最后一帧

  animation:name1 2s linear 1s 3 alternate forwards;//简写形式
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值