創(chuàng)建一個具有背景輪播和3D卡片翻轉(zhuǎn)效果的個人名片網(wǎng)頁

這篇具有很好參考價值的文章主要介紹了創(chuàng)建一個具有背景輪播和3D卡片翻轉(zhuǎn)效果的個人名片網(wǎng)頁。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報違法"按鈕提交疑問。

項(xiàng)目展示

圖片展示

前言

項(xiàng)目目標(biāo)

步驟 3：CSS 樣式

步驟 4：JavaScript 動畫

項(xiàng)目源碼

知識點(diǎn)介紹?（大佬請繞道）

HTML 結(jié)構(gòu)的構(gòu)建

2. CSS 樣式的設(shè)計

3. JavaScript 動畫的實(shí)現(xiàn)

4. 背景圖輪播的邏輯

5. CSS 3D變換的使用

結(jié)語

項(xiàng)目展示

點(diǎn)擊下面鏈接（第一次打開可能會有些慢）

點(diǎn)擊進(jìn)入個人名片（手機(jī)版）

圖片展示

前言

在本篇博客中，我們將學(xué)習(xí)如何創(chuàng)建一個具有多個功能的個人名片網(wǎng)頁。這個項(xiàng)目包括背景輪播效果和3D卡片翻轉(zhuǎn)效果，適合前端開發(fā)初學(xué)者。

項(xiàng)目目標(biāo)

在開始之前，我們先明確一下這個項(xiàng)目的主要目標(biāo)：

創(chuàng)建一個響應(yīng)式的網(wǎng)頁，可以適應(yīng)不同屏幕大小。
實(shí)現(xiàn)一個背景圖像輪播效果，每隔一段時間切換一張背景圖。
使用CSS 3D變換來創(chuàng)建一個具有多個面的卡片效果。

項(xiàng)目目標(biāo)

在開始之前，我們先明確一下這個項(xiàng)目的主要目標(biāo)：

創(chuàng)建一個響應(yīng)式的網(wǎng)頁，可以適應(yīng)不同屏幕大小。
實(shí)現(xiàn)一個背景圖像輪播效果，每隔一段時間切換一張背景圖。
使用CSS 3D變換來創(chuàng)建一個具有多個面的卡片效果。

<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">命運(yùn)之光</span>
      <span class="content">其實(shí)我的夢想是拯救世界</span>
    </div>
    <div class="is_bottom">
      <span class="title">個人介紹</span>
      <span class="content">你好，我是命運(yùn)之光，一個熱愛生活和技術(shù)的程序員。我喜歡挑戰(zhàn)自己，不斷學(xué)習(xí)新知識和技能。除了編程，我還喜歡旅行、閱讀和嘗試新鮮事物。我的座右銘是“活出自己想要的樣子”，我相信只要我們敢于追求自己的夢想，就能夠創(chuàng)造屬于自己的精彩人生。


      </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來設(shè)計網(wǎng)頁的樣式，包括背景圖、按鈕、卡片等的樣式。

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; /* 設(shè)置容器寬度，可以根據(jù)需要調(diào)整 */
            height: 960px; /* 設(shè)置容器高度，可以根據(jù)需要調(diào)整 */
            background-size: cover; /* 設(shè)置背景圖像適應(yīng)屏幕，保持縱橫比 */
            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; /* 添加這一行設(shè)置透明度為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:"人生苦短，一天當(dāng)作兩天卷";
	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代碼來實(shí)現(xiàn)背景輪播效果和3D卡片翻轉(zhuǎn)效果。

 // 背景圖像數(shù)組
        const backgroundImages = ['bk1.jpg', 'bk2.jpg', 'bk3.jpg', 'bk4.jpg']; 
        let currentIndex = 0; // 當(dāng)前背景圖像的索引

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

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

        // 設(shè)置定時器，每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];
}

項(xiàng)目源碼

您可以在GitHub上找到完整的項(xiàng)目源碼，點(diǎn)擊這里查看。

創(chuàng)建一個具有背景輪播和3D卡片翻轉(zhuǎn)效果的個人名片網(wǎng)頁,# web網(wǎng)頁制作,# 創(chuàng)意網(wǎng)頁,Web前端,3d,1024程序員節(jié),前端,個人介紹,css,HTML

沒有GitHub也沒關(guān)系，我已經(jīng)將所有代碼都放在上面的文章里面了，直接用就行，想換圖片的也可以找自己喜歡的圖片加以改動。

知識點(diǎn)介紹?（大佬請繞道）

在這個項(xiàng)目中，我們涉及了許多前端開發(fā)的核心知識點(diǎn)，包括：

HTML 結(jié)構(gòu)的構(gòu)建
CSS 樣式的設(shè)計
JavaScript 動畫的實(shí)現(xiàn)
背景圖輪播的邏輯
CSS 3D變換的使用

HTML 結(jié)構(gòu)的構(gòu)建

HTML（HyperText Markup Language）是用于構(gòu)建網(wǎng)頁結(jié)構(gòu)的標(biāo)記語言。在我們的項(xiàng)目中，HTML被用于定義頁面的內(nèi)容和結(jié)構(gòu)。

HTML 文檔結(jié)構(gòu)： HTML文檔通常由<!DOCTYPE>, <html>, <head>, 和 <body>等標(biāo)簽組成。<!DOCTYPE> 聲明定義了文檔類型，<html> 標(biāo)簽包含整個文檔內(nèi)容，<head> 標(biāo)簽包含文檔的元信息，如標(biāo)題和樣式表鏈接，而 <body> 標(biāo)簽包含網(wǎng)頁內(nèi)容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Personal Card</title>
</head>
<body>
    <!-- 內(nèi)容將在這里插入 -->
</body>
</html>

HTML 元素： 在 <body> 標(biāo)簽內(nèi)，我們可以使用各種HTML元素來創(chuàng)建網(wǎng)頁的內(nèi)容，如標(biāo)題、段落、圖像、鏈接等。

<h1>歡迎來到我的個人名片</h1>
<p>我是一個前端開發(fā)者。</p>
<img src="my-photo.jpg" alt="我的照片">
<a >查看我的項(xiàng)目</a>

2. CSS 樣式的設(shè)計

CSS（Cascading Style Sheets）用于定義網(wǎng)頁的樣式和布局。在我們的項(xiàng)目中，CSS被用于美化和布局網(wǎng)頁元素。

樣式選擇器： CSS通過選擇器來選擇要應(yīng)用樣式的元素。例如，要選擇所有段落元素，可以使用 p 選擇器。

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

?樣式屬性： CSS屬性定義了元素的外觀，如顏色、字體、間距等。

h1 {
    color: #FF5733; /* 標(biāo)題文字顏色 */
    font-size: 24px; /* 標(biāo)題字體大小 */
}

布局和定位： CSS還可以用于創(chuàng)建布局和定位元素，如使用 margin 和 padding 控制元素之間的間距，或使用 position 和 float 屬性控制元素的位置。

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

3. JavaScript 動畫的實(shí)現(xiàn)

JavaScript是一種編程語言，可以用于為網(wǎng)頁添加交互性和動畫效果。在我們的項(xiàng)目中，JavaScript用于實(shí)現(xiàn)背景圖像輪播和卡片翻轉(zhuǎn)效果。

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

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

定時器： JavaScript的 setTimeout() 和 setInterval() 函數(shù)可以用于在一段時間后執(zhí)行代碼，實(shí)現(xiàn)動畫效果。

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

4. 背景圖輪播的邏輯

背景圖像輪播是一種常見的網(wǎng)頁效果，通過定時更改background-image屬性來實(shí)現(xiàn)。每隔一段時間，我們更改背景圖像的URL，從而創(chuàng)造出圖像輪播的效果。

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空間中旋轉(zhuǎn)和移動，創(chuàng)建出令人印象深刻的3D效果。

transform 屬性： 使用 transform 屬性可以將元素移動、旋轉(zhuǎn)和縮放。

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

透視性： 使用 perspective 屬性可以設(shè)置3D變換的觀看距離，影響3D效果的強(qiáng)弱。

.card {
    perspective: 1000px;
}

3D變換： 使用 rotateX(), rotateY(), rotateZ(), translateX(), translateY()等函數(shù)來進(jìn)行3D變換。

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

結(jié)語

通過這個項(xiàng)目，我們學(xué)習(xí)了如何創(chuàng)建一個具有背景輪播和3D卡片翻轉(zhuǎn)效果的個人名片網(wǎng)頁。這不僅僅是一個有趣的項(xiàng)目，還是學(xué)習(xí)前端開發(fā)的絕佳方式。希望這篇博客對您有所幫助，如果您有任何問題或建議，請隨時留言。

???點(diǎn)擊下方個人名片，交流會更方便哦~（歡迎到博主主頁加入我們的 CodeCrafters聯(lián)盟一起交流學(xué)習(xí)）↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓?↓ ↓ ↓ ↓ ↓ ↓ ↓???文章來源地址http://www.zghlxwxcb.cn/news/detail-715208.html

到了這里，關(guān)于創(chuàng)建一個具有背景輪播和3D卡片翻轉(zhuǎn)效果的個人名片網(wǎng)頁的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！