鼠标移动过有渐变和动画延迟效果

CSS动画与阴影效果

最新推荐文章于 2023-08-30 00:19:09 发布

原创最新推荐文章于 2023-08-30 00:19:09 发布 · 486 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

本文详细介绍了使用CSS实现鼠标悬停时元素的平滑动画和阴影变化效果，通过transform和box-shadow属性，增强了网页的交互体验。

直接上代码

    .block-collection:hover {
        transform: translateY(-2%);
        transition: all 0.5s;
        box-shadow: 1px 4px 10px 2px #CCC;
        -webkit-box-shadow: 1px 4px 10px 2px #CCC;
        -moz-box-shadow: 1px 4px 10px 2px #CCC;
    }


    .block-collection:hover {
        box-shadow: 1px 1px 10px 2px #CCC;
        -webkit-box-shadow: 1px 1px 10px 2px #CCC;
        -moz-box-shadow: 1px 1px 10px 2px #CCC;
        -webkit-transition: all .4s;
        border-color: red;