• 创建一个具有背景轮播和3D卡片翻转效果的个人名片网页

    目录

    项目展示

    图片展示

    前言

    项目目标

    项目目标

    步骤 3：CSS 样式

    步骤 4：JavaScript 动画

    项目源码

    知识点介绍 （大佬请绕道）

    HTML 结构的构建

    2. CSS 样式的设计

    3. JavaScript 动画的实现

    4. 背景图轮播的逻辑

    5. CSS 3D变换的使用

    结语

    项目展示

    点击下面链接（第一次打开可能会有些慢）

    点击进入个人名片（手机版）

    图片展示

    前言

    在本篇博客中，我们将学习如何创建一个具有多个功能的个人名片网页。这个项目包括背景轮播效果和3D卡片翻转效果，适合前端开发初学者。

    项目目标

    在开始之前，我们先明确一下这个项目的主要目标：

    • 创建一个响应式的网页，可以适应不同屏幕大小。
    • 实现一个背景图像轮播效果，每隔一段时间切换一张背景图。
    • 使用CSS 3D变换来创建一个具有多个面的卡片效果。

    项目目标

    在开始之前，我们先明确一下这个项目的主要目标：

    • 创建一个响应式的网页，可以适应不同屏幕大小。
    • 实现一个背景图像轮播效果，每隔一段时间切换一张背景图。
    • 使用CSS 3D变换来创建一个具有多个面的卡片效果。
    1. <div id="wrapper">
    2. <div class="btn">div>
    3. <input class="range" type="range" min="0" max="5" step="1" value="0" oninput="change()" onchange="change()" />
    4. <div class="card">
    5.   <div class="cube show">
    6.     <div class="is_top">
    7.       <span class="avater">span>
    8.       <span class="username">命运之光span>
    9.       <span class="content">其实我的梦想是拯救世界span>
    10.     div>
    11.     <div class="is_bottom">
    12.       <span class="title">个人介绍span>
    13.       <span class="content">你好，我是命运之光，一个热爱生活和技术的程序员。我喜欢挑战自己，不断学习新知识和技能。除了编程，我还喜欢旅行、阅读和尝试新鲜事物。我的座右铭是“活出自己想要的样子”，我相信只要我们敢于追求自己的梦想，就能够创造属于自己的精彩人生。
    14.  
    15.  
    16.       span>
    17.     div>
    18.     <div class="is_left">
    19.       <span class="title">最近在看(德芙)span>
    20.       <span class="img" style="background:url(222.png)">span>
    21.     div>
    22.     <div class="is_right">
    23.       <span class="title">最近在玩（原神）span>
    24.       <span class="img" style="background:url(https://img1.baidu.com/it/u=2692659307,1253870257&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=590)">span>
    25.       
    26.     div>
    27.     <div class="is_front">
    28.       <span class="title">兴趣爱好span>
    29.       <span class="hobby">
    30.         <img src="https://pic.imgdb.cn/item/63c2d285be43e0d30eeb5146.png"  />
    31.         <img src="https://pic.imgdb.cn/item/63c2d285be43e0d30eeb513b.png"  />
    32.         <img src="https://pic.imgdb.cn/item/63c2d285be43e0d30eeb512d.png"  />
    33.         <img src="https://pic.imgdb.cn/item/63c2d285be43e0d30eeb5122.png"  />
    34.       span>
    35.     div>
    36.     <div class="is_back">
    37.       <span class="title">Hello Worldspan>
    38.       <span class="img" style="background:url(https://pic.imgdb.cn/item/63c2d710be43e0d30ef68b9c.gif)">span>
    39.     div>
    40.   div>
    41. div>
    42. div>
    步骤 3：CSS 样式

    使用CSS来设计网页的样式，包括背景图、按钮、卡片等的样式。

    1. body {
    2.             margin: 0;
    3.             padding: 0;
    4.             background-size: cover;
    5.             background-position: center;
    6.             background-image: url('bk1.jpg'); /* 使用 bk1.jpg 作为背景图像 */
    7.             height: 100vh;
    8.             display: flex;
    9.             align-items: center;
    10.             justify-content: center;
    11.             transition: background-image 1s ease-in-out;
    12.         }
    13.  
    14.         #wrapper {
    15.             width: 590px; /* 设置容器宽度，可以根据需要调整 */
    16.             height: 960px; /* 设置容器高度，可以根据需要调整 */
    17.             background-size: cover; /* 设置背景图像适应屏幕，保持纵横比 */
    18.             background-position: -55px;
    19.             transform-origin: 0 0;
    20.             position: absolute;
    21.             left: 50%;
    22.             transform: translateX(-50%); /* 将容器水平居中 */
    23.             margin-top: 450px; /* 增加上边距以垂直居中 */
    24.         }
    25. .range{
    26.   position: absolute;
    27.   width: 300px;
    28.   left: calc(50% - 150px);
    29.   bottom: 190px;
    30.   display: none;
    31. }
    32. .btn {
    33.   cursor: pointer;
    34.   position: absolute;
    35.   left: calc(50% - 50px);
    36.   bottom: 150px;
    37.   width: 100px;
    38.   height: 100px;
    39.   background: url(555.png)
    40.     no-repeat center/cover;
    41.  /* 其他样式 */
    42.   background: url(555.png) no-repeat center/cover;
    43.   opacity: 0.8; /* 添加这一行设置透明度为0.6 */
    44. }
    45. .btn::after {
    46.   content: "";
    47.   width: 100px;
    48.   height: 100px;
    49.   position: absolute;
    50.   background: url(555.png)
    51.     no-repeat center/cover;
    52.   transform-origin: center;
    53.   transform: scale(1);
    54.   animation: scale 3s infinite;
    55. }
    56. @keyframes scale {
    57.   0% {
    58.     transform: scale(0.4);
    59.     opacity: 1;
    60.   }
    61.   50% {
    62.     transform: scale(1);
    63.     opacity: 0.4;
    64.   }
    65.   100% {
    66.     transform: scale(1.4);
    67.     opacity: 0;
    68.   }
    69. }
    70. .btn::before {
    71. 	font-size:14px;
    72.   text-align: center;
    73. 	color:#ccc;
    74. 	content:"人生苦短，一天当作两天卷";
    75. 	height:20px;
    76. 	width:180px;
    77. 	background-color:#fff;
    78. 	position:absolute;
    79. 	left:-40px;
    80.   top: -30px;
    81. 	border-radius:10px;
    82. 	opacity:0;
    83. 	transition:all .5s;
    84. }
    85. .btn:hover:before {
    86. 	opacity:1;
    87. 	transition:all 1s;
    88. }
    89.  
    90. .card{
    91.   width: 300px;
    92.   height:300px;
    93.   perspective: 1000px;
    94.   margin: 200px auto;
    95.   opacity: 0;
    96.   transition: all 1s ease-in;
    97. }
    98. .cube{
    99.   width:100%;
    100.   height: 100%;
    101.   transform-style: preserve-3d;
    102.   transition: transform ease 1s;
    103. }
    104. .cube div{
    105.     border: 2px solid #5968be;
    106.     width: 100%;
    107.     height: 100%;
    108.     position: absolute;
    109.     background-color: rgba(255, 161, 161, 0.5);
    110.     background-size: 100% 100%;
    111. }
    112.  
    113. .is_top {
    114.   background: red;
    115.   transform: rotateX(90deg) translateZ(150px);
    116. }
    117. .is_bottom {
    118.   background: blue;
    119.   transform: rotateX(-90deg) translateZ(150px);
    120. }
    121. .is_left {
    122.   background: green;
    123.   transform: rotateY(-90deg) translateZ(150px);
    124. }
    125. .is_right {
    126.   background: pink;
    127.   transform: rotateY(90deg) translateZ(150px);
    128. }
    129. .is_front {
    130.   background: yellow;
    131.   transform: translateZ(150px);
    132. }
    133. .is_back {
    134.   background: orange;
    135.   transform: rotateX(-180deg) translateZ(150px);
    136. }
    137. .title{
    138.   color: #fff;
    139.   font-size: 22px;
    140.   display: block;
    141.   margin-top: 15px;
    142.   margin-bottom: 20px;
    143.   text-align: center;
    144. }
    145. .title::before{
    146.   display: block;
    147.   position: absolute;
    148.   left:118px;
    149.   top: 50px;
    150.   content: '';
    151.   width: 70px;
    152.   height: 3px;
    153.   background-color: #fff;
    154. }
    155. .content{
    156.   display: block;
    157.   width: 100%;
    158.   box-sizing: border-box;
    159.   padding: 0 30px;
    160.   text-align:center;
    161.   font-size: 12px;
    162.   color: #eee;
    163. }
    164. .img{
    165.   display: block;
    166.   margin: 0 auto;
    167.   width: 200px;
    168.   height: 200px;
    169.   background-size: 100% 100% !important;
    170. }
    171. .avater{
    172.   width: 150px;
    173.   height: 150px;
    174.   margin: 40px auto 10px;
    175.   border-radius: 50%;
    176.   display: block;
    177.   background:url(666.jpg);
    178.   background-size: 100%;
    179.   border: 5px solid #fff;
    180. }
    181. .username{
    182.   display: block;
    183.   text-align:center;
    184.   font-size: 30px;
    185.   color: #fff;
    186.   margin-bottom: 10px;
    187. }
    188.  
    189. .hobby{
    190.  display: flex;
    191.   margin: 60px auto 0;
    192.   width: 200px;
    193.   height: 200px; 
    194. }
    195. .hobby img{
    196.   width: 50px;
    197.   height: 50px;
    198. }
    步骤 4：JavaScript 动画

    通过JavaScript代码来实现背景轮播效果和3D卡片翻转效果。

    1.  // 背景图像数组
    2.         const backgroundImages = ['bk1.jpg', 'bk2.jpg', 'bk3.jpg', 'bk4.jpg']; 
    3.         let currentIndex = 0; // 当前背景图像的索引
    4.  
    5.         // 函数用于更改背景图像
    6.         function changeBackgroundImage() {
    7.             document.body.style.backgroundImage = `url('${backgroundImages[currentIndex]}')`;
    8.             currentIndex = (currentIndex + 1) % backgroundImages.length;
    9.         }
    10.  
    11.         // 初始更改背景图像
    12.         changeBackgroundImage();
    13.  
    14.         // 设置定时器，每4秒更改一次背景图像
    15.         setInterval(changeBackgroundImage, 4000);
    16.  
    17.  
    18.  
    19.         ScreenAuto();
    20. window.onresize = () => ScreenAuto();
    21. function ScreenAuto() {
    22.   const scale = document.documentElement.clientHeight / 960;
    23.   document.querySelector(
    24.     "#wrapper"
    25.   ).style.transform = `scale(${scale}) translate(-50%)`;
    26. }
    27. let rotateList = [
    28.   "rotateX(-90deg)",
    29.   "rotateX(90deg)",
    30.   "rotateY(90deg)",
    31.   "rotateY(-90deg)",
    32.   "",
    33.   "rotateX(-180deg)",
    34. ];
    35. let range = document.getElementsByClassName("range")[0];
    36. let show = document.getElementsByClassName("show")[0];
    37. let btn = document.getElementsByClassName("btn")[0];
    38. let card= document.getElementsByClassName("card")[0];
    39. btn.addEventListener('click',()=>{
    40.   btn.style.display = 'none'
    41.   range.style.display = 'block'
    42.   card.style.opacity = '1'
    43.   show.style.transform = rotateList[0];
    44. })
    45. function change() {
    46.   show.style.transform = rotateList[range.value];
    47. }

    项目源码

    您可以在GitHub上找到完整的项目源码，点击这里查看。

    没有GitHub也没关系，我已经将所有代码都放在上面的文章里面了，直接用就行，想换图片的也可以找自己喜欢的图片加以改动。

    知识点介绍 （大佬请绕道）

    在这个项目中，我们涉及了许多前端开发的核心知识点，包括：

    • HTML 结构的构建
    • CSS 样式的设计
    • JavaScript 动画的实现
    • 背景图轮播的逻辑
    • CSS 3D变换的使用

    HTML 结构的构建

    HTML（HyperText Markup Language）是用于构建网页结构的标记语言。在我们的项目中，HTML被用于定义页面的内容和结构。

    • HTML 文档结构： HTML文档通常由, , , 和 等标签组成。 声明定义了文档类型， 标签包含整个文档内容， 标签包含文档的元信息，如标题和样式表链接，而 标签包含网页内容。
    1. html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>My Personal Cardtitle>
    6. head>
    7. <body>
    8.     
    9. body>
    10. html>

    HTML 元素： 在 标签内，我们可以使用各种HTML元素来创建网页的内容，如标题、段落、图像、链接等。

    1. <h1>欢迎来到我的个人名片h1>
    2. <p>我是一个前端开发者。p>
    3. <img src="my-photo.jpg" alt="我的照片">
    4. <a href="https://example.com">查看我的项目a>

    2. CSS 样式的设计

    CSS（Cascading Style Sheets）用于定义网页的样式和布局。在我们的项目中，CSS被用于美化和布局网页元素。

    • 样式选择器： CSS通过选择器来选择要应用样式的元素。例如，要选择所有段落元素，可以使用 p 选择器。
    1. p {
    2.     color: #333; /* 文字颜色 */
    3.     font-size: 16px; /* 字体大小 */
    4.     margin: 10px 0; /* 外边距 */
    5. }

     样式属性： CSS属性定义了元素的外观，如颜色、字体、间距等。

    1. h1 {
    2.     color: #FF5733; /* 标题文字颜色 */
    3.     font-size: 24px; /* 标题字体大小 */
    4. }

    布局和定位： CSS还可以用于创建布局和定位元素，如使用 margin 和 padding 控制元素之间的间距，或使用 position 和 float 属性控制元素的位置。

    1. #my-photo {
    2.     width: 150px;
    3.     height: 150px;
    4.     border-radius: 50%; /* 圆形图片 */
    5. }

    3. JavaScript 动画的实现

    JavaScript是一种编程语言，可以用于为网页添加交互性和动画效果。在我们的项目中，JavaScript用于实现背景图像轮播和卡片翻转效果。

    • DOM 操作： JavaScript可以用于选择、修改和操作HTML元素，例如使用 document.getElementById() 来选择特定的元素。
    1. const myPhoto = document.getElementById('my-photo');
    2. myPhoto.src = 'new-photo.jpg';

    定时器： JavaScript的 setTimeout() 和 setInterval() 函数可以用于在一段时间后执行代码，实现动画效果。

    1. function changeBackground() {
    2.     // 更改背景图像的代码
    3. }
    4. setInterval(changeBackground, 4000);

    4. 背景图轮播的逻辑

    背景图像轮播是一种常见的网页效果，通过定时更改background-image属性来实现。每隔一段时间，我们更改背景图像的URL，从而创造出图像轮播的效果。

    1. const backgroundImages = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
    2. let currentIndex = 0;
    3.  
    4. function changeBackgroundImage() {
    5.     document.body.style.backgroundImage = `url('${backgroundImages[currentIndex]}')`;
    6.     currentIndex = (currentIndex + 1) % backgroundImages.length;
    7. }
    8. setInterval(changeBackgroundImage, 4000);

    5. CSS 3D变换的使用

    CSS 3D变换允许元素在3D空间中旋转和移动，创建出令人印象深刻的3D效果。

    • transform 属性： 使用 transform 属性可以将元素移动、旋转和缩放。
    1. .cube {
    2.     width: 100px;
    3.     height: 100px;
    4.     transform: rotateX(45deg) rotateY(45deg);
    5. }

    透视性： 使用 perspective 属性可以设置3D变换的观看距离，影响3D效果的强弱。

    1. .card {
    2.     perspective: 1000px;
    3. }

    3D变换： 使用 rotateX(), rotateY(), rotateZ(), translateX(), translateY()等函数来进行3D变换。

    1. .is_top {
    2.     transform: rotateX(90deg) translateZ(100px);
    3. }

    结语

    通过这个项目，我们学习了如何创建一个具有背景轮播和3D卡片翻转效果的个人名片网页。这不仅仅是一个有趣的项目，还是学习前端开发的绝佳方式。希望这篇博客对您有所帮助，如果您有任何问题或建议，请随时留言。

     🌌点击下方个人名片，交流会更方便哦~（欢迎到博主主页加入我们的 CodeCrafters联盟一起交流学习）↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓   

  • 相关阅读:
    Linux —— 网络基础（一）
    LSTMviz配置
    应用ceph块存储(ceph-13.2.10)
    【微软漏洞分析】MS10-015 Windows 内核异常处理程序漏洞(CVE-2010-0232)
    leetcode 671. 二叉树中第二小的节点(java)
    paramiko 3
    Word控件Spire.Doc 【页面设置】教程(10) ；通过 Spire.Doc 在 Word 文档的不同部分添加页码
    JavaScript学习总结（对象）
    ABP微服务系列学习-搭建自己的微服务结构（一）
    资源道具化
  • 原文地址：https://blog.csdn.net/VLOKL/article/details/134084979