免费网站最新域名,域名备案查询系统工信部,天津网站制作福州,新开传奇网站首区前言
通过现阶段的学习#xff0c;我们已经掌握了HTML#xff0c;CSS和JS部分的相关知识点#xff0c;现在让我们通过一篇案例#xff0c;来巩固我们近期所学的知识点。
详细视频讲解戳这里
任务一 了解目标案例样式
1.1了解案例 3D相框 1.2 分析案例
首先我们看到一个…前言
通过现阶段的学习我们已经掌握了HTMLCSS和JS部分的相关知识点现在让我们通过一篇案例来巩固我们近期所学的知识点。
详细视频讲解戳这里
任务一 了解目标案例样式
1.1了解案例 3D相框 1.2 分析案例
首先我们看到一个完整的图片被分成16份每张小图片都有黄色阴影衬托除3D效果当我们点击按钮时所有小图片按Z轴旋转360°并合称为一张照片此时大照片也有黄色阴影衬托3D效果再次点击按钮大图片一同样的方式变回小照片。
源图片 1.3 整理思路
在HTML中创建按钮部分以及一个盒子。在CSS中修饰按钮设置图片定义图片移动方向及方式定义阴影。在JS中实现按钮与盒子的交互以及将一张图片分成16等份。
任务二 创建3D相框文件包
创建一个本地文件 将源代码以及所需图片放在一起。 任务三 HTML框架部分
3.1 按钮部分
按钮部分简单仅需id和类名即可
button ida classcMagic /button
3.2 盒子部分
盒子部分同理不同点是有两个类名因为以后照片要向外扩所以有两个类名分别适应不同情况。
div idb classc1 c2/div 任务四 CSS初始样式部分
4.1 body样式
*{ box-sizing: border-box;
}
body { background-color: rgb(255, 255, 255); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;
}
*{ } 这是一个通用选择器
flex-direction: column; - 这个属性设置flex容器的主轴方向为垂直
align-items: center; - 这个属性设置flex容器内项目在交叉轴上的对齐方式。
justify-content: center; - 这个属性设置flex容器内项目在主轴上的对齐方式。 4.2 按钮样式
.c{ background-color: #f9ca25; color: #ffffff; border: 0; border-radius: 5px; font-size: 18px; padding: 12px 20px; cursor: pointer; position: fixed; top: 30px; z-index: 1;
}
border-radius: 5px; - 设置元素的边框圆角为5像素。
cursor: pointer; - 当鼠标悬停在元素上时鼠标光标会变成指针形状。
position: fixed; - 设置元素的位置为固定定位。
z-index: 1; - 设置元素的堆叠顺序为1。
运行如下 4.3 盒子样式
.c1{ display: flex; flex-wrap: wrap; justify-content: space-around; width: 500px; height: 500px; position: relative;
}
.c2{ width: 600px; height: 600px;
}
c1为图片完整前盒子c2为图片拆分后盒子大小。
flex-wrap: wrap; - 设置flex容器的换行行为。
justify-content: space-around; - 设置flex容器内项目在主轴上的对齐方式。
position: relative; - 设置元素的位置为相对定位。
任务五 JS交互部分
5.1 按钮与盒子交互
const r1 document.getElementById(b)
const r2 document.getElementById(a)
r2.addEventListener(click, () r1.classList.toggle(c2))
意为实现id为a和id为b相互交互 任务六 JS图片分裂
6.1 功能实现
function fun(){ for(let i 0; i 3; i){ for(let j 0; j 3; j){ const x document.createElement(div) x.classList.add(x) x.style.backgroundPosition ${-j * 125}px ${-i * 125}px r1.appendChild(x) } }
}
fun()
这里我们定义了一个名为fun的函数并在函数内部创建了一个4x4的div元素网格。每个div元素都被添加到一个名为r1的容器中并且每个div都有一个x类。
详情解析
定义了一个名为fun的函数开始一个外层循环循环变量i从0开始直到小于或等于3即循环4次。在外层循环内部开始一个内层循环循环变量j从0开始直到小于或等于3即循环4次。在内层循环内部创建一个新的div元素并将其赋值给常量x。给新创建的div元素添加一个名为x的类。这使得该元素可以通过CSS样式进行样式化。设置新创建的div元素的backgroundPosition样式属性。这里使用了模板字符串来计算背景图片的位置。-j * 125和-i * 125的计算结果用于确定背景图像的显示位置。将新创建的div元素x添加到名为r1的容器中。调用fun函数执行上述代码创建并添加16个div元素到r1容器中。
任务七 CSS修饰图片
7.1 图片部分
.x{ background-image: url(../源代码/EZqwsBSPlvSda.webp); background-repeat: no-repeat; background-size: 500px 500px; position: relative; width: 125px; height: 125px; transition: 0.7s ease;
}
background-repeat: no-repeat; - 设置背景图像不重复。
position: relative; - 设置元素的位置为相对定位。
transition: 0.7s ease; - 定义一个过渡效果当元素的某些属性值发生变化时这个过渡效果会被应用。
.c1.c2 .x{ trandform: rotateZ(360deg);
}
这里我们使用了后代选择器和类选择器的组合来应用样式。
transform: rotateZ(360deg); - 这个属性应用了一个CSS变换使得匹配的元素围绕Z轴旋转360度。
7.2 3D背景阴影部分
.x::after{ content: ; background-color: #f6e58d; position: absolute; top: 8px; right: -15px; height: 100%; width: 15px; transform: skewY(45deg);
}
.x::before{ content: ; background-color: #f9ca25; position: absolute; bottom: -15px; left: 8px; height: 15px; width: 100%; transform: skewX(45deg);
}
这段CSS代码使用了伪元素::after和::before来给具有类x的元素添加装饰性的效果。
position: absolute; - 将伪元素的定位设置为绝对定位。
transform: skewY(45deg); - 应用一个Y轴倾斜的变换效果倾斜角度为45度使得伪元素沿Y轴倾斜。
整合代码 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{box-sizing: border-box;}body {background-color: rgb(255, 255, 255);display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;}.c{background-color: #f9ca25;color: #ffffff;border: 0;border-radius: 5px;font-size: 18px;padding: 12px 20px;cursor: pointer;position: fixed;top: 30px;z-index: 1;}.c1{display: flex;flex-wrap: wrap;justify-content: space-around;width: 500px;height: 500px;position: relative;}.c2{width: 600px;height: 600px;}.c1.c2 .x{transform: rotateZ(360deg);}.x{background-image: url(.//3d.webp);background-repeat: no-repeat;background-size: 500px 500px;position: relative;width: 125px;height: 125px;transition: 0.7s ease; }.x::after{content: ;background-color: #f6e58d;position: absolute;top: 8px;right: -15px;height: 100%;width: 15px;transform: skewY(45deg);}.x::before{content: ;background-color: #f9ca25;position: absolute;bottom: -15px;left: 8px;height: 15px;width: 100%;transform: skewX(45deg);}/style
/head
bodybutton ida classcMagic /buttondiv idb classc1 c2/divscriptconst r1 document.getElementById(b)const r2 document.getElementById(a)r2.addEventListener(click, () r1.classList.toggle(c2))function fun(){for(let i 0; i 3; i){for(let j 0; j 3; j){const x document.createElement(div)x.classList.add(x)x.style.backgroundPosition ${-j * 125}px ${-i * 125}pxr1.appendChild(x)}}}fun()/script
/body
/html
效果图
将全体代码写完后运行 3D相框
