动画卡喜欢使用 html、css 和 javascript 编码进行学习 https://www.instagram.com/webstreet_code/
- DDD原创
- 2024-10-28 06:30:02209浏览
关注我们：https://www.instagram.com/webstreet_code/
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Cards</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #111;
font-family: Arial, sans-serif;
overflow: hidden;
padding-top: 80px;
}
.card-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.card {
width: 250px;
height: 200px;
background: #1a1a1a;
border-radius: 15px;
box-shadow: 0 0 15px rgba(255, 0, 127, 0.5);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
transition: transform 0.6s ease, background 0.5s ease, box-shadow 0.5s ease;
cursor: pointer;
position: relative;
transform-style: preserve-3d;
}
.card-content {
position: absolute;
backface-visibility: hidden;
}
.card-front {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.4rem;
animation: glow 2s ease-in-out infinite;
}
.card-back {
transform: rotateY(180deg);
font-size: 3rem;
}
.card:hover {
background: #ff007f;
box-shadow: 0 0 20px rgba(0, 255, 234, 0.8);
}
.card.rotated {
transform: rotateY(180deg);
}
/* Glowing and pulsing effect for front text */
@keyframes glow {
0%, 100% {
text-shadow: 0 0 8px #ff007f, 0 0 12px #ff007f, 0 0 20px #ff007f;
color: #ff007f;
}
50% {
text-shadow: 0 0 8px #00ffea, 0 0 12px #00ffea, 0 0 20px #00ffea;
color: #00ffea;
}
}
.emoji-animation {
position: absolute;
bottom: 0;
animation: floatUp 2s ease-in-out infinite;
font-size: 1.8rem;
opacity: 0;
}
@keyframes floatUp {
0% {
transform: translateY(-10px);
opacity: 1;
}
100% {
transform: translateY(-600px);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="card-container">
<div class="card" onclick="rotateCard(this, 'fa-heart')">
<div class="card-content card-front"><p>Love</p></div>
<div class="card-content card-back"><i class="fas fa-heart"></i></div>
</div>
<div class="card" onclick="rotateCard(this, 'fa-gem')">
<div class="card-content card-front"><p>Gem</p></div>
<div class="card-content card-back"><i class="fas fa-gem"></i></div>
</div>
<div class="card" onclick="rotateCard(this, 'fa-fire')">
<div class="card-content card-front"><p>Fire</p></div>
<div class="card-content card-back"><i class="fas fa-fire"></i></div>
</div>
<div class="card" onclick="rotateCard(this, 'fa-rainbow')">
<div class="card-content card-front"><p>Rainbow</p></div>
<div class="card-content card-back"><i class="fas fa-rainbow"></i></div>
</div>
</div>
<script>
function rotateCard(card, iconClass) {
card.classList.toggle('rotated');
if (card.classList.contains('rotated')) {
for (let i = 0; i < 20; i++) {
const emojiElement = document.createElement('div');
emojiElement.classList.add('emoji-animation');
emojiElement.innerHTML = `<i class="fas ${iconClass}"></i>`;
// Randomize color for each icon
emojiElement.style.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
emojiElement.style.left = `${Math.random() * 100}%`;
emojiElement.style.animationDuration = `${1 + Math.random() * 2}s`;
document.body.appendChild(emojiElement);
// Remove icon after animation
emojiElement.addEventListener('animationend', () => {
emojiElement.remove();
});
}
}
}
</script>
</body>
</html>
以上是动画卡喜欢使用 html、css 和 javascript 编码进行学习 https://www.instagram.com/webstreet_code/的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn