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

命运之光

发布于 2024-03-20 13:37:17

960

发布于 2024-03-20 13:37:17

文章被收录于专栏：我在本科期间写的文章我在本科期间写的文章

项目展示

点击下面链接（第一次打开可能会有些慢）点击进入个人名片（手机版）

图片展示

前言

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

项目目标

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

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

项目目标

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

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

<div id="wrapper">
<div class="btn"></div>
<input class="range" type="range" min="0" max="5" step="1" value="0" oninput="change()" onchange="change()" />
<div class="card">
  <div class="cube show">
    <div class="is_top">
      <span class="avater"></span>
      <span class="username">命运之光</span>
      <span class="content">其实我的梦想是拯救世界</span>
    </div>
    <div class="is_bottom">
      <span class="title">个人介绍</span>
      <span class="content">你好，我是命运之光，一个热爱生活和技术的程序员。我喜欢挑战自己，不断学习新知识和技能。除了编程，我还喜欢旅行、阅读和尝试新鲜事物。我的座右铭是“活出自己想要的样子”，我相信只要我们敢于追求自己的梦想，就能够创造属于自己的精彩人生。


      </span>
    </div>
    <div class="is_left">
      <span class="title">最近在看(德芙)</span>
      <span class="img" style="background:url(222.png)"></span>
    </div>
    <div class="is_right">
      <span class="title">最近在玩（原神）</span>
      <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>
      
    </div>
    <div class="is_front">
      <span class="title">兴趣爱好</span>
      <span class="hobby">
        <img src="https://pic.imgdb.cn/item/63c2d285be43e0d30eeb5146.png"  />
        <img src="https://pic.imgdb.cn/item/63c2d285be43e0d30eeb513b.png"  />
        <img src="https://pic.imgdb.cn/item/63c2d285be43e0d30eeb512d.png"  />
        <img src="https://pic.imgdb.cn/item/63c2d285be43e0d30eeb5122.png"  />
      </span>
    </div>
    <div class="is_back">
      <span class="title">Hello World</span>
      <span class="img" style="background:url(https://pic.imgdb.cn/item/63c2d710be43e0d30ef68b9c.gif)"></span>
    </div>
  </div>
</div>
</div>

步骤 3：CSS 样式

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

body {
            margin: 0;
            padding: 0;
            background-size: cover;
            background-position: center;
            background-image: url('bk1.jpg'); /* 使用 bk1.jpg 作为背景图像 */
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-image 1s ease-in-out;
        }

        #wrapper {
            width: 590px; /* 设置容器宽度，可以根据需要调整 */
            height: 960px; /* 设置容器高度，可以根据需要调整 */
            background-size: cover; /* 设置背景图像适应屏幕，保持纵横比 */
            background-position: -55px;
            transform-origin: 0 0;
            position: absolute;
            left: 50%;
            transform: translateX(-50%); /* 将容器水平居中 */
            margin-top: 450px; /* 增加上边距以垂直居中 */
        }
.range{
  position: absolute;
  width: 300px;
  left: calc(50% - 150px);
  bottom: 190px;
  display: none;
}
.btn {
  cursor: pointer;
  position: absolute;
  left: calc(50% - 50px);
  bottom: 150px;
  width: 100px;
  height: 100px;
  background: url(555.png)
    no-repeat center/cover;
 /* 其他样式 */
  background: url(555.png) no-repeat center/cover;
  opacity: 0.8; /* 添加这一行设置透明度为0.6 */
}
.btn::after {
  content: "";
  width: 100px;
  height: 100px;
  position: absolute;
  background: url(555.png)
    no-repeat center/cover;
  transform-origin: center;
  transform: scale(1);
  animation: scale 3s infinite;
}
@keyframes scale {
  0% {
    transform: scale(0.4);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
.btn::before {
	font-size:14px;
  text-align: center;
	color:#ccc;
	content:"人生苦短，一天当作两天卷";
	height:20px;
	width:180px;
	background-color:#fff;
	position:absolute;
	left:-40px;
  top: -30px;
	border-radius:10px;
	opacity:0;
	transition:all .5s;
}
.btn:hover:before {
	opacity:1;
	transition:all 1s;
}

.card{
  width: 300px;
  height:300px;
  perspective: 1000px;
  margin: 200px auto;
  opacity: 0;
  transition: all 1s ease-in;
}
.cube{
  width:100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform ease 1s;
}
.cube div{
    border: 2px solid #5968be;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(255, 161, 161, 0.5);
    background-size: 100% 100%;
}

.is_top {
  background: red;
  transform: rotateX(90deg) translateZ(150px);
}
.is_bottom {
  background: blue;
  transform: rotateX(-90deg) translateZ(150px);
}
.is_left {
  background: green;
  transform: rotateY(-90deg) translateZ(150px);
}
.is_right {
  background: pink;
  transform: rotateY(90deg) translateZ(150px);
}
.is_front {
  background: yellow;
  transform: translateZ(150px);
}
.is_back {
  background: orange;
  transform: rotateX(-180deg) translateZ(150px);
}
.title{
  color: #fff;
  font-size: 22px;
  display: block;
  margin-top: 15px;
  margin-bottom: 20px;
  text-align: center;
}
.title::before{
  display: block;
  position: absolute;
  left:118px;
  top: 50px;
  content: '';
  width: 70px;
  height: 3px;
  background-color: #fff;
}
.content{
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0 30px;
  text-align:center;
  font-size: 12px;
  color: #eee;
}
.img{
  display: block;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  background-size: 100% 100% !important;
}
.avater{
  width: 150px;
  height: 150px;
  margin: 40px auto 10px;
  border-radius: 50%;
  display: block;
  background:url(666.jpg);
  background-size: 100%;
  border: 5px solid #fff;
}
.username{
  display: block;
  text-align:center;
  font-size: 30px;
  color: #fff;
  margin-bottom: 10px;
}

.hobby{
 display: flex;
  margin: 60px auto 0;
  width: 200px;
  height: 200px; 
}
.hobby img{
  width: 50px;
  height: 50px;
}

步骤 4：JavaScript 动画

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

 // 背景图像数组
        const backgroundImages = ['bk1.jpg', 'bk2.jpg', 'bk3.jpg', 'bk4.jpg']; 
        let currentIndex = 0; // 当前背景图像的索引

        // 函数用于更改背景图像
        function changeBackgroundImage() {
            document.body.style.backgroundImage = `url('${backgroundImages[currentIndex]}')`;
            currentIndex = (currentIndex + 1) % backgroundImages.length;
        }

        // 初始更改背景图像
        changeBackgroundImage();

        // 设置定时器，每4秒更改一次背景图像
        setInterval(changeBackgroundImage, 4000);



        ScreenAuto();
window.onresize = () => ScreenAuto();
function ScreenAuto() {
  const scale = document.documentElement.clientHeight / 960;
  document.querySelector(
    "#wrapper"
  ).style.transform = `scale(${scale}) translate(-50%)`;
}
let rotateList = [
  "rotateX(-90deg)",
  "rotateX(90deg)",
  "rotateY(90deg)",
  "rotateY(-90deg)",
  "",
  "rotateX(-180deg)",
];
let range = document.getElementsByClassName("range")[0];
let show = document.getElementsByClassName("show")[0];
let btn = document.getElementsByClassName("btn")[0];
let card= document.getElementsByClassName("card")[0];
btn.addEventListener('click',()=>{
  btn.style.display = 'none'
  range.style.display = 'block'
  card.style.opacity = '1'
  show.style.transform = rotateList[0];
})
function change() {
  show.style.transform = rotateList[range.value];
}

项目源码

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

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

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

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

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

HTML 结构的构建

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

HTML 文档结构： HTML文档通常由<!DOCTYPE>, <html>, <head>, 和 <body>等标签组成。<!DOCTYPE> 声明定义了文档类型，<html> 标签包含整个文档内容，<head> 标签包含文档的元信息，如标题和样式表链接，而 <body> 标签包含网页内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Personal Card</title>
</head>
<body>
    <!-- 内容将在这里插入 -->
</body>
</html>

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

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

2. CSS 样式的设计

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

样式选择器： CSS通过选择器来选择要应用样式的元素。例如，要选择所有段落元素，可以使用 p 选择器。

p {
    color: #333; /* 文字颜色 */
    font-size: 16px; /* 字体大小 */
    margin: 10px 0; /* 外边距 */
}

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

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

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

#my-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* 圆形图片 */
}

3. JavaScript 动画的实现

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

DOM 操作： JavaScript可以用于选择、修改和操作HTML元素，例如使用 document.getElementById() 来选择特定的元素。

const myPhoto = document.getElementById('my-photo');
myPhoto.src = 'new-photo.jpg';

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

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

4. 背景图轮播的逻辑

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

const backgroundImages = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let currentIndex = 0;

function changeBackgroundImage() {
    document.body.style.backgroundImage = `url('${backgroundImages[currentIndex]}')`;
    currentIndex = (currentIndex + 1) % backgroundImages.length;
}
setInterval(changeBackgroundImage, 4000);

5. CSS 3D变换的使用

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

transform 属性： 使用 transform 属性可以将元素移动、旋转和缩放。

.cube {
    width: 100px;
    height: 100px;
    transform: rotateX(45deg) rotateY(45deg);
}

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

.card {
    perspective: 1000px;
}

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

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

结语

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-11-04，如有侵权请联系 cloudcommunity@tencent.com 删除

布局

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度