小聂子客栈

为博客增添动画色彩

2020-02-27 热度 ℃

有时间捣鼓了一下博客，加了一些个人喜欢的动效，记录备用。

头像荡秋千动画

logo上花功夫必不可少，掘金个人主页的头像旋转就很有特色๑乛◡乛๑。
原先logo图用了悬浮放大旋转的效果，觉得不够突出，因此改成荡秋千。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.logo{
    transform-origin: 50% 0;/* 固定旋转中心点 */
    -webkit-animation: swinging 4s ease-in-out forwards infinite;
       -moz-animation: swinging 4s ease-in-out forwards infinite;
            animation: swinging 4s ease-in-out forwards infinite;
}
@keyframes swinging{
    0%{
        transform: rotate(-35deg);
    }
    50%{
        transform: rotate(35deg);
    }
    100%{
        transform: rotate(-35deg);
    }
}

还可以在悬浮时静止

1
2
3
.logo:hover{
    animation-play-state: paused;
}

彩带背景

canvas生成一条彩带，每次点击位置颜色自由变化，可以直接下载引用 canvas-ribbon
在hexo博客的head插入时因为还未生成document，所以无法获取body，最好放在footer里。
可以在配置文件中加个字段控制

1
2
3
<% if (theme.is_ribbon){ %>
  <script id="ribbon" size="70" alpha="0.2" src="/js/canvas_ribbon.js"></script>
<% } %>

代码块悬浮蛇形边框

之前分享过一个蛇形边框，但是对宽高都有限制，不利于复用。后来发现一个用更简洁的用背景渐变方法：地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
figure:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0, #61BFAD 5px, #61BFAD 5px) no-repeat,
                linear-gradient(-90deg, #61BFAD 5px, #61BFAD 5px) no-repeat,
                linear-gradient(-180deg, #61BFAD 5px, #61BFAD 5px) no-repeat,
                linear-gradient(-270deg, #61BFAD 5px, #61BFAD 5px) no-repeat;
    background-size: 0 5px, 5px 0, 0 5px, 5px 0;
    background-position: left top, right top, right bottom, left bottom;
    transition: all ease-in .3s;
}
/* 悬浮改变大小 */
figure:hover:before{
    background-size: 100% 5px,  5px 100%, 100% 5px, 5px 100%;
}

头像的彩色阴影

用伪元素继承父元素的背景图，通过filter生成模糊效果
参考使用 filter:blur 生成彩色阴影（这位大神收集了很多常用的动效）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.head-img{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: url(imgUrl);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    z-index: 2;
}
.head-img:after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 10%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    transform: scale(.95);
    filter: blur(10px) brightness(80%) opacity(.8);
    z-index: -1;
}

Tags: css
← Share Time ~（第六期） vue3 解决 ESLint 各类型错误 →

扫描二维码，分享此文章