(1)一些HandSome主题的美化教程

博主：萌萌熊
发布时间：2022 年 02 月 05 日
664 次浏览
2 条评论
1935字数
分类：教程 TypeCho 美化

# 教程开始

#### 1、头像呼吸光环和鼠标悬停旋转放大

![头像呼吸光环和鼠标悬停旋转放大](https://www.hawait.cn/usr/uploads/2022/02/2826978160.png)

```
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.img-full:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

25% {
        box-shadow: 0 0 16px #0f0;
    }

50% {
        box-shadow: 0 0 4px #00f;
    }

75% {
        box-shadow: 0 0 16px #0f0;
    }

100% {
        box-shadow: 0 0 4px #f00;
    }
}
```

<CODE>如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：</CODE>

```
@keyframes light {
    from {
        box-shadow: 0 0 4px #f00;
    }

to {
        box-shadow: 0 0 16px #f00;
    }
}
```

#### 2、首页文章列表悬停上浮

![首页文章列表悬停上浮](https://www.hawait.cn/usr/uploads/2022/02/1552299515.gif)

```
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
```

#### 3、首页文章列表头图悬停放大并将超出范围隐藏

![首页文章列表头图悬停放大并将超出范围隐藏](https://www.hawait.cn/usr/uploads/2022/02/331054610.gif)

```
.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}
```

#### 4、文章内头图和文章图片悬停放大并将超出范围隐藏

![文章内头图和文章图片悬停放大并将超出范围隐藏](https://www.hawait.cn/usr/uploads/2022/02/492774009.gif)

```
.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}
```

最后修改：2023 年 06 月 17 日

如果觉得我的文章对你有用，请随意赞赏

2 条评论

萌萌熊
February 5th, 2022 at 06:01 am

真香
知名的男士
February 5th, 2022 at 05:44 am

文章写的不错，继续加油

此处评论已关闭

(1)一些HandSome主题的美化教程

萌萌熊 • 2022 年 02 月 05 日

# 教程开始

#### 1、头像呼吸光环和鼠标悬停旋转放大

![头像呼吸光环和鼠标悬停旋转放大](https://www.hawait.cn/usr/uploads/2022/02/2826978160.png)

```
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.img-full:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

25% {
        box-shadow: 0 0 16px #0f0;
    }

50% {
        box-shadow: 0 0 4px #00f;
    }

75% {
        box-shadow: 0 0 16px #0f0;
    }

100% {
        box-shadow: 0 0 4px #f00;
    }
}
```

<CODE>如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：</CODE>

```
@keyframes light {
    from {
        box-shadow: 0 0 4px #f00;
    }

to {
        box-shadow: 0 0 16px #f00;
    }
}
```

#### 2、首页文章列表悬停上浮

![首页文章列表悬停上浮](https://www.hawait.cn/usr/uploads/2022/02/1552299515.gif)

```
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
```

#### 3、首页文章列表头图悬停放大并将超出范围隐藏

![首页文章列表头图悬停放大并将超出范围隐藏](https://www.hawait.cn/usr/uploads/2022/02/331054610.gif)

```
.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}
```

#### 4、文章内头图和文章图片悬停放大并将超出范围隐藏

![文章内头图和文章图片悬停放大并将超出范围隐藏](https://www.hawait.cn/usr/uploads/2022/02/492774009.gif)

```
.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}
```

(1)一些HandSome主题的美化教程

2 条评论

(1)一些HandSome主题的美化教程

EPLAN修改封面表格公司标识

关于Vditor的使用

Handsome主题滑稽小表情

ST语言IEE754浮点数转十进制小数

handsome添加“那年今日”

博客创建成功！

为handsome添加情侣恋爱天数

ST语言IEE754浮点数转十进制小数

群晖NAS搭建Dplayer 弹幕库API

(1)一些HandSome主题的美化教程