Hexo-Fluid主题自定义美化记录🌈

最后更新于:2020 九月 21日 , 星期一 , 00:02 凌晨

文章封面触摸过渡动画

几天前看到Royce2003的面向小白的用css美化网站教程[1],包含添加阴影、圆角及过渡动画,如下图:

但我想要的只是给文章封面添加触摸变大过渡动画。

先用万能的右键检查定位到自己需要改动的地方:

大概就是这个 .index_img 了,具体如何实现呢?

百度一下找到这篇教程

css过渡动画,鼠标移上去就变大(缓慢变大、过渡效果、放大的过程是过渡动画的,这个过渡动画是有时间控制的)

1).CSS3的transform:scale()可以实现按比例放大或者缩小功能。

2).CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

3).transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。

4)transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
  width: 300px;
  height: 300px;
  border: #000 solid 1px;
  margin: 50px auto;
  overflow: hidden;
}
div img{
  cursor: pointer;
  transition: all 0.6s;
}
div img:hover{
  transform: scale(1.4);
}
</style>
</head>
<body>
  <div>
    <img src="img/focus.png" />
  </div>
</body>
</html>

有些傻眼,方向大概对了但格式不是我想要的🤪

再查查现在用的Fluid主题配置说明

自定义 JS / CSS / HTML

如果你想引入外部的 JS、CSS(比如 IconFont)或 HTML,可以通过以下主题配置,具体见注释:

# 指定自定义 js 文件路径,路径是相对 source 目录
custom_js: /js/custom.js

# 指定自定义 css 文件路径,路径是相对 source 目录
custom_css: /css/custom.css

似乎还是麻烦了点🤔

💡Fluid主题的css配置文件夹里肯定有相关内容,找出来直接往后补充就是了,不行就Crtl+Z撤回

对齐img的下一级内容修改后

.index-img
  img
    display block
    width 100%
    height 10rem
    object-fit cover
    box-shadow 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
    border-radius .25rem
    cursor: pointer
    transition: all 0.6s
    &:hover
      transform: scale(1.1)
      box-shadow:0px 0px 16px rgba(23,106,196,0.6)

保存刷新页面看看,成功了!
速度和大小都合适。


APlayer自动靠边收拢

aplayer自带的fixed和mini模式在本站的显示效果一直很糟糕,碍眼,减低观赏性,还影响正文阅读,平时只能关闭它。

手机截图

直至遇到这篇教程:  
hexo集成Aplayer实现全局播放器吸底模式  [2]

可恕吾愚钝,一直学不会引入自定义css😶
image.png

来自群友的指导💡
image.png
操作

  • 直接修改main.styl,填入以下代码
//aplayer自动收起
.aplayer.aplayer-fixed.aplayer-narrow 
  .aplayer-body
    left: -66px !important
  .aplayer-body:hover
    left: 0px !important

image.png

  • 保存
  • 刷新本地页面查看效果

嗯又多了个不想更新主题的借口🙊


用到的工具:


便签note边缘发光

示例1

示例2

示例3

方法:老规矩直接加进main.styl

//便签边缘发光
.note-primary
   cursor: pointer
   transition: all 0.5s
   &:hover
     transform: scale(1.0) translate(0px,-2px) 
     box-shadow:6px 6px 16px rgba(23,106,196,0.4)
     border-radius: 0.25rem

.note-secondary
   cursor: pointer
   transition: all 0.5s
   &:hover
     transform: scale(1.0) translate(0px,-2px) 
     box-shadow:6px 6px 16px rgba(88,89,90,0.4)
     border-radius: 0.25rem

.note-success
   cursor: pointer
   transition: all 0.5s
   &:hover
     transform: scale(1.0) translate(0px,-2px) 
     box-shadow:6px 6px 16px rgba(73,167,95,0.4)
     border-radius: 0.25rem

.note-danger
   cursor: pointer
   transition: all 0.5s
   &:hover
     transform: scale(1.0) translate(0px,-2px) 
     box-shadow:6px 6px 16px rgba(228,84,96,0.4)
     border-radius: 0.25rem

.note-warning
   cursor: pointer
   transition: all 0.5s
   &:hover
     transform: scale(1.0) translate(0px,-2px) 
     box-shadow:6px 6px 16px rgba(194,164,66,0.4)
     border-radius: 0.25rem

.note-info
   cursor: pointer
   transition: all 0.5s
   &:hover
     transform: scale(1.0) translate(0px,-2px) 
     box-shadow:6px 6px 16px rgba(36,146,165,0.4)
     border-radius: 0.25rem

.note-light
   cursor: pointer
   transition: all 0.5s
   &:hover
     transform: scale(1.0) translate(0px,-2px) 
     box-shadow:6px 6px 16px rgba(15,15,15,0.4)
     border-radius: 0.25rem

有个点击抖动的小bug,不管它,凑合用吧。

为博客添加赞赏码

见这篇:hexo博客添加赞赏功能
空白有点难受,将就用。


其它

//插入图片鼠标悬浮发光
.markdown-body p > img, .markdown-body p > a > img
   cursor: pointer
   transition: all 0.5s
   &:hover
     transform: scale(1.0) translate(0px,0px) 
     box-shadow:0 0 18px rgba(228,84,96,0.4) !important
     border-radius: 0.25rem

//侧栏目录悬浮变色
.tocbot-link
   cursor: pointer
   transition: all 0.5s
   &:hover
     color: rgb(228,84,96)

//友链页卡片动画
.card-body
   cursor: pointer
   transition: all 0.5s
   &:hover
     transform: scale(1.0) translate(0px,-5px) 
     box-shadow:0 0 16px rgba(228,84,96,0.4) !important
     background-color: #ffffff 
//头像发光
.link-avatar img
   cursor: pointer
   transition: all 0.4s
   &:hover
     transform: scale(1.02) rotate(-10deg) translate(0px,-0px)  
     box-shadow:0 2px 6px 1px rgba(36,146,165,0.4) !important


//归档列表动画
.list-group-item
   cursor: pointer
   transition: all 0.5s
   &:hover
     transform: scale(1.0) translate(0px,-2px) 

//标签云文字动画
.tagcloud a
   cursor: pointer
   transition: all 0.5s
   &:hover
     transform: scale(1.0) translate(0px,-2px) 

//右上角三线菜单图标缩小
.animated-icon
   transform: scale(0.85)

//Artitalk对话框光晕
.cbp_tmtimeline>li .cbp_tmlabel
   cursor: pointer
   transition: all 0.5s
   &:hover
     transform: scale(1.0) translate(0px,-2px) 
     box-shadow:6px 8px 16px rgba(194,164,66,0.4) !important
     border-radius: 0.25rem
//Artitalk头像光晕
.shuoshuo_author_img img
   cursor: pointer
   transition: all 0.1s
   &:hover
     transform: scale(1.0) rotate(0deg) translate(0px,-2px) !important
     box-shadow:0 2px 6px 1px rgba(36,146,165,0.4) !important

一个小火箭🚀动画

可用于点击跳转链接或者页面回顶

css部分[3]

//火箭🚀动画
*{margin:0;padding:0;list-style: none;}
#animation {
	animation: flight 9s ease-in-out 0s infinite alternate none;
	-webkit-animation: flight 9s ease-in-out 0s infinite alternate none;
	width: 50%
}
.spaceship {
	position: fixed;
	-webkit-transform: scale(0.76) rotate(45deg);
	-moz-transform: scale(0.76) rotate(45deg);
	-ms-transform: scale(0.76) rotate(45deg);
	-o-transform: scale(0.76) rotate(45deg);
	transform: scale(0.2) rotate(45deg);
	top: 0%;
	left: 20%
}
.spaceship .body {
	width: 300px;
	height: 300px;
	margin-top: -150px;
	margin-left: -150px;
	border-radius: 300px;
	position: absolute;
	box-shadow: -33px -33px 0 rgba(228, 230, 234, .6) inset;
	background-color: rgba(235, 236, 240, 1);
	-webkit-transform: scale(0.46, 1);
	-moz-transform: scale(0.46, 1);
	-ms-transform: scale(0.46, 1);
	-o-transform: scale(0.46, 1);
	transform: scale(0.46, 1);
	overflow: hidden
}
.spaceship .body:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 285px;
	background-color: rgba(255, 153, 145, 1);
	border-radius: 300px;
	-webkit-transform: scale(0.9, .46);
	-moz-transform: scale(0.9, .46);
	-ms-transform: scale(0.9, .46);
	-o-transform: scale(0.9, .46);
	transform: scale(0.9, .46);
	margin-top: -180px
}
.spaceship .window {
	width: 40px;
	height: 40px;
	margin-top: -40px;
	margin-left: -26px;
	border: 6px solid rgba(215, 216, 220, 1);
	background-color: rgba(245, 246, 255, 1);
	overflow: hidden;
	position: absolute;
	border-radius: 40px
}
.spaceship .window:before, .spaceship .window:after {
	width: 5px;
	height: 60px;
	position: absolute;
	content: "";
	margin-left: 16px;
	margin-top: -5px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	background-color: #fff;
	opacity: .5
}
.spaceship .window:before {
	margin-top: 10px
}
.spaceship .fins {
	position: absolute;
	margin-top: -60px;
	z-index: -1
}
.spaceship .fins:before, .spaceship .fins:after {
	content: "";
	position: absolute;
	border-color: rgba(255, 153, 145, 1);
	height: 30px;
	border-top: 140px solid transparent;
	border-bottom: 20px solid transparent
}
.spaceship .fins:before {
	border-right: 100px solid rgba(255, 153, 145, 1);
	margin-left: -100px
}
.spaceship .fins:after {
	border-left: 100px solid rgba(255, 153, 145, 1)
}
.spaceship .antenna {
	position: absolute;
	background-color: rgba(235, 236, 240, 1);
	margin-top: -200px;
	margin-left: -2px;
	top: 50%;
	left: 50%;
	width: 4px;
	height: 60px
}
.spaceship .antenna:before {
	width: 16px;
	height: 16px;
	content: "";
	background-color: rgba(235, 236, 240, 1);
	box-shadow: -3px -3px 0 rgba(225, 226, 230, 1) inset;
	position: absolute;
	border-radius: 16px;
	margin-top: -8px;
	margin-left: -6px
}
.spaceship .rocket {
	width: 60px;
	height: 10px;
	position: absolute;
	border-top: 30px solid rgba(130, 134, 138, 1);
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	margin-top: 120px;
	margin-left: -40px
}
.spaceship .rocket:before {
	background-color: rgba(130, 134, 138, 1);
	margin-top: -70px;
	margin-left: -10px;
	position: absolute;
	content: "";
	border-radius: 80px;
	-webkit-transform: scale(1, .25);
	-moz-transform: scale(1, .25);
	-ms-transform: scale(1, .25);
	-o-transform: scale(1, .25);
	transform: scale(1, .25);
	width: 80px;
	height: 80px
}
.spaceship .rocket:after {
	background-color: rgba(120, 124, 128, 1);
	margin-top: -30px;
	position: absolute;
	content: "";
	border-radius: 80px;
	-webkit-transform: scale(1, .15);
	-moz-transform: scale(1, .15);
	-ms-transform: scale(1, .15);
	-o-transform: scale(1, .15);
	transform: scale(1, .15);
	width: 60px;
	height: 60px
}
.spaceship .fireWrapper {
	position: absolute;
	overflow: hidden;
	border-radius: 60px;
	width: 60px;
	height: 500px;
	margin-top: -66px;
	margin-left: -30px;
	z-index: 100;
	-webkit-transform: scale(1, .15);
	-moz-transform: scale(1, .15);
	-ms-transform: scale(1, .15);
	-o-transform: scale(1, .15);
	transform: scale(1, .15)
}
.fire {
	position: absolute;
	margin-top: 140px;
	width: 60px;
	height: 60px;
	opacity: .9;
	-webkit-transform: scale(1, 6.67);
	-moz-transform: scale(1, 6.67);
	-ms-transform: scale(1, 6.67);
	-o-transform: scale(1, 6.67);
	transform: scale(1, 6.67)
}
.fire div {
	position: absolute;
	-webkit-transform-origin: top center;
	transform-origin: top center;
	border-top: 30px solid rgba(255, 0, 0, 1);
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	opacity: 0
}
.fire div:nth-of-type(1) {
	animation: fire .35s linear 0s infinite alternate none;
	-webkit-animation: fire .35s linear 0s infinite alternate none;
	opacity: .8;
	margin-left: 5px;
	border-top-color: rgba(255, 190, 100, 1);
	border-top-width: 50px;
	z-index: -1
}
.fire div:nth-of-type(2) {
	animation: fire .38s linear -.5s infinite alternate none;
	-webkit-animation: fire .38s linear -.5s infinite alternate none;
	opacity: .8;
	margin-left: 16px;
	border-top-color: rgba(255, 140, 100, 1);
	border-top-width: 40px;
	z-index: 0
}
.fire div:nth-of-type(3) {
	animation: fire .4s linear -1s infinite alternate none;
	-webkit-animation: fire .4s linear -1s infinite alternate none;
	opacity: .8;
	margin-left: -6px;
	border-top-color: rgba(255, 160, 100, 1);
	border-top-width: 30px;
	z-index: 1
}
.fire div:nth-of-type(4) {
	animation: fire .55s linear -1.2s infinite alternate none;
	-webkit-animation: fire .55s linear -1.2s infinite alternate none;
	opacity: .8;
	margin-left: 9px;
	border-left-width: 20px;
	border-right-width: 20px;
	border-top-color: rgba(255, 200, 100, 1);
	border-top-width: 50px;
	z-index: -1
}
.fire div:nth-of-type(5) {
	animation: fire .25s linear -1.2s infinite alternate none;
	-webkit-animation: fire .25s linear -1.2s infinite alternate none;
	opacity: .8;
	margin-left: 14px;
	border-left-width: 25px;
	border-right-width: 25px;
	border-top-color: rgba(255, 220, 100, 1);
	border-top-width: 35px;
	z-index: 2
}
.fire div:nth-of-type(6) {
	animation: fire .25s linear -1.2s infinite alternate none;
	-webkit-animation: fire .25s linear -1.2s infinite alternate none;
	opacity: .8;
	margin-left: -6px;
	border-left-width: 25px;
	border-right-width: 25px;
	border-top-color: rgba(255, 230, 110, 1);
	border-top-width: 35px;
	z-index: 2
}
@keyframes fire {
	100% {
		-webkit-transform: skew(30deg);
		-moz-transform: skew(30deg);
		-ms-transform: skew(30deg);
		-o-transform: skew(30deg)
	}
	74% {
		-webkit-transform: skew(-15deg);
		-moz-transform: skew(-15deg);
		-ms-transform: skew(-15deg);
		-o-transform: skew(-15deg);
		transform: skew(-15deg)
	}
	58% {
		-webkit-transform: skew(10deg);
		-moz-transform: skew(10deg);
		-ms-transform: skew(10deg);
		-o-transform: skew(10deg);
		transform: skew(10deg)
	}
	30% {
		-webkit-transform: skew(-35deg);
		-moz-transform: skew(-35deg);
		-ms-transform: skew(-35deg);
		-o-transform: skew(-35deg);
		transform: skew(-35deg)
	}
	0% {
		-webkit-transform: skew(25deg);
		-moz-transform: skew(25deg);
		-ms-transform: skew(25deg);
		-o-transform: skew(25deg);
		transform: skew(25deg)
	}
}
@-webkit-keyframes fire {
	100% {
		-webkit-transform: skew(30deg);
		-moz-transform: skew(30deg);
		-ms-transform: skew(30deg);
		-o-transform: skew(30deg)
	}
	74% {
		-webkit-transform: skew(-15deg);
		-moz-transform: skew(-15deg);
		-ms-transform: skew(-15deg);
		-o-transform: skew(-15deg);
		transform: skew(-15deg)
	}
	58% {
		-webkit-transform: skew(10deg);
		-moz-transform: skew(10deg);
		-ms-transform: skew(10deg);
		-o-transform: skew(10deg);
		transform: skew(10deg)
	}
	30% {
		-webkit-transform: skew(-35deg);
		-moz-transform: skew(-35deg);
		-ms-transform: skew(-35deg);
		-o-transform: skew(-35deg);
		transform: skew(-35deg)
	}
	0% {
		-webkit-transform: skew(25deg);
		-moz-transform: skew(25deg);
		-ms-transform: skew(25deg);
		-o-transform: skew(25deg);
		transform: skew(25deg)
	}
}
@keyframes flight {
	100% {
		-webkit-transform: translate(40px, 60px) rotate(-4deg);
		-moz-transform: translate(40px, 60px);
		-ms-transform: translate(40px, 60px);
		-o-transform: translate(40px, 60px);
		transform: translate(40px, 60px)
	}
	66% {
		-webkit-transform: translate(-30px, -50px) rotate(5deg);
		-moz-transform: translate(-30px, -50px) rotate(5deg);
		-ms-transform: translate(-30px, -50px) rotate(5deg);
		-o-transform: translate(-30px, -50px) rotate(5deg);
		transform: translate(-30px, -50px) rotate(5deg)
	}
	36% {
		-webkit-transform: translate(50px, 40px) rotate(-6deg);
		-moz-transform: translate(50px, 40px) rotate(-6deg);
		-ms-transform: translate(50px, 40px) rotate(-6deg);
		-o-transform: translate(50px, 40px) rotate(-6deg);
		transform: translate(50px, 40px) rotate(-6deg)
	}
	0% {
		-webkit-transform: translate(-40px, -30px) rotate(5deg);
		-moz-transform: translate(-40px, -30px) rotate(5deg);
		-ms-transform: translate(-40px, -30px) rotate(5deg);
		-o-transform: translate(-40px, -30px) rotate(5deg);
		transform: translate(-40px, -30px) rotate(5deg)
	}
}
@-webkit-keyframes flight {
	100% {
		-webkit-transform: translate(40px, 60px) rotate(-4deg);
		-moz-transform: translate(40px, 60px);
		-ms-transform: translate(40px, 60px);
		-o-transform: translate(40px, 60px);
		transform: translate(40px, 60px)
	}
	66% {
		-webkit-transform: translate(-30px, -50px) rotate(5deg);
		-moz-transform: translate(-30px, -50px) rotate(5deg);
		-ms-transform: translate(-30px, -50px) rotate(5deg);
		-o-transform: translate(-30px, -50px) rotate(5deg);
		transform: translate(-30px, -50px) rotate(5deg)
	}
	36% {
		-webkit-transform: translate(50px, 40px) rotate(-6deg);
		-moz-transform: translate(50px, 40px) rotate(-6deg);
		-ms-transform: translate(50px, 40px) rotate(-6deg);
		-o-transform: translate(50px, 40px) rotate(-6deg);
		transform: translate(50px, 40px) rotate(-6deg)
	}
	0% {
		-webkit-transform: translate(-40px, -30px) rotate(5deg);
		-moz-transform: translate(-40px, -30px) rotate(5deg);
		-ms-transform: translate(-40px, -30px) rotate(5deg);
		-o-transform: translate(-40px, -30px) rotate(5deg);
		transform: translate(-40px, -30px) rotate(5deg)
	}
}
//火箭🚀动画结束

找个合适的.ejs文件加入以下代码

   <!-- 火箭🚀动画代码部分begin -->
   <div id="animation">
    <a href="https://travellings.now.sh/" title="开往下一站~">
        <div class="spaceship">
            <div class="antenna"></div>
            <div class="body"></div>
            <div class="window"></div>
            <div class="fins"></div>
            <div class="rocket"></div>
            <div class="fireWrapper">
                <div class="fire">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </a>
</div>

参考


本站所有文章除特别声明外,均采用 CC BY-SA-NC 4.0 协议 。转载请注明原作者及出处!

 目录

既见君子 云胡不喜