短视频开发，制作上下动态的箭头动画

短视频开发，制作上下动态的箭头动画

 

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>箭头</title>
<style>
/* 包裹箭头效果的盒子 */
    .arrowTransform {
      animation: bounce-inSS 2s infinite; /* 启动动画特效 */
  width: 300px;
  height: 300px;
  
  margin: 0 auto;
  margin-top: 90px;
    }
    /* 箭头效果的盒子 */
    .arrowTransform_style {
      display: block;
  margin: 0 auto;
      width: 200px;
      height: 200px;
      border-right:3px solid ;
      border-top:3px solid ;
      -webkit-transform:rotate(135deg); /* 箭头方向可以自由切换角度 */
      transform:rotate(135deg);
      cursor:pointer;
    }
.arrowTransform-title{
  text-align: center;
    font-size: 40PX
}
    /* 箭头动画 */
    @keyframes bounce-inSS {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      40% {
        transform: translateY(-30px);
      }
      60% {
        transform: translateY(-15px);
      }
    }
</style>
</head>
<body>
        <!-- 底部跳转 -->
<div class="arrowTransform">
<div class="arrowTransform-title">点我？</div>
    <a class="arrowTransform_style"></a>
</div>
</body>
</html>

​以上就是 短视频开发，制作上下动态的箭头动画，更多内容欢迎关注之后的文章

 

posted @ 2022-04-29 14:29  云豹科技-苏凌霄  阅读(252)  评论(0)    收藏  举报