css实现箭头上下跳动动画

最新推荐文章于 2024-06-17 10:41:41 发布

代码De搬运工

最新推荐文章于 2024-06-17 10:41:41 发布

阅读量2.1k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_46577631/article/details/122713694

版权

笔记专栏收录该内容

41 篇文章 2 订阅

订阅专栏

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>箭头</title>
<style>
/* 包裹箭头效果的盒子 */
    .arrowTransform {
      animation: bounce-inSS 2s infinite; /* 启动动画特效 */
	  width: 90px;
	  height: 50px;
	  background-color: antiquewhite;
	  margin: 0 auto;
	  margin-top: 90px;
    }
    /* 箭头效果的盒子 */
    .arrowTransform_style {
      display: block;
	  margin: 0 auto;
      width: 20px;
      height: 20px;
      border-right:3px solid ;
      border-top:3px solid ;
      -webkit-transform:rotate(135deg); /* 箭头方向可以自由切换角度 */
      transform:rotate(135deg);
      cursor:pointer;
    }
	.arrowTransform-title{
	  text-align: center;
	}
    /* 箭头动画 */
    @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>

代码De搬运工

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
css实现箭头上下跳动动画

<!doctype html><html><head><meta charset="utf-8"><title>箭头</title><style>/* 包裹箭头效果的盒子 */ .arrowTransform { animation: bounce-inSS 2s infinite; /* 启动动画特效 */ width: 90px; height: 50px; backg.
复制链接

扫一扫