网站logo怎么做的,快速生成网页的软件,什么是电商视觉设计,wordpress强大播放器前言#xff1a;在学习完HTML和CSS之后#xff0c;我们就可以开始做一些小项目了#xff0c;本篇文章所讲的小项目为——方向感应名片 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 在开始学习之前#xff0c;先让我们看一… 前言在学习完HTML和CSS之后我们就可以开始做一些小项目了本篇文章所讲的小项目为——方向感应名片 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 在开始学习之前先让我们看一下最终效果 那么我们如何去实现这样的小案例呢在下文中我们对每一段重要的代码都进行了解释读者可以根据注释对代码进行理解。 1.HTML代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlefish/title !-- 设置页面标题为fish --link relstylesheet href./test.css !-- 引入外部CSS样式表 --
/headbodydiv classshell !-- 外层容器 --div classbox !-- 盒子容器 --div classimages !-- 图片容器 --img src./item1.jpg !-- 显示item1.jpg图片 --/divdiv classcontent !-- 内容容器 --h2ZeenChin/h2 !-- 标题为ZeenChin --pThe style in the painting integrates temptation, fantasy and strangeness/p !-- 段落内容描述绘画风格 --/div/div!-- 后续box结构与前面类似每个box包含图片和内容 --div classboxdiv classimagesimg src./item2.jpg/divdiv classcontenth2ZeenChin/h2pThe style in the painting integrates temptation, fantasy and strangeness/p/div/divdiv classboxdiv classimagesimg src./item3.jpg/divdiv classcontenth2ZeenChin/h2pThe style in the painting integrates temptation, fantasy and strangeness/p/div/divdiv classboxdiv classimagesimg src./item4.jpg/divdiv classcontenth2ZeenChin/h2pThe style in the painting integrates temptation, fantasy and strangeness/p/div/divdiv classboxdiv classimagesimg src./item5.jpg/divdiv classcontenth2ZeenChin/h2pThe style in the painting integrates temptation, fantasy and strangeness/p/div/div/div/body/html 看完上述的代码之后我相信读者已经有了大致的内容理解了现在在让我们简单的回顾一下上述的代码 其中head部分包含网页标题“fish”和引入外部CSS样式表test.css。主体部分由一个外层容器div classshell包裹其中包含多个盒子div classbox每个盒子内部有图片容器div classimages和内容容器div classcontent展示了不同的图片如item1.jpg至item5.jpg ——这里读者可以先对HTML中的代码进行简单的编写这里直接展示HTML代码的结果了 这样我们就大致的将网页的骨架搭建完成了接下来在让我们编写CSS代码来进行对其的美化。 2.CSS代码
* {margin: 0;padding: 0;
}body {/* 将内容区域居中显示 */display: flex;/* 使用 Flex 布局 */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */min-height: 100vh;/* 最小高度占据整个视口 *//* 设置背景渐变色 */background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}.shell {/* 设置相对定位启用3D变换 */position: relative;min-width: 1000px;/* 最小宽度为1000像素 */display: flex;/* 使用 Flex 布局 */justify-content: center;/* 水平居中 */flex-wrap: wrap;/* 换行排列子元素 */transform-style: preserve-3d;/* 保持3D变换 */perspective: 900px;/* 设置透视效果 */
}.shell .box {/* 设置相对定位和固定宽高 */position: relative;width: 250px;/* 宽度250像素 */height: 350px;/* 高度350像素 */transition: 0.6s;/* 过渡效果时长 */overflow: hidden;/* 隐藏溢出部分 */margin: 30px;/* 外边距为30像素 */transform: rotateY(0deg);/* 默认Y轴旋转角度为0度 */transition-delay: .1s;/* 过渡延迟0.1秒 */border-radius: 5px;/* 设置圆角为5像素 */border: #fff 5px solid;/* 边框为白色5像素实线 */
}/* 鼠标悬停在 .shell 上时 */
.shell:hover .box {transform: rotateY(20deg);/* 所有 .box 元素绕Y轴旋转20度 */
}/* 鼠标悬停在 .box 上时 */
.shell .box:hover {transform: rotateY(0deg) scale(1.25);/* 当前 .box 元素恢复到0度旋转并放大到1.25倍 */box-shadow: 0 25px 40px rgba(0, 0, 0, 0.7);/* 添加阴影效果 */z-index: 1;/* 设置堆叠顺序为1使其位于最顶层 */
}/* 鼠标悬停在 .box 上时其他 .box 元素的效果 */
.shell .box:hover~.box {transform: rotateY(-20deg);/* 其他 .box 元素绕Y轴反向旋转20度 */
}.shell .box .images img {width: 100%;/* 图片宽度100% */
}.shell .box .content {position: absolute;/* 绝对定位 */top: 0;/* 顶部与父元素对齐 */width: 90%;/* 宽度90% */height: 100%;/* 高度100% */z-index: 999;/* 设置堆叠顺序为999使内容层位于最顶层 */padding: 15px;/* 内边距为15像素 */
}.shell .box .content h2 {color: rgb(210, 140, 140);/* 设置标题颜色 */transition: 0.6s;/* 过渡效果时长 */font-size: 20px;/* 字体大小20像素 */transform: translateY(-100px);/* 初始位置向上偏移100像素 */
}/* 鼠标悬停在 .box 上时的标题效果 */
.shell .box:hover .content h2 {transform: translateY(-15px);/* 标题向上偏移15像素 */
}.shell .box .content p {color: rgb(0, 0, 0);/* 设置段落文本颜色 */transition: 0.6s;/* 过渡效果时长 */font-size: 14px;/* 字体大小14像素 */transform: translateY(600px);/* 初始位置向下偏移600像素 */background-color: rgba(255, 255, 255, 0.7);/* 设置背景颜色及透明度 */
}/* 鼠标悬停在 .box 上时的段落效果 */
.shell .box:hover .content p {transform: translateY(220px);/* 段落向下偏移220像素 */
} 注上边的代码中我们将每一行代码的讲解都附在了代码的上边希望读者可以跟随着代码中的注释来理解每行代码的用意。
这里我们在简单的进行解释一下 * { margin: 0; padding: 0; }: 将所有元素的内外边距重置为0以确保整体布局的一致性。 body: 设置了页面主体的样式利用Flex布局将内容区域水平和垂直居中并设置了背景渐变色作为背景图像。 .shell: 这是一个容器采用Flex布局用于包裹一组具有动态效果的盒子.box。设置了透视效果perspective和3D变换transform-style: preserve-3d使得内容具有立体感。 .shell .box: 每个.box代表一个盒子固定了宽度和高度带有圆角和边框。通过旋转transform: rotateY()和过渡效果transition实现了鼠标悬停时的动画效果。 .shell:hover .box和.shell .box:hover: 当鼠标悬停在.shell或.box上时通过旋转和缩放动画transform属性以及阴影效果box-shadow增强了用户交互体验。 .shell .box .content: 盒子内部的内容区域利用绝对定位position: absolute来定位在盒子的顶部设置了透明的背景颜色和过渡效果。 .shell .box:hover .content h2和.shell .box:hover .content p: 当鼠标悬停在.box上时标题和段落文本通过transform属性实现了位置的变化从而产生动态效果。 ——最终我们将代码运行尽可以得到最终结果啦如图 以上就是本篇文章的全部内容了~~~
