CSS2D转换-王者荣耀案例

最新推荐文章于 2024-09-17 11:17:23 发布

Shar豪

最新推荐文章于 2024-09-17 11:17:23 发布

阅读量136

点赞数

分类专栏： Web前端文章标签： html5 css3

本文链接：https://blog.csdn.net/m0_56262017/article/details/123908130

版权

本文详细介绍了CSS2D转换中的关键知识点，如translate实现位移、scale进行缩放、linear-gradient创建渐变背景，以及transition和opacity的使用。通过实例演示了如何运用这些技巧，配合hover效果，为网页元素添加动态交互。

摘要由CSDN通过智能技术生成

CSS2D转换案例知识点：

位移：translate
缩放：scale
渐变：background-image: linear-gradient( red, red );
过渡：transition
透明：opcity

CSS代码：

* {
    margin: 0;
    padding: 0;
    /* 利用CSS3盒子模型防止盒子变大发生抖动 */
    box-sizing: border-box;
}

.box {
    overflow: hidden;
    position: relative;
    width: 667px;
    height: 375px;
    margin: 200px auto;
}

.box img {
    width: 100%;
    height: 100%;
    transition: all .4s;
}

.box::after {
    content: "百木心枪-赵云";
    position: absolute;
    bottom: 20px;
    left: 50%;
    font-size: 22px;
    color: #fff;
    transform: translateX(-50%);
    transition: all .4s;
}

.box .xq {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .8));
    text-align: center;
    color: #fff;
    border: 3px solid #dcaf6c;
    opacity: