带动画的登陆按钮
<div class="logon">
<a href="#" style="text-decoration:none ">Sign In</a>
</div>
.logon a{
display: inline-block;
text-align: center;
background-color: #9acfea;
width: 150px;
height: 40px;
line-height: 40px;
border-radius:5px;
font-size: 18px;
-webkit-animation:myfirst 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
position: relative;
}
.logon a:after{
content: '»';
position: absolute;
right: 20px;
opacity: 0;
transition: 0.5s;
}
@-webkit-keyframes myfirst
{
from {background: #5bdcff;}
to {background: #e974de;}
}
.logon:hover a:after{
opacity: 1;
right: 35px;
transition: 0.5s;
}
效果图：
sign.gif
可旋转的星星
<head>
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<div class="star">
<a href="#" style="text-decoration: none">
<i class="fa fa-star" aria-hidden="true"></i>
</a>
</div>
.star{
height: 100px;
line-height: 100px;
text-align: center;
}
.star a{
color: #5bc0de;
display: block;
font-size: 70px;
transition:-webkit-transform 2s ;
}
.star a:hover{
-webkit-transform: rotate(360deg);
color: #5bc0de;
}
效果图：
star.gif
网友评论