Table of Contents
Project display
image display
Preface
Project Objectives
Project Objectives
Step 3: CSS Styles
Step 4: JavaScript animation
Project source code
Introduction to knowledge points (big guys, please take a detour)
Construction of HTML structure
2. CSS style design
3. Implementation of JavaScript animation
4. The logic of background image carousel
5. Use of CSS 3D transformation
Conclusion
Project display
Click the link below (it may be a little slow to open for the first time)
Click to enter personal business card (mobile version)
Picture display
Foreword
In this blog, we will learn how to create a personal business card web page with multiple functions. This project includes background carousel effects and 3D card flip effects, suitable for front-end development beginners.
Project Goal
Before we begin, let’s clarify the main goals of this project:
- Create a responsive web page that can adapt to different screen sizes.
- Implement a background image carousel effect and switch a background image every once in a while.
- Use CSS 3D transforms to create a card effect with multiple sides.
Project goals
Before we begin, let’s clarify the main goals of this project:
- Create a responsive web page that can adapt to different screen sizes.
- Implement a background image carousel effect and switch a background image every once in a while.
- Use CSS 3D transforms to create a card effect with multiple sides.
<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">Light of Destiny</span>
<span class="content">Actually, my dream is to save the world</span>
</div>
<div class="is_bottom">
<span class="title">Personal introduction</span>
<span class="content">Hello, I am Destiny Guang, a programmer who loves life and technology. I like to challenge myself and constantly learn new knowledge and skills. Besides programming, I also enjoy traveling, reading, and trying new things. My motto is "Live how you want." I believe that as long as we dare to pursue our dreams, we can create a wonderful life of our own.
</span>
</div>
<div class="is_left">
<span class="title">Watching recently (Dove)</span>
<span class="img" style="background:url(222.png)"></span>
</div>
<div class="is_right">
<span class="title">Playing recently (Genshin Impact)</span>
<span class="img" style="background:url(https://img1.baidu.com/it/u=2692659307,1253870257 & amp;fm=253 & amp;fmt=auto & amp;app =138 & amp;f=JPEG?w=500 & amp;h=590)"></span>
</div>
<div class="is_front">
<span class="title">Hobbies</span>
<span class="hobby">
<img src="//i2.wp.com/pic.imgdb.cn/item/63c2d285be43e0d30eeb5146.png" />
<img src="//i2.wp.com/pic.imgdb.cn/item/63c2d285be43e0d30eeb513b.png" />
<img src="//i2.wp.com/pic.imgdb.cn/item/63c2d285be43e0d30eeb512d.png" />
<img src="//i2.wp.com/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>
Step 3: CSS Style
Use CSS to design web page styles, including background images, buttons, cards, etc.
body {
margin: 0;
padding: 0;
background-size: cover;
background-position: center;
background-image: url('bk1.jpg'); /* Use bk1.jpg as the background image */
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
transition: background-image 1s ease-in-out;
}
#wrapper {
width: 590px; /* Set the container width, which can be adjusted as needed */
height: 960px; /* Set the container height, which can be adjusted as needed */
background-size: cover; /* Set the background image to fit the screen, maintaining the aspect ratio */
background-position: -55px;
transform-origin: 0 0;
position: absolute;
left: 50%;
transform: translateX(-50%); /* Center the container horizontally */
margin-top: 450px; /* Increase top margin to center vertically */
}
.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;
/* Other styles */
background: url(555.png) no-repeat center/cover;
opacity: 0.8; /* Add this line to set the transparency to 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:"Life is too short, one day counts as two days";
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;
}
Step 4: JavaScript Animation
The background carousel effect and 3D card flip effect are realized through JavaScript code.
//Background image array
const backgroundImages = ['bk1.jpg', 'bk2.jpg', 'bk3.jpg', 'bk4.jpg'];
let currentIndex = 0; // Index of the current background image
// Function used to change the background image
function changeBackgroundImage() {
document.body.style.backgroundImage = `url('${backgroundImages[currentIndex]}')`;
currentIndex = (currentIndex + 1) % backgroundImages.length;
}
//Initially change the background image
changeBackgroundImage();
//Set a timer to change the background image every 4 seconds
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];
}
Project source code
You can find the complete project source code on GitHub, click here to view.
It doesn’t matter if you don’t have GitHub. I’ve put all the code in the article above. Just use it directly. If you want to change the picture, you can also find the picture you like and modify it.
Introduction to knowledge points (Boss, please take a detour)
In this project, we covered many core knowledge points of front-end development, including:
- Construction of HTML structure
- CSS style design
- Implementation of JavaScript animation
- The logic of background image carousel
- Use of CSS 3D transforms
Construction of HTML structure
HTML (HyperText Markup Language) is a markup language used to build the structure of web pages. In our project, HTML is used to define the content and structure of the page.
- HTML document structure: HTML documents usually consist of
,,, and It consists ofand other tags. Thedeclaration defines the document type, thetag contains the entire document content, and thetag contains the meta-information of the document. Such as headings and style sheet links, while thetag contains the content of the web page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Personal Card</title>
</head>
<body>
<!-- Content will be inserted here -->
</body>
</html>
HTML elements: Within the tag, we can use various HTML elements to create the content of the web page, such as titles, paragraphs, images, links, etc.
<h1>Welcome to my personal business card</h1> <p>I'm a front-end developer.</p> <img src="my-photo.jpg" alt="my photo"> <a href="https://example.com">View my projects</a>
2. CSS style design
CSS (Cascading Style Sheets) is used to define the style and layout of web pages. In our project, CSS is used to beautify and layout web elements.
- Style Selector: CSS uses selectors to select elements to which styles should be applied. For example, to select all paragraph elements, use the
pselector.
p {
color: #333; /* text color */
font-size: 16px; /* font size */
margin: 10px 0; /* Margin */
}
Style Properties: CSS properties define the appearance of elements, such as color, font, spacing, etc.
h1 {
color: #FF5733; /* Title text color */
font-size: 24px; /* Title font size */
}
Layout and positioning: CSS can also be used to create layout and positioning elements, such as using margin and padding to control the spacing between elements, or using The position and float attributes control the position of an element.
#my-photo {
width: 150px;
height: 150px;
border-radius: 50%; /* circular image */
}
3. Implementation of JavaScript animation
JavaScript is a programming language that can be used to add interactivity and animation to web pages. In our project, JavaScript is used to implement the background image carousel and card flip effects.
- DOM manipulation: JavaScript can be used to select, modify and manipulate HTML elements, such as using
document.getElementById()to select specific elements.
const myPhoto = document.getElementById('my-photo');
myPhoto.src = 'new-photo.jpg';
Timer: JavaScript’s setTimeout() and setInterval() functions can be used to execute code after a period of time to achieve animation effects.
function changeBackground() {
// Code to change the background image
}
setInterval(changeBackground, 4000);
4. The logic of background image carousel
Background image carousel is a common web page effect, which is achieved by regularly changing the background-image attribute. Every once in a while, we change the URL of the background image, creating the effect of a carousel of images.
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. Use of CSS 3D transformation
CSS 3D transforms allow elements to rotate and move in 3D space, creating impressive 3D effects.
transformattribute: Use thetransformattribute to move, rotate, and scale elements.
.cube {
width: 100px;
height: 100px;
transform: rotateX(45deg) rotateY(45deg);
}
Perspective: Use the perspective attribute to set the viewing distance of 3D transformation, which affects the strength of the 3D effect.
.card {
perspective: 1000px;
}
3D transformation: Use rotateX(), rotateY(), rotateZ(), translateX() , translateY() and other functions to perform 3D transformation.
.is_top {
transform: rotateX(90deg) translateZ(100px);
}
Conclusion
Through this project, we learned how to create a personal business card webpage with background carousel and 3D card flip effect. Not only is this a fun project, it’s a great way to learn front-end development. I hope this blog was helpful, and if you have any questions or suggestions, please feel free to leave a message.
Click on the personal business card below to make communication more convenient~ (Welcome to the blogger’s homepage to join our CodeCrafters alliance to communicate and learn together) strong>↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓