css 3D旋转和上下箭头跳动 - WEB前端小菜鸟

css 3D旋转和上下箭头跳动

2019-06-13 16:21  WEB前端小菜鸟  阅读(867)  评论(0)  编辑  收藏  举报

vue中写的 

写css动画分两步

第一步：先定义动画规则

第二部：定义好的动画规则 吓到你要动的类里面

<template>
  <div class="money"
       id="box">
    <!-- 这是相关css测试 -->
    <!-- <p>box-shadow内部全部阴影</p>
    <div class="one">

    </div> -->
    <!-- <div id="background"
         class="wall"></div>
    <div id="midground"
         class="wall"></div>
    <div id="foreground"
         class="wall"></div>
    <div id="top"
         class="wall"></div> -->
    <p>css动画篇</p>
    <!-- 3d旋转 -->
    <img class="imgimg"
         src="../img/preview.jpg"
         alt="">
    <!-- 上窜下跳箭头 -->
    <div class="arrow">
      <img src="https://pro-kg-oss.oss-cn-beijing.aliyuncs.com/author/inlet/arrow.png"
           alt="">
    </div>

  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
    
    };
  },

  mounted() {
    
  },

};
</script>
<style scoped lang=\'less\'>
// 3d旋转
@-webkit-keyframes haha1 {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
  }
  50% {
    -webkit-transform: rotate3d(0, -0.5, 0, 180deg);
  }
  100% {
    -webkit-transform: rotate3d(0, -1, 0, 360deg);
  }
}
// 上下箭头
@-webkit-keyframes updown {
  25% {
    transform: translateY(-50px);
  }

  50%,
  100% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(50px);
  }
}
#box {
  .imgimg {
    width: 200px;
    height: 200px;
    border-radius: 50%;

    -webkit-animation: haha1 3s linear infinite;
  }
  .arrow {
    width: 200px;
    height: 200px;
    img {
      width: inherit;
      -webkit-animation: updown 3s linear infinite
    }
  }
}

</style>

 

•