Skip to content

基于vuepress-theme-reco搭建的个人博客,集成了彩带特效,看板娘,公告,评论,悬浮气泡,鼠标特效,音乐播放器等

License

Notifications You must be signed in to change notification settings

BadScorpio/myblog

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

home heroText tagline heroImageStyle bgImage bgImageStyle isShowTitleInHome actionText actionLink features
true
WangScaler
欢迎参观我的博客
maxWidth width display margin background borderRadius
600px
100%
block
9rem auto 2rem
#fff
1rem
back1.gif
height
1000px
false
Guide
/views/other/guide
title details
Yesterday
开发一款看着开心、写着顺手的 vuepress 博客主题
title details
Today
希望帮助更多的人花更多的时间在内容创作上,而不是博客搭建上
title details
Tomorrow
希望更多的爱好者能够参与进来,帮助这个主题更好的成长
<style> .anchor-down { display: block; margin: 12rem auto 0; bottom: 45px; width: 20px; height: 20px; font-size: 34px; text-align: center; animation: bounce-in 5s 3s infinite; position: absolute; left: 50%; bottom: 30%; margin-left: -10px; cursor: pointer; } @-webkit-keyframes bounce-in{ 0%{transform:translateY(0)} 20%{transform:translateY(0)} 50%{transform:translateY(-20px)} 80%{transform:translateY(0)} to{transform:translateY(0)} } .anchor-down::before { content: ""; width: 20px; height: 20px; display: block; border-right: 3px solid #fff; border-top: 3px solid #fff; transform: rotate(135deg); position: absolute; bottom: 10px; } .anchor-down::after { content: ""; width: 20px; height: 20px; display: block; border-right: 3px solid #fff; border-top: 3px solid #fff; transform: rotate(135deg); } </style> <script> export default { mounted () { const ifJanchor = document.getElementById("JanchorDown"); ifJanchor && ifJanchor.parentNode.removeChild(ifJanchor); let a = document.createElement('a'); a.id = 'JanchorDown'; a.className = 'anchor-down'; document.getElementsByClassName('hero')[0].append(a); let targetA = document.getElementById("JanchorDown"); targetA.addEventListener('click', e => { // 添加点击事件 this.scrollFn(); }) }, methods: { scrollFn() { const windowH = document.getElementsByClassName('hero')[0].clientHeight; // 获取窗口高度 document.documentElement.scrollTop = windowH; // 滚动条滚动到指定位置 } } } </script>

About

基于vuepress-theme-reco搭建的个人博客,集成了彩带特效,看板娘,公告,评论,悬浮气泡,鼠标特效,音乐播放器等

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%