效果演示
实现了一个太空漫游的动画效果，其中包括火箭、星星和月亮。当鼠标悬停在卡片上时，太阳和星星会变成黄色，火箭会变成飞机，月亮会变成小型的月亮。整个效果非常炫酷，可以让人想起科幻电影中的太空漫游。
Code
html
<div class="card">
<div class="star star-1"></div>
<div class="star star-2"></div>
<div class="star star-3"></div>
<div class="star star-4"></div>
<div class="star star-5"></div>
<div class="star star-6"></div>
<div class="star star-7"></div>
<div class="card-info">
<span>To the moon!</span>
</div>
<svg class="moon" viewBox="0 0 20 20">
<path
d="M 10 9 z z M 7.007 6.552 c 0 -2.259 0.795 -4.33 2.117 -5.955 C 4.34 1.042 0.594 5.07 0.594 9.98 c 0 5.207 4.211 9.426 9.406 9.426 c 2.94 0 5.972 -1.354 7.696 -3.472 c -0.289 0.026 -0.987 0.044 -1.283 0.044 C 11.219 15.979 7.007 11.759 7.007 6.552 z">
</path>
</svg>
<svg class="rocket" viewBox="48.0129 48.1783 416 415.6">
<path
d="M461.81,53.81a4.4,4.4,0,0,0-3.3-3.39c-54.38-13.3-180,34.09-248.13,102.17a294.9,294.9,0,0,0-33.09,39.08c-21-1.9-42-.3-59.88,7.5-50.49,22.2-65.18,80.18-69.28,105.07a9,9,0,0,0,9.8,10.4l81.07-8.9a180.29,180.29,0,0,0,1.1,18.3,18.15,18.15,0,0,0,5.3,11.09l31.39,31.39a18.15,18.15,0,0,0,11.1,5.3,179.91,179.91,0,0,0,18.19,1.1l-8.89,81a9,9,0,0,0,10.39,9.79c24.9-4,83-18.69,105.07-69.17,7.8-17.9,9.4-38.79,7.6-59.69a293.91,293.91,0,0,0,39.19-33.09C427.82,233.76,474.91,110.9,461.81,53.81ZM298.66,213.67a42.7,42.7,0,1,1,60.38,0A42.65,42.65,0,0,1,298.66,213.67Z">
</path>
</svg>
</div>
css
body {
height: 100vh; /* 设置body的高度为视口高度的100% */
display: flex; /* 使用flexbox将内容垂直和水平居中 */
justify-content: center; /* 水平居中内容 */
align-items: center; /* 垂直居中内容 */
background-color: #e8e8e8; /* 设置body的背景颜色 */
}
.card {
width: 290px; /* 设置卡片的宽度 */
height: 350px; /* 设置卡片的高度 */
background: linear-gradient(135deg, rgba(48, 48, 48, 1) 48%, rgba(0, 0, 0, 1) 100%); /* 设置卡片的线性渐变背景 */
background-size: 300%, 300%; /* 设置背景的尺寸为300% */
display: flex; /* 使用flexbox将内容垂直和水平居中 */
align-items: center; /* 垂直居中内容 */
justify-content: center; /* 水平居中内容 */
position: relative; /* 设置卡片的定位为相对定位 */
border-radius: 15px; /* 设置卡片的圆角边框 */
box-shadow: 5px 5px 15px 5px #000000; /* 设置卡片的阴影效果 */
overflow: hidden; /* 隐藏卡片内容溢出部分 */
transition: all 1s ease; /* 设置卡片的过渡效果 */
}
.moon {
width: 70px; /* 设置月亮图标的宽度 */
height: 70px; /* 设置月亮图标的高度 */
top: 15%; /* 设置月亮图标距离卡片顶部的位置 */
right: 120px; /* 设置月亮图标距离卡片右侧的位置 */
position: absolute; /* 设置月亮图标的定位为绝对定位 */
fill: white; /* 设置月亮图标的填充颜色为白色 */
transform: rotate(-20deg); /* 设置月亮图标的旋转角度为-20度 */
transition: all 1s ease; /* 设置月亮图标的过渡效果 */
}
.rocket {
width: 70px; /* 设置火箭图标的宽度 */
height: 70px; /* 设置火箭图标的高度 */
bottom: -2%; /* 设置火箭图标距离卡片底部的位置 */
left: -2%; /* 设置火箭图标距离卡片左侧的位置 */
position: absolute; /* 设置火箭图标的定位为绝对定位 */
fill: white; /* 设置火箭图标的填充颜色为白色 */
transition: all 1.9s ease; /* 设置火箭图标的过渡效果 */
}
.star {
position: absolute; /* 设置星星图标的定位为绝对定位 */
background: radial-gradient(circle, rgba(251, 239, 63, 1) 0%, rgba(255, 253, 212, 1) 100%); /* 设置星星图标的径向渐变背景 */
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); /* 设置星星图标的剪裁路径 */
}
.star-1 {
width: 100px; /* 设置星星1的宽度 */
height: 100px; /* 设置星星1的高度 */
bottom: 90px; /* 设置星星1距离卡片底部的位置 */
left: -15px; /* 设置星星1距离卡片左侧的位置 */
transition: all 1s ease; /* 设置星星1的过渡效果 */
}
.star-2 {
width: 150px; /* 设置星星2的宽度 */
height: 150px; /* 设置星星2的高度 */
top: -10%; /* 设置星星2距离卡片顶部的位置 */
left: -10%; /* 设置星星2距离卡片左侧的位置 */
transition: all .5s ease; /* 设置星星2的过渡效果 */
}
.star-3 {
width: 100px; /* 设置星星3的宽度 */
height: 100px; /* 设置星星3的高度 */
bottom: 5%; /* 设置星星3距离卡片底部的位置 */
right: -15px; /* 设置星星3距离卡片右侧的位置 */
transition: all .3s ease; /* 设置星星3的过渡效果 */
}
.star-4 {
width: 20px; /* 设置星星4的宽度 */
height: 20px; /* 设置星星4的高度 */
top: 4%; /* 设置星星4距离卡片顶部的位置 */
right: 5px; /* 设置星星4距离卡片右侧的位置 */
transition: all 1.4s ease; /* 设置星星4的过渡效果 */
}
.star-5 {
width: 20px; /* 设置星星5的宽度 */
height: 20px; /* 设置星星5的高度 */
bottom: 24%; /* 设置星星5距离卡片底部的位置 */
right: 45%; /* 设置星星5距离卡片右侧的位置 */
animation: rotate 3s normal linear infinite; /* 设置星星5的旋转动画 */
}
.star-6 {
width: 20px; /* 设置星星6的宽度 */
height: 20px; /* 设置星星6的高度 */
top: 14%; /* 设置星星6距离卡片顶部的位置 */
right: 25%; /* 设置星星6距离卡片右侧的位置 */
animation: rotate 5s normal linear infinite; /* 设置星星6的旋转动画 */
}
.star-7 {
width: 40px; /* 设置星星7的宽度 */
height: 40px; /* 设置星星7的高度 */
top: 34%; /* 设置星星7距离卡片顶部的位置 */
right: 65%; /* 设置星星7距离卡片右侧的位置 */
animation: rotate 5s normal linear infinite; /* 设置星星7的旋转动画 */
}
.card-info span {
font-size: 1.2em; /* 设置卡片信息中span元素的字体大小 */
color: white; /* 设置卡片信息中span元素的字体颜色为白色 */
font-weight: 600; /* 设置卡片信息中span元素的字体粗细为600 */
text-transform: uppercase; /* 将卡片信息中span元素的文本转换为大写 */
transition: all 1s ease; /* 设置卡片信息中span元素的过渡效果 */
}
.card:hover {
background: rgb(48, 48, 48); /* 设置鼠标悬停时卡片的背景颜色 */
background: linear-gradient(135deg, rgba(48, 48, 48, 1) 10%, rgba(0, 0, 0, 1) 90%); /* 设置鼠标悬停时卡片的线性渐变背景 */
background-size: 100%, 100%; /* 设置鼠标悬停时背景的尺寸为100% */
}
.card:hover .star-1,
.card:hover .star-3 {
background: linear-gradient(90deg, rgba(255, 241, 0, 1) 0%, rgba(246, 249, 93, 1) 77%, rgba(238, 255, 0, 1) 100%); /* 设置鼠标悬停时星星1和星星3的背景颜色 */
transform: scale(1.2) rotate(10deg); /* 设置鼠标悬停时星星1和星星3的缩放和旋转效果 */
}
.card:hover .star-2,
.card:hover .star-4,
.card:hover .star-5 {
background: linear-gradient(90deg, rgba(255, 241, 0, 1) 0%, rgba(246, 249, 93, 1) 77%, rgba(238, 255, 0, 1) 100%); /* 设置鼠标悬停时星星2、星星4和星星5的背景颜色 */
transform: scale(1.2) rotate(-150deg); /* 设置鼠标悬停时星星2、星星4和星星5的缩放和旋转效果 */
}
.card:hover .rocket {
transform: scale(.3) translate(450px, -730px) rotate(-260deg); /* 设置鼠标悬停时火箭图标的缩放、平移和旋转效果 */
}
.card:hover .moon {
width: 50px; /* 设置鼠标悬停时月亮图标的宽度 */
height: 50px; /* 设置鼠标悬停时月亮图标的高度 */
}
.card:hover span {
font-size: 1.5em; /* 设置鼠标悬停时卡片信息中span元素的字体大小 */
}
@keyframes rotate {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg); /* 设置旋转动画的初始状态 */
transform: rotate3d(0, 0, 1, 0deg);
}
25% {
-webkit-transform: rotate3d(0, 0, 1, 90deg); /* 设置旋转动画的25%状态 */
transform: rotate3d(0, 0, 1, 90deg);
}
50% {
-webkit-transform: rotate3d(0, 0, 1, 180deg); /* 设置旋转动画的50%状态 */
transform: rotate3d(0, 0, 1, 180deg);
}
75% {
-webkit-transform: rotate3d(0, 0, 1, 270deg); /* 设置旋转动画的75%状态 */
transform: rotate3d(0, 0, 1, 270deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 360deg); /* 设置旋转动画的结束状态 */
transform: rotate3d(0, 0, 1, 360deg);
}
}