【个人博客网站】博客美化（十）：彩色图标以及浮动特效

本文最后更新于 almost 2 years ago，文中所描述的信息可能已发生改变。

TIP提示

参考了安知鱼的方案进行修改原教程butterfly 重装日记

TIP提示

参考了店长的方案进行修改原教程菜单栏多色图标配置教程原教程Social卡片彩色图标引入

自定义样式

在css样式文件中，加入

css

.wowpanels {
  transition: all .4s cubic-bezier(.39,.575,.565,1);
}

floatpanel.js

创建source/js/floatpanel.js文件

// 新增的内容
var arr = document.getElementsByClassName('element-class');
//把element-class替换成你想要添加特效的元素的类名
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wowpanels');
  }
// 原来的内容
var ANGLE = 45; //控制浮动角度，数值越大，浮动幅度越大。
var panel= document.getElementsByClassName('wowpanels');
for(var i = 0;i<panel.length;i++){
  floatable(panel[i]);
  }
function floatable (content) {
  content.addEventListener('mouseout', e => {
    content.style.transform = `perspective(300px)
                   rotateX(0deg)
                   rotateY(0deg)
                   rotateZ(0deg)`;
  });
  content.addEventListener('mousemove', e => {
    var w = content.clientWidth;
    var h = content.clientHeight;
    var y = (e.offsetX - w * 0.5) / w * ANGLE;
    var x = (1 - (e.offsetY - h * 0.5)) / h * ANGLE;

    content.style.transform = `perspective(300px)
                   rotateX(${x}deg)
                   rotateY(${y}deg)`;
  });
}

var ANGLE = 45; //控制浮动角度，数值越大，浮动幅度越大。

var panel= document.getElementsByClassName('wowpanels');
for(var i = 0;i<panel.length;i++){
  floatable(panel[i]);
}
function floatable (content) {
  content.addEventListener('mouseout', e => {
    content.style.transform = `perspective(300px)
                   rotateX(0deg)
                   rotateY(0deg)
                   rotateZ(0deg)`;
  });
  content.addEventListener('mousemove', e => {
    var w = content.clientWidth;
    var h = content.clientHeight;
    var y = (e.offsetX - w * 0.5) / w * ANGLE;
    var x = (1 - (e.offsetY - h * 0.5)) / h * ANGLE;

    content.style.transform = `perspective(300px)
                    rotateX(${x}deg)
                    rotateY(${y}deg)`;
  });
}

引入js文件

yaml

inject:
  bottom:
    - <script async data-pjax src="/js/floatpanel.js"></script>

替换

全部内容修改[Blogroot]\themes\butterfly\layout\includes\header\menu_item.pug,本方案默认使用观感最佳的悬停父元素触发子元素动画效果。默认动画为faa-tada。

pug

if theme.menu
  - let sidebarChildHide = theme.hide_sidebar_menu_child ? 'hide' : ''

  .menus_items
    each value, label in theme.menu
      if typeof value !== 'object'
        .menus_item
          - const valueArray = value.split('||')
          a.site-page.faa-parent.animated-hover(href=url_for(trim(valueArray[0])))
            if valueArray[1]
              - var icon_value = trim(valueArray[1])
              - var anima_value = valueArray[2] ? trim(valueArray[2]) : 'faa-tada'
              if icon_value.substring(0,2)=="fa"      
                i.fa-fw(class=icon_value + ' ' + anima_value)
              else if icon_value.substring(0,4)=="icon"          
                svg.icon(aria-hidden="true" class=anima_value)
                  use(xlink:href=`#`+ icon_value)
            span=' '+label
      else
        .menus_item
          - const labelArray = label.split('||')
          - const hideClass = labelArray[2] && trim(labelArray[2]) === 'hide' ? 'hide' : ''
          a.site-page.group.faa-parent.animated-hover(class=`${hideClass}` href='javascript:void(0);')
            if labelArray[1]
              - var icon_label = trim(labelArray[1])
              - var anima_label = labelArray[2] ? trim(labelArray[2]) : 'faa-tada'
              if icon_label.substring(0,2)=="fa"      
                i.fa-fw(class=icon_label + ' ' + anima_label)
              else if icon_label.substring(0,4)=="icon"    
                svg.icon(aria-hidden="true" class=anima_label)
                  use(xlink:href=`#`+ icon_label)
            span=' '+ trim(labelArray[0])
            i.fas.fa-chevron-down.expand(class=sidebarChildHide)
          ul.menus_item_child
            each val,lab in value 
              - const valArray = val.split('||')
              li
                a.site-page.child.faa-parent.animated-hover(href=url_for(trim(valArray[0])))
                  if valArray[1]
                    - var icon_val = trim(valArray[1])
                    - var anima_val = valArray[2] ? trim(valArray[2]) : 'faa-tada'
                    if icon_val.substring(0,2)=="fa"      
                      i.fa-fw(class=icon_val + ' ' + anima_val)
                    else if icon_val.substring(0,4)=="icon"
                      svg.icon(aria-hidden="true" class=anima_val)
                        use(xlink:href=`#`+ icon_val)
                  span=' '+ lab

重写[Blogroot]\themes\butterfly\layout\includes\header\social.pug,替换为以下代码：

pug

each value, title in theme.social
  a.social-icon.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0])) target="_blank" title=title === undefined ? '' : trim(title))
    if value.split('||')[1]
      - var icon_value = trim(value.split('||')[1])
      - var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada'
      if icon_value.substring(0,2)=="fa"      
        i.fa-fw(class=icon_value + ' ' + anima_value)
      else if icon_value.substring(0,4)=="icon"          
        svg.icon(aria-hidden="true" class=anima_value)
          use(xlink:href=`#`+ icon_value)

自定义样式 ​

floatpanel.js ​

替换 ​

menu_item.pug ​

social.pug ​

自定义样式

floatpanel.js

替换

menu_item.pug

social.pug