短視訊開發，製作上下動態的箭頭動畫

zhibo系統開發發表於2022-04-29
原文網址 : http://blog.itpub.net/69978258/viewspace-2889416/
動畫

短視訊開發，製作上下動態的箭頭動畫

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>箭頭</title>
<style>
/* 包裹箭頭效果的盒子 */
    .arrowTransform {
      animation: bounce-inSS 2s infinite; /* 啟動動畫特效 */
  width: 300px;
  height: 300px;
  background-color: greenyellow;
  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>

以上就是 短視訊開發，製作上下動態的箭頭動畫，更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69978258/viewspace-2889416/，如需轉載，請註明出處，否則將追究法律責任。

相關文章