赞
踩
目录
点击下面链接(第一次打开可能会有些慢)
在本篇博客中,我们将学习如何创建一个具有多个功能的个人名片网页。这个项目包括背景轮播效果和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>
使用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;
- }
通过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(HyperText Markup Language)是用于构建网页结构的标记语言。在我们的项目中,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>
CSS(Cascading Style Sheets)用于定义网页的样式和布局。在我们的项目中,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%; /* 圆形图片 */
- }
JavaScript是一种编程语言,可以用于为网页添加交互性和动画效果。在我们的项目中,JavaScript用于实现背景图像轮播和卡片翻转效果。
document.getElementById()
来选择特定的元素。- const myPhoto = document.getElementById('my-photo');
- myPhoto.src = 'new-photo.jpg';
定时器: JavaScript的 setTimeout()
和 setInterval()
函数可以用于在一段时间后执行代码,实现动画效果。
- function changeBackground() {
- // 更改背景图像的代码
- }
- setInterval(changeBackground, 4000);
背景图像轮播是一种常见的网页效果,通过定时更改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);
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卡片翻转效果的个人名片网页。这不仅仅是一个有趣的项目,还是学习前端开发的绝佳方式。希望这篇博客对您有所帮助,如果您有任何问题或建议,请随时留言。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。