update avatar bg

This commit is contained in:
xaoxuu 2021-06-24 18:53:52 +08:00
parent 1c466465de
commit 8a8cb14f22
2 changed files with 8 additions and 4 deletions

View File

@ -2,7 +2,7 @@
<% if (md_text(theme.sidebar.logo.avatar)) { %> <% if (md_text(theme.sidebar.logo.avatar)) { %>
<a class='avatar' href='<%- url_for(md_link(theme.sidebar.logo.avatar) || "/") %>'> <a class='avatar' href='<%- url_for(md_link(theme.sidebar.logo.avatar) || "/") %>'>
<% if (theme.style.animated_avatar.animate) { %> <% if (theme.style.animated_avatar.animate) { %>
<img no-lazy class='bg' style='opacity:0' src='<%- theme.style.animated_avatar.background %>'/> <div class='bg' style='opacity:0;background-image:url("<%- theme.style.animated_avatar.background %>");'></div>
<% } %> <% } %>
<img no-lazy class='avatar' src='<%- md_text(theme.sidebar.logo.avatar) %>'/> <img no-lazy class='avatar' src='<%- md_text(theme.sidebar.logo.avatar) %>'/>
</a> </a>

View File

@ -26,6 +26,10 @@
border-radius: 50px border-radius: 50px
overflow: hidden overflow: hidden
margin-right: 1rem margin-right: 1rem
div.bg
width: 100%
height: 100%
background-size: cover
img.avatar img.avatar
margin: 2px margin: 2px
object-fit: cover object-fit: cover
@ -33,7 +37,7 @@
height: "calc(100% - 2 * %s)" % @margin height: "calc(100% - 2 * %s)" % @margin
border-radius: @width border-radius: @width
if hexo-config('style.animated_avatar.animate') if hexo-config('style.animated_avatar.animate')
img.bg div.bg
trans1: opacity trans1: opacity
position: absolute position: absolute
opacity: 0 !important opacity: 0 !important
@ -44,13 +48,13 @@
to to
transform:rotate(360deg) transform:rotate(360deg)
if hexo-config('style.animated_avatar.animate') == 'always' if hexo-config('style.animated_avatar.animate') == 'always'
img.bg div.bg
opacity: 1 !important opacity: 1 !important
animation: spin infinite 1s animation: spin infinite 1s
animation-timing-function: linear animation-timing-function: linear
if hexo-config('style.animated_avatar.animate') == 'auto' if hexo-config('style.animated_avatar.animate') == 'auto'
&:hover &:hover
img.bg div.bg
opacity: 1 !important opacity: 1 !important
animation: spin infinite 1s animation: spin infinite 1s
animation-timing-function: linear animation-timing-function: linear