0
点赞
收藏
分享

微信扫一扫

css动画让箭头上下跳动

椰果玩安卓 2022-02-10 阅读 60

使用css让箭头上下跳动

    <!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>




举报

相关推荐

0 条评论