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