css广告图特效代码

最近在学习Web开发，对于网站中的广告图特效十分感兴趣。今天我就来和大家分享一下一款基于CSS实现的广告图特效。

该广告图特效采用了CSS3动画以及过渡效果，通过添加hover伪类实现鼠标悬停时动画的效果。具体的代码如下：

.ad {
        width: 400px;
        height: 200px;
        position: relative;
        overflow: hidden;
}
.ad img {
        width: 100%;
        height: 100%;
        position: absolute;
        object-fit: cover;
}
.ad .mask {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(255, 255, 255, 0.95);
        opacity: 0;
        transition: opacity 0.5s;
}
.ad:hover .mask {
        opacity: 1;
}
.ad .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
}
.ad .title {
        font-size: 28px;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
}
.ad .desc {
        font-size: 16px;
        color: #666;
}
    

上述代码中，.ad为广告图容器的样式设置，其中包括了宽度、高度、位置等属性。.ad img为广告图的样式设置，包括了图片的适应方式等。.ad .mask为鼠标悬停时产生遮罩层的样式设置，包括了颜色、透明度以及过渡效果等。.ad .content为位于广告图中央的文本内容样式设置，其中包括了位置、字体大小、颜色等属性。

总之，通过这些CSS样式的设置，就可以实现一个简单而又美观的广告图特效。当鼠标悬停在广告图上时，遮罩层会慢慢显现，同时中央的文本内容也会随之变化，增加了页面的交互性和美感。

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