比尔盖子博客Logo动画效果

div+css

扒的比尔盖子博客的logo效果。

logo动画

首先查看示例

html部分

<div>
<a class="logo" href="https://pdbn.top"><img src="https://pdbn.top/wp-content/themes/822/img/favicon.jpg"></a>
</div>

css部分

.logo {
background: #FFF url(https://pdbn.top/uploads/2016/03/home.png) no-repeat center;
width: 148px;
border: 5px solid #FFF;
}

.logo img, .logo {
border-radius: 50%;
display: block;
margin: 0 auto;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.logo:hover { background-color: #2D3642; }
.logo:hover img { opacity: 0; }