css 动态特效 个人简历

最近在准备自己的个人简历，发现如果增加一些css动态特效会让简历更加生动有趣，以下分享一些常用的css动态特效。

1. 悬停变色效果：

a:hover {
    color: red;
}

当鼠标悬停在链接上时，链接文字颜色变为红色。

2. 文字下划线动态效果：

.underline {
    position: relative;
    z-index: 1;
}
.underline::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: black;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-out;
    z-index: -1;
}
.underline:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

当鼠标悬停在带有underline类的文字上时，文字下方会出现横线，横线从右侧到左侧匀速展开。

3. 图片悬浮放大效果：

.img-zoom {
    width: 200px;
    transition:transform .5s;
}
.img-zoom:hover {
    transform:scale(1.1);
}

当鼠标悬停在类名为img-zoom的图片上时，图片会放大1.1倍。

4. 列表项缩进效果：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul li {
    padding-left: 20px;
    position: relative;
}
ul li::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 5px;
    height: 5px;
    background-color: black;
}

ul列表项的左侧会有20px的缩进，同时每个列表项前会有一个小黑圆点。

5. 文字旋转效果：

.rotate {
    display: inline-block;
    transition:transform .5s;
}
.rotate:hover {
    transform:rotate(10deg);
}
    

当鼠标悬停在类名为rotate的文字上时，文字会顺时针旋转10度。

以上就是一些常用的css动态特效，当然还有很多其他的特效可以探索，希望能对大家有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！