zoukankan      html  css  js  c++  java
  • css购物车(抛物线)运动

    抛物线动画的原理,就是用两个元素,子元素会继承父元素的运动,将父元素在横向运动,子元素在纵向运动,子元素会形成一种双向运动。而父元素在横向上是匀速运动,子元素在纵向上是变速运动,可以使用贝塞尔曲线来定义运动,二者合成,就能出现一个曲线运动。具体的曲线,跟选择的贝塞尔函数有关,调整好,就可以形成抛物线运动。ball和after元素都运动,只不过ball元素不显示罢了。

    例如:

    <div class="ball"></div>
    .ball{
      height: 100px;
      width: 100px;
      border-radius: 50%;
      position: absolute;
      top: 40px;
      left: 40px;
      z-index: 10;
      animation: to-rr 1s 0.4s 1 linear;
      animation-fill-mode: forwards;
    }
    .ball:after{
        content: '';
        height: 100px;
        width: 100px;
        display: block;
        border-radius: 50%;
        background: greenyellow;
        animation: to-rt 1s 0.4s 1 cubic-bezier(.66,.1,1,.41);
        animation-fill-mode: forwards;
    }
    @keyframes to-rt {
      0% {
        transform: translateY(40px);
      }
      100% {
        transform: translateY(800px);
      }
    }
    
    @keyframes to-rr {
      0% {
         transform: translateX(40px) scale(0.7);
      }
      100% {
        transform: translateX(600px) scale(0.45);
      }
    }

  • 相关阅读:
    awk中NF的使用
    mysql5.7 column cannot be null
    mysqldump的简单使用
    mysql 删表引出的问题
    centos6.6 下安装mysql5.7
    从高的角度看自动化测试
    java提示找不到或无法加载主类
    修改chrome插件
    jenkins修改时区
    Rest-assured 写日志到 log4j
  • 原文地址:https://www.cnblogs.com/mengff/p/12871414.html
Copyright © 2011-2022 走看看