# css+Jquery 个人博客Blog

**Repository Path**: picky-xxx/blog

## Basic Information

- **Project Name**: css+Jquery 个人博客Blog
- **Description**: 这是一个由学生独立完成的酷炫风Blog，简单的css、jQuery实现有趣的小特效。旨在打造一款特性鲜明，具有独特个人特征的网页设计。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 0
- **Created**: 2020-10-19
- **Last Updated**: 2022-01-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 博客Blog



## 📄入门介绍

这是一个由学生独立完成的酷炫风Blog，简单的css、jQuery实现有趣的小特效。旨在打造一款特性鲜明，具有独特个人特征的网页设计。



### 使用说明

**无需修改配置文件，可替换文字和图片，即可适配任意场景的个性化博客定制。**

html + css + JavaScript + jQuery + Font Awesome（也可替换成Iconfont）

项目开源，欢迎 Star ⭐️！



### 使用软件

vscode

[Font Awesome 图标字体库](https://fontawesome.dashgame.com/)



### 📋使用指南

```js
├─── .vscode // 设置文件
├─settings.json 

├─── A // 封面
├─index.html
├─index.css
├─图片

├─── Aindex // 首页
├─CSS
├font.css
├index.css
├─front-awesome
├─image
├图片
├─JavaScript
├index.js
├─music
├─index.html

├─── Comment // 评论区
├─front-awesome
├─img
├图片
├─index.html
├─style.css

├─── Gallery // 摄影圈
├─img
├图片
├─index.html

├─── Log // 图文集
├─img
├图片
├─index.html
├─index.css

├─── Rec // 影视墙
├─图片
├─index.html
├─index.css
├─mp4
```



## ⚡️ 功能简介

- [x] 动态波浪
- [x] 文字背景
- [x] 跳动的字
- [x] 酷炫按钮
- [x] 渐变图标
- [x] 高斯模糊文字框
- [x] 进度条
- [x] 个性化留言板
- [x] 响应式文字
- [x] 三角形透视化打开视频
- [ ] 后端连接数据库（尚未完成）

---



## 📷内容说明

- 封面（文件夹A）部分:

使用波浪的图片利用css的动画效果做了一个动态波浪图；

<div><img src="https://gitee.com/picky-xxx/blog/raw/master/readme-img/%E6%B3%A2%E6%B5%AA.gif" alt="波浪" style="zoom: 50%;text-align:left;"/></div>

渐变效果的按钮；

 <img src="https://gitee.com/picky-xxx/blog/raw/master/readme-img/%E5%B0%81%E9%9D%A2%E6%8C%89%E9%92%AE.gif" alt="封面按钮" style="zoom: 50%;" />

自定义图片做文字背景：

<div><img src="https://gitee.com/picky-xxx/blog/raw/master/readme-img/%E5%B0%81%E9%9D%A2.png" alt="封面" style="zoom: 33%;text-align:left;" /></div>

---

- 点击封面后进入首页（文件夹Aindex）部分:

包含有跳动的文字、滚动搜索框、四大功能块炫丽按钮、个人介绍的图片以及高斯滤镜模糊文字边框、项目进程栏和底部博客联系栏；



搜索框：

<div><img src="https://gitee.com/picky-xxx/blog/raw/master/readme-img/%E6%90%9C%E7%B4%A2%E6%A1%86.gif" alt="搜索框" style="zoom:33%;" /></div>

线性变化按钮：

<div><img src="https://gitee.com/picky-xxx/blog/raw/master/readme-img/%E6%8C%89%E9%92%AE.gif" alt="按钮" style="zoom: 50%;" /></div>

跳动的字：

<div><img src="https://gitee.com/picky-xxx/blog/raw/master/readme-img/%E8%B7%B3%E5%8A%A8%E5%AD%97.gif" alt="跳动字" style="zoom:40%;" /></div>

项目进程栏：

<div><img src="https://gitee.com/picky-xxx/blog/raw/master/readme-img/%E9%A1%B9%E7%9B%AE%E6%A0%8F.gif" alt="项目栏" style="zoom: 33%;" /></div>



<img src="https://gitee.com/picky-xxx/blog/raw/master/readme-img/%E9%A6%96%E9%A1%B5.png" alt="首页" style="zoom:33%;" />

---

- 点击“旅游”按钮后会进入（文件夹Comment）部分：

有旅游推荐城市、手风琴折叠、留言板，鼠标放置在“About”上会有渐变效果；



<img src="https://gitee.com/picky-xxx/blog/raw/master/readme-img/%E6%97%85%E6%B8%B8.png" alt="旅游" style="zoom:33%;" />

---

- 点击“摄影”按钮后会进入（文件夹Gallery）部分：

使用了js幻灯片插件，鼠标放置在图片上会有个旋转放大的效果，点击后可以查看图片；



<img src="https://gitee.com/picky-xxx/blog/raw/master/readme-img/%E6%91%84%E5%BD%B1.png" alt="摄影" style="zoom:33%;" />

<img src="https://gitee.com/picky-xxx/blog/raw/master/readme-img/%E5%B9%BB%E7%81%AF%E7%89%87.png" alt="幻灯片" style="zoom:33%;" />

---

- 点击“图文”按钮后会进入（文件夹Log）部分，

模仿了微信公众号的样式，记录旅游的点点滴滴，底部有响应式滚动联系栏；



<img src="https://gitee.com/picky-xxx/blog/raw/master/readme-img/%E5%9B%BE%E6%96%87.png" alt="图文" style="zoom:33%;" />

<img src="https://gitee.com/picky-xxx/blog/raw/master/readme-img/%E8%81%94%E7%B3%BB%E4%BA%BA.png" alt="联系人" style="zoom:33%;" />

---

- 点击“影视”按钮后会进入（文件夹Rec）部分：

龙眼部分有个动态的矢量图，点击后视频会以三角形透视图的效果打开，同时图片背景会发生相应的变化。



若想添加更多的视频，可以直接在不同的地方插入矢量图，并不局限于龙眼部分：

<div><img src="https://gitee.com/picky-xxx/blog/raw/master/readme-img/%E5%BD%B1%E8%A7%86.gif" alt="影视" style="zoom:33%;" /></div>



<img src="https://gitee.com/picky-xxx/blog/raw/master/readme-img/%E5%BD%B1%E8%A7%86.png" alt="影视" style="zoom:33%;" />

<img src="https://gitee.com/picky-xxx/blog/raw/master/readme-img/%E6%89%93%E5%BC%80%E5%BD%B1%E8%A7%86.png" alt="打开影视" style="zoom:33%;" />

---

背景音乐设置在**首页**，如果使用谷歌浏览器需要下载谷歌浏览器的插件才能听到，但是其他浏览器可以直接听到。



## 🔩资源版权说明

版权所有，未经允许，禁止盗用商业合作。