Permalink
Browse files

refactor(avatar): loading animation 头像加载动画优化

Increase loading speed and enhance compatibility
  • Loading branch information...
MOxFIVE committed Feb 27, 2016
1 parent dd1c3a8 commit d9310b538aeef1a906ef12cc9cdf192e1e592ee6
Showing with 8 additions and 22 deletions.
  1. +1 −6 layout/_partial/left-col.ejs
  2. +1 −5 layout/_partial/mobile-nav.ejs
  3. +6 −11 source/css/_partial/main.styl
@@ -2,13 +2,8 @@
<div class="intrude-less">
<header id="header" class="inner">
<a href="/" class="profilepic">
<% if (theme.animate){ %>
<img lazy-src="<%=theme.avatar%>" class="js-avatar">
<%}else{%>
<img src="<%=theme.avatar%>" class="js-avatar" style="width: 100%;height: 100%;opacity: 1;">
<%}%>
<img src="<%=theme.avatar%>" class="animated zoomIn">
</a>
<hgroup>
<h1 class="header-author"><a href="/"><%=theme.author%></a></h1>
</hgroup>
@@ -6,11 +6,7 @@
<div class="intrude-less">
<header id="header" class="inner">
<a href="/" class="profilepic">
<% if (theme.animate){ %>
<img lazy-src="<%=theme.avatar%>" class="js-avatar">
<% } else { %>
<img src="<%=theme.avatar%>" class="js-avatar" style="width: 100%; height: 100%; opacity: 1;">
<% } %>
<img src="<%=theme.avatar%>" class="animated zoomIn">
</a>
<hgroup>
<h1 class="header-author"><a href="/" title="回到主页"><%=theme.author%></a></h1>
@@ -101,23 +101,18 @@
position: relative;
overflow: hidden;
background: #88acdb;
-webkit-transition: all 0.2s ease-in;
//display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
text-align: center;
img{
width: 20%;
height: 20%;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.2s ease-in;
&.show{
width: 100%;
height: 100%;
opacity: 1;
}
animation-duration: .4s;
animation-delay: .3s;
-webkit-animation-duration: .4s;
-webkit-animation-delay: .3s;
}
&:hover {
background: white;

0 comments on commit d9310b5

Please sign in to comment.