1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > css实现箭头上下跳动动画

css实现箭头上下跳动动画

时间:2018-10-11 15:24:38

相关推荐

css实现箭头上下跳动动画

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。