简单的向下滑动按钮提示效果CSS如何实现?

已邀请:

zkbhj - 凯冰科技站长

赞同来自:

<style>
.demo a {
position: relative;
top: 50px;
left: 48%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
color: red;
}
.demo a:hover {
opacity: .5;
}
#pulldown{
float: left;
height: 100px;
width: 100%;
margin: 50px 0px 120px;
}
#pulldown a {
padding-top: 80px;
}
#pulldown a span {
position: absolute;
top: 0;
left: 48%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid red;
border-bottom: 1px solid red;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb07 2s infinite;
animation: sdb07 2s infinite;
opacity: 0;
box-sizing: border-box;
}
#pulldown a span:nth-of-type(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#pulldown a span:nth-of-type(2) {
top: 16px;
-webkit-animation-delay: .15s;
animation-delay: .15s;
}
#pulldown a span:nth-of-type(3) {
top: 32px;
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
@-webkit-keyframes sdb07 {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes sdb07 {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
 
<div id="pulldown" class="demo">
<a href="#10years"><span></span><span></span><span></span>向下开启</a>
</div>

要回复问题请先登录注册