Look at the effect, move ~ :
Implementation:
1. Define the label. Card is the bottom box, and.card2 is the box that presents the card effect. :
<div class="card">
<div class="card2">
<img src="img/haha.gif" alt="haha">
<h2>Aurora Borealis night</h2>
<p class="txt">The aurora borealis.</p>
<div class="font">
<span> </span>
<span> </span>
<span> </span>
</div>
</div>
</div>
Copy the code
2. Define the basic style of the underlying box.card:
.card {
position: relative;
width: 250px;
height: 300px;
transform-style: preserve-3d;
cursor: pointer;
}
Copy the code
position: relative; Relative positioning. transform-style: preserve-3d; Its children get the 3D position. cursor: pointer; Mouse style changed to small hand.
3. Define the basic style of card2:
.card2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
border-radius: 15px;
transition: all 0.2 s;
transform-style: preserve-3d;
box-shadow: inset 0 0 30px rgb(83.83.82);
}
Copy the code
position: absolute; Absolute positioning. background-color: transparent; The background color is transparent. border-radius: 15px; The radians of the corners. Transiton: all 0.2s; Transition effect. The transform – style: preserve – 3 d; Child element to get the 3D position. Box-shadow: Indicates the inner shadow.
4. Define the basic style of your profile picture:
.card2 img {
position: absolute;
top: 30px;
left: 75px;
width: 100px;
height: 100px;
border-radius: 50%;
transform: translateZ(50px);
box-shadow: 0 0 10px rgb(83.83.83);
}
Copy the code
Position: Absolute position. Transform: translateZ (50px); Move the image 50 px towards the Z-axis to create more layer and stereoscopic effect. box-shadow: 0 0 10px rgb(83, 83, 83); The shadow.
5. Basic style of heading:
.card2 h2 {
font-family: 'Permanent Marker', cursive;
position: absolute;
top: 150px;
width: 100%;
height: 28px;
font-size: 25px;
line-height: 28px;
text-align: center;
text-shadow: 0 0 5px rgb(177.174.174);
color: rgb(33.34.34);
transform: translateZ(50px);
}
Copy the code
Font-family: < font style > Font-size: indicates the font size. Text-align: align the text in the center. Text-shadow: indicates the text shadow. transform: translateZ(50px); The text is also moved by 50px towards the Z axis to give it more layer and stereoscopic effect.
6. Basic style of subheadings:
.txt{
font-family: 'Permanent Marker', cursive;
position: absolute;
top: 180px;
width: 100%;
line-height: 30px;
font-size: 16px;
text-align: center;
text-shadow: 0 0 10px rgb(185.187.186);
transform: translateZ(50px);
}
Copy the code
font-family: ‘Permanent Marker’, cursive; Font style. Word-break: break-all; Line spacing. . A little… 7. Basic style of font icon, width, height:
.font{
position: absolute;
top: 215px;
left: 50%;
width: 80%;
height: 50px;
display: flex;
align-items: center;
justify-content: space-around;
transform: translateZ(50px) translateX(-50%);
}
.font span{
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 30px;
color: white;
border-radius: 50%;
background-color: rgb(61.60.60);
box-shadow: inset 0 0 8px white,
inset 0 0 8px white,
inset 0 0 8px white,
0 0 8px black;
}
Copy the code
display: flex; align-items: center; justify-content: space-around; Flex layout with spindles evenly aligned and side axes centered. display: inline-block; Convert to an inline block element. Box-shadow: Write multiple lines to make the box-shadow even brighter. . A little…
In the js section, look at the comments, and the formula can be understood by itself:
<script>
/* Get the bottom box label */
var card = document.querySelector('.card');
/* Get the card label */
var card2 = document.querySelector('.card2');
/* Add mousemove event to the underlying box */
card.addEventListener('mousemove'.function (e) {
/* x is the distance from the mouse to the left of the page minus the distance from the bottom box to the left of the page */
let x = e.clientX - card.offsetLeft;
/* left is half the width of the bottom box */
let left = card.offsetWidth / 2;
/* rotateY is the size of the rotation of the card around the Y-axis. The rotateY depends on itself, I divide by 5, it can be larger or smaller */
let rotateY = -(left - x) / 5;
/* y is the distance from the top of the page minus the distance from the bottom box */
let y = e.clientY - card.offsetTop;
/* top is half the height of the bottom box */
let top = card.offsetHeight / 2;
/* rotateX is the size of the rotation of the card around the X-axis. The rotateX depends on itself, I divide by 5, it can be larger or smaller */
let rotateX = (top - y) / 5;
/* Add the transform attribute to the card
card2.style.cssText = `
transform: rotateX(${rotateX}deg) rotateY(${rotateY}deg); `
})
/* Add mouseout*/ to the underlying box
card.addEventListener('mouseout'.function (e) {
Rotate the card's transform attribute to 0deg*/
card2.style.cssText = ` transform: rotateY(0deg) rotateX(0deg); `
})
</script>
Copy the code
Complete code:
<! DOCTYPEhtml>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<link href="https://fonts.font.im/css? family=Dancing+Script" rel="stylesheet">
<link href="https://fonts.font.im/css? family=Permanent+Marker" rel="stylesheet">
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot? wr5es');
src: url('fonts/icomoon.eot? wr5es#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf? wr5es') format('truetype'),
url('fonts/icomoon.woff? wr5es') format('woff'),
url('fonts/icomoon.svg? wr5es#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block; {} *font-family: 'icomoon';
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(120deg.rgb(255.196.0) 40%.rgb(31.223.175),rgb(0.195.255),rgb(183.0.255) 60%);
}
.card {
position: relative;
width: 250px;
height: 300px;
transform-style: preserve-3d;
cursor: pointer;
}
.card2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
border-radius: 15px;
transition: all 0.2 s;
transform-style: preserve-3d;
box-shadow: inset 0 0 30px rgb(83.83.82);
}
.card2 img {
position: absolute;
top: 30px;
left: 75px;
width: 100px;
height: 100px;
border-radius: 50%;
transform: translateZ(50px);
box-shadow: 0 0 10px rgb(83.83.83);
}
.card2 h2 {
font-family: 'Permanent Marker', cursive;
position: absolute;
top: 150px;
width: 100%;
height: 28px;
font-size: 25px;
line-height: 28px;
text-align: center;
text-shadow: 0 0 5px rgb(177.174.174);
color: rgb(33.34.34);
transform: translateZ(50px);
}
.txt{
font-family: 'Permanent Marker', cursive;
position: absolute;
top: 180px;
width: 100%;
line-height: 30px;
font-size: 16px;
text-align: center;
text-shadow: 0 0 10px rgb(185.187.186);
transform: translateZ(50px);
}
.font{
position: absolute;
top: 215px;
left: 50%;
width: 80%;
height: 50px;
display: flex;
align-items: center;
justify-content: space-around;
transform: translateZ(50px) translateX(-50%);
}
.font span{
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 30px;
color: white;
border-radius: 50%;
background-color: rgb(61.60.60);
/* border: 1px solid rgb(173, 172, 172) ; * /
box-shadow: inset 0 0 8px white,
inset 0 0 8px white,
inset 0 0 8px white,
0 0 8px black;
}
</style>
</head>
<body>
<div class="card">
<div class="card2">
<img src="img/haha.gif" alt="haha">
<h2>Aurora Borealis night</h2>
<p class="txt">The aurora borealis.</p>
<div class="font">
<span> </span>
<span> </span>
<span> </span>
</div>
</div>
</div>
<script>
var card = document.querySelector('.card');
var card2 = document.querySelector('.card2');
card.addEventListener('mousemove'.function (e) {
let x = e.clientX - card.offsetLeft;
let left = card.offsetWidth / 2;
let rotateY = -(left - x) / 5;
let y = e.clientY - card.offsetTop;
let top = card.offsetHeight / 2;
let rotateX = (top - y) / 5;
card2.style.cssText = `
transform: rotateX(${rotateX}deg) rotateY(${rotateY}deg); `
})
card.addEventListener('mouseout'.function (e) {
card2.style.cssText = ` transform: rotateY(0deg) rotateX(0deg); `
})
</script>
</body>
</html>
Copy the code
Conclusion:
It’s a good effect to practice with
Other CSDN articles ~ : Colorful streamer text HTML + CSS Bubble float background effect HTML + CSS simple clock effect HTML + CSS + JS Cyberpunk style button HTML + CSS responsive card hover effect HTML + CSS wave loading animation HTML + CSS navigation bar scrolling gradient effect HTML + CSS +js book page page HTML + CSS 3D photo album HTML + CSS colorful light button HTML + CSS remember some CSS attributes summary (1) Sass summary notes…… , etc.