帶動畫的登陸按鈕
<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 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
