CSS3变形金刚霸天虎特效-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148978497

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3变形金刚霸天虎特效</title>
<style>
body {
margin: 0;
padding: 0;
background: #000;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}

.decepticon {
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
animation: rotate 10s infinite linear;
}

.face {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #c00, #900);
border: 5px solid #900;
border-radius: 50%;
box-shadow: 0 0 30px rgba(200, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
}

.face::before {
content: '';
position: absolute;
width: 80%;
height: 80%;
border: 5px solid #900;
border-radius: 50%;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}

.face::after {
content: '';
position: absolute;
width: 60%;
height: 60%;
background: #900;
border-radius: 50%;
box-shadow: 0 0 15px rgba(200, 0, 0, 0.8);
}

.mask {
position: absolute;
width: 40%;
height: 40%;
background: #000;
border-radius: 50%;
z-index: 10;
}

.eye {
position: absolute;
width: 15%;
height: 15%;
background: #ff0;
border-radius: 50%;
box-shadow: 0 0 10px #ff0, 0 0 20px #ff0;
z-index: 11;
animation: blink 3s infinite;
}

.eye.left {
left: 35%;
top: 40%;
}

.eye.right {
right: 35%;
top: 40%;
}

.horn {
position: absolute;
width: 10%;
height: 30%;
background: #900;
border-radius: 5px;
z-index: 5;
box-shadow: 0 0 10px rgba(200, 0, 0, 0.8);
}

.horn.left {
left: 25%;
top: 10%;
transform: rotate(-30deg);
}

.horn.right {
right: 25%;
top: 10%;
transform: rotate(30deg);
}

.mouth {
position: absolute;
width: 30%;
height: 10%;
background: #000;
border-radius: 0 0 50% 50%;
bottom: 30%;
z-index: 11;
}

@keyframes rotate {
0% {
transform: rotateY(0deg) rotateX(10deg);
}
100% {
transform: rotateY(360deg) rotateX(10deg);
}
}

@keyframes blink {
0%, 48%, 52%, 100% {
transform: scale(1);
}
50% {
transform: scale(1, 0.1);
}
}

.spark {
position: absolute;
width: 5px;
height: 5px;
background: #ff0;
border-radius: 50%;
opacity: 0;
animation: sparkle 2s infinite;
}

@keyframes sparkle {
0% {
opacity: 0;
transform: translate(0, 0);
}
10% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(random(100) - 50px, random(100) - 50px);
}
}

.link {
position: fixed;
bottom: 20px;
color: #fff;
font-family: Arial, sans-serif;
text-decoration: none;
font-size: 14px;
z-index: 100;
}
</style>
</head>
<body>
<div class="decepticon">
<div class="face">
<div class="mask"></div>
<div class="eye left"></div>
<div class="eye right"></div>
<div class="horn left"></div>
<div class="horn right"></div>
<div class="mouth"></div>
</div>
</div>

<a href="https://a.88a.org.cn/lQmk" class="link">点击查看更多特效</a>

<script>
// 创建火花效果
function createSparks() {
const decepticon = document.querySelector('.decepticon');
for (let i = 0; i < 20; i++) {
const spark = document.createElement('div');
spark.classList.add('spark');
spark.style.left = Math.random() * 100 + '%';
spark.style.top = Math.random() * 100 + '%';
spark.style.animationDelay = Math.random() * 2 + 's';
decepticon.appendChild(spark);
}
}

createSparks();
</script>
</body>
</html>