CSS3动画设计 - 字体特效

特效一览

划线动态

背景高亮

色块进出

专注前端与算法的系列干货分享,转载请声明原创:
「微信公众号:心谭博客」| xxoo521.com | GitHub

划线动态

效果图

原理

首先,利用::after::before就可以画出上下两条线,所以只需要一个 dom 元素即可。

其次,对于鼠标移入的动画,要给上面两个伪元素设置:hover选择器。

最后是处理动画方向。我们以上面的线条为例,在鼠标移入的时候,是从右到左变化的。这里是通过设置transform-origin属性来修改动画方向。下面的线条同理,方向相反即可。

注意:代码是通过scaleX来实现缩放,相比于设置width,会启用 GPU,避免重绘。

代码

html 代码:

<body>
    <span>xin-tan.com</span>
</body>

css 代码:

span {
    color: #595959;
    position: relative;
    z-index: 1;
}

span::before,
span::after {
    content: "";
    z-index: -1;
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #262626;
    transform: scaleX(0);
    transition: transform 0.2s ease-in-out;
}

span::before {
    top: 0;
    transform-origin: center right;
}

span::after {
    bottom: 0;
    transform-origin: center left;
}

span:hover {
    cursor: pointer;
}

span:hover::before {
    transform-origin: center left;
    transform: scaleX(1);
}

span:hover::after {
    transform-origin: center right;
    transform: scaleX(1);
}

背景高亮

效果图

原理

首先,利用::before伪元素就可以模拟出覆盖需要的色块。所以仅仅需要一个 dom 元素。这里伪元素的content元素必须给,否则不会显示(有些坑)。

其次,色块大小改变是通过scaleY来设置的,原因和第一个动画原因一样。

最后,伪元素的色块会覆盖 dom 上的元素。所以需要给 dom 元素设置z-index,并且让其生效并大于伪元素的z-index

代码

html 代码:

<body>
    <span>xin-tan.com</span>
</body>

css 代码:

span {
    color: #d9d9d9;
    position: relative;
    z-index: 1;
}

/* 
1. content必须给
2. 用transform覆盖 配合 z-index
*/
span::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -0.25em;
    right: -0.25em;
    z-index: -1;
    background: #262626;
    transform: scaleY(0.2);
    transform-origin: center bottom;
    transition: all 0.1s linear;
}

span:hover {
    cursor: pointer;
}

span:hover::before {
    transform: scaleY(1);
}

色块进出

效果图

原理

这和上一个“背景高亮”动画类似,不同的是色块的位置和大小变化方向不同。其余基本一致。

代码

html:

<span>xin-tan.com</span>

css:

span {
    color: #d9d9d9;
    position: relative;
    z-index: 1;
}

span::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #262626;
    transform-origin: center right;
    transform: scaleX(0);
    transition: transform 0.1s linear;
    /* 这里不要指明为 all */
}

span:hover {
    cursor: pointer;
}

span:hover::before {
    transform-origin: center left;
    transform: scaleX(1);
}
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×