效果一览
起因
早就想换个好看的footer了,苦于没有好的idea,今日无聊在codepen上闲逛,发现一个好看的footer,链接在这里
原来的效果是这样的,我稍加修改了一下
教程
tips: 本教程适用于hexo的butterfly主题4.7.0版本,不同版本请适当修改
修改pug文件
打开位于 butterfly\layout\includes\footer.pug文件,清空里面所有内容(请自己保存原内容),然后粘贴下面的代码
#footer-wrap
div.footer
div.bubbles
- for (var i = 0; i < 128; i++)
div.bubble(style=`--size:${2+Math.random()*4}rem; --distance:${6+Math.random()*4}rem; --position:${-5+Math.random()*110}%; --time:${2+Math.random()*2}s; --delay:${-1*(2+Math.random()*2)}s;`)
div.content
if theme.footer.copyright
.framework-info
span= _p('footer.framework') + ' '
a(href='https://hexo.io')= 'Hexo'
span.footer-separator |
span= _p('footer.theme') + ' '
a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
if theme.footer.custom_text
.footer_custom_text!=`${theme.footer.custom_text}`
修改fotter.styl文件
打开位于butterfly\source\css_layout\footer.styl文件,清空里面所有内容(请自己保存原内容),然后粘贴下面的代码
#footer
position: relative
background-color: $light-blue
background-attachment: scroll
background-position: bottom
background-size: cover
background: transparent
if hexo-config('footer_bg') != false
&:before
position: absolute
width: 100%
height: 100%
background-color: alpha($dark-black, .5)
content: ''
#footer-wrap {
display: grid
grid-template-rows: 1fr 10rem auto
grid-template-areas: "main" "." "footer"
overflow-x: hidden
background: transparent
font-family: 'Open Sans', sans-serif
.footer {
z-index: 1
--footer-background: #ed5565
display: grid
position: relative
grid-area: footer
min-height: 12rem
.bubbles {
position: absolute
top: 0
left: 0
right: 0
height: 1rem
background: var(--footer-background)
filter: url("#blob")
.bubble {
position: absolute
left: var(--position, 50%)
background: var(--footer-background)
border-radius: 100%
animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s)
transform: translate(-50%, 100%)
}
}
.content {
z-index: 2
display: flex
flex-direction: column
padding: 2rem
background: var(--footer-background)
text-align: center
color: white
a,
p {
color: #F5F7FA
text-decoration: none
}
b {
color: white
}
p {
margin: 0
font-size: .75rem
}
}
}
}
@keyframes bubble-size {
0%, 75% {
width: var(--size, 4rem)
height: var(--size, 4rem)
}
100% {
width: 0rem
height: 0rem
}
}
@keyframes bubble-move {
0% {
bottom: -4rem
}
100% {
bottom: var(--distance, 10rem)
}
}
tips:有任何问题在评论区留言哦~
评论