css沿曲线进行动画,css3动画曲线运动

Title

.box{width: 50px;height: 120px;margin-top: 500px;margin-left: 500px}

.box2{width: 50px;height: 120px;background: black;}

.box{ animation: top1 1s ease-out forwards}

.box2{ animation: right1 1s ease-in forwards ;}

@keyframes top1 {

0%{transform: translateY(0px) ;}

100%{transform: translateY( -200px) ;}

}

@keyframes right1 {

0%{transform: translateX(0px) rotate(0deg);}

100%{transform: translateX(200px) rotate(90deg);}

}

第一种写法通过两个盒子执行不同动画,第二种通过一个盒子执行两个动画。

Title

.box{

text-align: center;

width: 50px;

height: 80px;

border-radius: 10px;

background: black;

position: absolute;

animation:bimg1 2s ease-out forwards,bimg2 2s ease-in forwards;

/*ease-out ,和ease-in 顺序不能反*/

}

.main{width: 30px;height: 10px;background: whitesmoke;margin: 85% auto;border-radius: 2px}

@keyframes bimg1 {

0% {top: 0;transform: rotate(0deg)}

100% {top: 200px;transform: rotate(-90deg)}

}

@keyframes bimg2 {

0% {left: 0;}

100% {left: 400px;}

}

来源:https://www.cnblogs.com/xiaobaibubai/p/7060189.html

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值