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

萌萌熊

2022 年 02 月 05 日

985 次浏览

2 条评论

1685字数

教程 TypeCho 美化

# 教程开始

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

![头像呼吸光环和鼠标悬停旋转放大](https://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://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://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://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);
}
```

最后修改：2022 年 10 月 03 日

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

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

萌萌熊 • 2022 年 02 月 05 日

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

2 条评论

发表评论取消回复

typecho_handsome微信小程序文章解析

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

EPLAN修改封面表格公司标识

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

博客创建成功！

PLC ST语言十六进制浮点数转十进制

为Vditor代码高亮添加structured-text支持

EPLAN修改封面表格公司标识

群晖NAS搭建Dplayer 弹幕库API

为handsome添加情侣恋爱天数

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

2 条评论

发表评论 取消回复

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

发表评论取消回复