day40-3d Background Boxes(3D背景盒子转换)

这篇具有很好参考价值的文章主要介绍了day40-3d Background Boxes(3D背景盒子转换)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

50 天学习 50 个项目 - HTMLCSS and JavaScript

day40-3d Background Boxes(3D背景盒子转换)

效果

day40-3d Background Boxes(3D背景盒子转换),50天50个小demo前端,3d,html5,css3,javascript,前端
day40-3d Background Boxes(3D背景盒子转换),50天50个小demo前端,3d,html5,css3,javascript,前端
day40-3d Background Boxes(3D背景盒子转换),50天50个小demo前端,3d,html5,css3,javascript,前端文章来源地址https://www.toymoban.com/news/detail-617912.html

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Boxes Background</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!-- 点击变换按钮 -->
    <button id="btn" class="magic">变换 🎩</button>
    <!-- 3D容器 -->
    <div id="boxes" class="boxes big"></div>
    <script src="script.js"></script>
</body>

</html>

style.css

/* 引入字体 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
    /* 内减模式 width=border+padding+内容的宽度 */
    box-sizing: border-box;
}

body {
    background-color: #fafafa;
    font-family: 'Roboto', sans-serif;
    /* 子元素竖直居中排列 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}

/* 按钮 */
.magic {
    background-color: #f9ca24;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    border: 0;
    border-radius: 3px;
    font-size: 16px;
    padding: 12px 20px;
    cursor: pointer;
    /* 固定定位 距离窗口 1rem */
    position: fixed;
    top: 1rem;
    /* 字间距 */
    letter-spacing: 1px;
    /* 底部阴影 */
    box-shadow: 0 3px rgba(249, 202, 36, 0.5);
    z-index: 100;
    /* 去除按钮元素的默认外边框 */
    outline: none;
}

/* 伪类选择器 点击按钮 按钮无阴影 向下移动 */
.magic:active {
    box-shadow: none;
    transform: translateY(2px);
}

/* 3D容器 */
.boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    height: 500px;
    width: 500px;
    position: relative;
    /* 默认下是all */
    transition: 0.4s ease;
}

/* 小盒子显示时,宽高变大 */
.boxes.big {
    width: 600px;
    height: 600px;
}

/* 大盒子内的小盒子 */
.boxes.big .box {
    transform: rotateZ(360deg);
}

/* 小盒子 */
.box {
    background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif');
    background-repeat: no-repeat;
    background-size: 500px 500px;
    position: relative;
    /* 小盒子的大小会影响后续js生成小盒子 */
    height: 125px;
    width: 125px;
    transition: 0.4s ease;
}

/* 小盒子右侧的影音由伪元素实现 */
.box::after {
    content: '';
    background-color: #f6e58d;
    position: absolute;
    top: 8px;
    right: -15px;
    height: 100%;
    width: 15px;
    /* 向下倾斜45度 */
    transform: skewY(45deg);
}

/* 底部阴影 */
.box::before {
    content: '';
    background-color: #f9ca24;
    position: absolute;
    bottom: -15px;
    left: 8px;
    height: 15px;
    width: 100%;
    /* 向右倾斜45度 */
    transform: skewX(45deg);
}

script.js


// 重点 flex position transform 伪元素 transition transform: skewY(45deg); transform: skewX(45deg);
// 1.获取元素节点
const boxesContainer = document.getElementById('boxes')//大盒子容器
const btn = document.getElementById('btn')//按钮
// 2.绑定点击事件 通过切换大盒子的big类,即宽高来切换显示效果
btn.addEventListener('click', () => boxesContainer.classList.toggle('big'))
// 函数:创建小盒子
function createBoxes() {
    // 4*4
    for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {
            const box = document.createElement('div')
            box.classList.add('box')
            // 设置图片的位置,即显示图片的哪块区域
            box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
            boxesContainer.appendChild(box)
        }
    }
}
// 初始化创建小盒子
createBoxes()

到了这里,关于day40-3d Background Boxes(3D背景盒子转换)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 13万行代码+50万外包美术的 3D 示例,Cocos 免费送啦!

    上周公众号推了一篇文章,宣布 Cocos Cyberpunk 开源了,但夹在前后几天的新闻里好像并没有太多人注意到,看来我得再宣传一波(文末还有本周三直播讲解预告)。先看效果: 其实这个赛博朋克 3D 场景,很多人在前年 Cocos Creator 3.3 宣传的时候就看过了。为什么打磨到现在才

    2023年04月11日
    浏览(29)
  • 【CSS3】CSS3 3D 转换 ① ( CSS3 3D 转换简介 | 3D 物体与 2D 物体区别 | 3D 空间坐标系 | 常用的 3D 转换属性 | 3D 位移转换语法 | 代码示例 )

    3D 显示的物体 与 平面 2D 显示的物体有明显的不同 , 3D 显示效果有 近大远小 的 特点 ; 元素的 2D 的 转换效果 有 平移 , 旋转 , 缩放 效果 , 同样有对应的 3D 转换效果 ; 2D 平面坐标系 中 , 只有 x 轴 和 y 轴 ; 3D 空间坐标系 比 2D 平面坐标系 多了一个 Z 轴 ; x 轴 : 水平向右 ; 左侧是

    2024年02月12日
    浏览(42)
  • JavaScript实现背景图像切换3D动画效果

    🐱 个人主页: 不叫猫先生 🙋‍♂️ 作者简介:2022年度博客之星前端领域TOP 2,前端领域优质作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫优质专栏:vue3从入门到精通、TypeScript从入门到实践 📢 资料领取:前端进阶资料以及文中源

    2023年04月20日
    浏览(52)
  • CSS background 背景

    background 属性为元素添加背景效果。 它是以下属性的简写,按顺序为: background-color background-image background-repeat background-position background-size background-origin background-clip background-attachment 以下所有示例中的 花花.jpg 图片的大小是 48×48 。 background-color 指定元素的背景色。 背景图片默

    2024年02月11日
    浏览(47)
  • css设置background背景视频

    通过CSS设置背景视频可以使用HTML5的video标签。具体步骤如下: 1.在HTML中添加video标签,并设置class为bg-video。 2.在video标签中添加source标签,用于指定视频文件的路径和类型。 3.在CSS中设置bg-video的样式,包括绝对定位、宽高等属性。 4.在CSS中设置z-index属性,确保视频在其他元

    2024年04月10日
    浏览(85)
  • CSS 实现 Turbo 官网 3D 网格线背景动画

    转载请注明出处,点击此处 查看更多精彩内容 查看 Turbo 官网 时发现它的背景动画挺有意思,就自己动手实现了一下。下面对关键点进行解释说明,查看完整代码及预览效果请 点击这里。 简单说明原理:使用 mask-image 遮罩绘制网格,使用 perspective 及 rotate 动画设置 3D 纵深效

    2024年02月17日
    浏览(44)
  • 微信小程序 background多个background背景图叠加以及连写注意事项

    background: url(\\\'https://xxxxxxxx.com\\\') no-repeat top/100% auto,linear-gradient(318deg, #3F0000 0%, #A9143A 100%); 效果: 坑点: 1:多个背景图叠加时(渐变也相当于图片)以逗号分割,越靠前图片叠加时层级越高。网上搜索时发现找到的都是说越靠后层级越高,但我测试的时候确实是越靠前越高。

    2024年02月15日
    浏览(54)
  • 50套Threejs实现的Web3D学习案例,总有一套适合你

    个人主页: 左本Web3D,更多案例预览请点击==》 在线案例 个人简介:专注Web3D使用ThreeJS实现3D效果技巧和学习案例 💕 💕积跬步以至千里,致敬每个爱学习的你。喜欢的话请三连,有问题请私信或者加微信 从18年开始,我由前后端开发开始专注Web3D开发,目前也已经快5年了

    2024年01月23日
    浏览(48)
  • 3D-echarts的背景和地图表面的贴图

    1.设置背景图片 效果如下: 核心代码(全部代码见文末):   注意:图片的路径设置 绝对路径 或 asset下面的相对路径都没有效果,要把图片放到public路径下面才有效果(此demo是写在v2脚手架中)  2.设置背景颜色渐变 效果如下: 核心代码(全部代码见文末): 3.设置地图

    2024年02月12日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包