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

这篇具有很好参考价值的文章主要介绍了创建一个具有背景轮播和3D卡片翻转效果的个人名片网页。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

创建一个具有背景轮播和3D卡片翻转效果的个人名片网页,# web网页制作,# 创意网页,Web前端,3d,1024程序员节,前端,个人介绍,css,HTML

目录

项目展示

图片展示

前言

项目目标

项目目标

步骤 3:CSS 样式

步骤 4:JavaScript 动画

项目源码

知识点介绍 (大佬请绕道)

HTML 结构的构建

2. CSS 样式的设计

3. JavaScript 动画的实现

4. 背景图轮播的逻辑

5. CSS 3D变换的使用

结语


项目展示

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

点击进入个人名片(手机版)

图片展示

创建一个具有背景轮播和3D卡片翻转效果的个人名片网页,# web网页制作,# 创意网页,Web前端,3d,1024程序员节,前端,个人介绍,css,HTML创建一个具有背景轮播和3D卡片翻转效果的个人名片网页,# web网页制作,# 创意网页,Web前端,3d,1024程序员节,前端,个人介绍,css,HTML创建一个具有背景轮播和3D卡片翻转效果的个人名片网页,# web网页制作,# 创意网页,Web前端,3d,1024程序员节,前端,个人介绍,css,HTML创建一个具有背景轮播和3D卡片翻转效果的个人名片网页,# web网页制作,# 创意网页,Web前端,3d,1024程序员节,前端,个人介绍,css,HTML

前言

在本篇博客中,我们将学习如何创建一个具有多个功能的个人名片网页。这个项目包括背景轮播效果和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上找到完整的项目源码,点击这里查看。

创建一个具有背景轮播和3D卡片翻转效果的个人名片网页,# web网页制作,# 创意网页,Web前端,3d,1024程序员节,前端,个人介绍,css,HTML

没有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还可以用于创建布局和定位元素,如使用 marginpadding 控制元素之间的间距,或使用 positionfloat 属性控制元素的位置。

#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卡片翻转效果的个人名片网页。这不仅仅是一个有趣的项目,还是学习前端开发的绝佳方式。希望这篇博客对您有所帮助,如果您有任何问题或建议,请随时留言。

创建一个具有背景轮播和3D卡片翻转效果的个人名片网页,# web网页制作,# 创意网页,Web前端,3d,1024程序员节,前端,个人介绍,css,HTML

 🌌点击下方个人名片,交流会更方便哦~(欢迎到博主主页加入我们的 CodeCrafters联盟一起交流学习↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓   文章来源地址https://www.toymoban.com/news/detail-715208.html

到了这里,关于创建一个具有背景轮播和3D卡片翻转效果的个人名片网页的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包