当前位置：首页 > news >正文

CSS 安卓应用卸载碎片化动画效果

news 2025/8/5 15:39:30

在这里插入图片描述

这个碎片化动画包含以下特点：

碎片效果：将应用图标分解为16个碎片(4x4网格)，每个碎片都有独立的动画
爆炸动画：碎片会向四周散开，同时旋转并逐渐消失
随机效果：每个碎片有随机的动画延迟和旋转角度，使效果更自然
交互功能：点击"卸载应用"按钮触发动画

关键实现技术：

使用CSS变量(–tx, --ty, --r)控制每个碎片的运动轨迹
通过JavaScript动态生成碎片元素并设置不同的动画参数
transform属性实现位移、缩放和旋转的组合动画

你可以通过以下方式自定义效果：

修改@keyframes explode中的参数调整碎片运动距离和速度
增加或减少碎片数量(修改循环次数和网格布局)
调整碎片的初始大小和形状(修改.fragment的样式)
更改动画持续时间(目前是1.2秒)
如果需要更复杂的碎片效果，可以考虑使用CSS的clip-path属性创建不规则碎片形状。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>安卓应用碎片化卸载动画</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f5f5f5;font-family: 'Roboto', sans-serif;}.phone {position: relative;width: 300px;height: 600px;background-color: #fff;border-radius: 30px;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);overflow: hidden;padding: 20px;box-sizing: border-box;}.app-icon {position: absolute;width: 60px;height: 60px;background: linear-gradient(135deg, #4285F4, #34A853);border-radius: 15px;top: 50%;left: 50%;transform: translate(-50%, -50%);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);display: flex;justify-content: center;align-items: center;color: white;font-weight: bold;}.fragments-container {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 60px;height: 60px;pointer-events: none;}.fragment {position: absolute;width: 15px;height: 15px;background: linear-gradient(135deg, #4285F4, #34A853);/* background: linear-gradient(270deg, #8fff85, #39a0ff); *//* background: linear-gradient(270deg, #ffed46, #ff7ec7); */border-radius: 3px;opacity: 0;animation: explode 1.2s ease-out forwards;}@keyframes explode {0% {transform: translate(0, 0) scale(1) rotate(0deg);opacity: 1;}100% {transform:translate(calc(var(--tx) * 50px - 25px),calc(var(--ty) * 50px - 25px)) scale(0.5) rotate(calc(var(--r) * 360deg));opacity: 0;}}.status-bar {height: 24px;display: flex;justify-content: space-between;padding: 0 10px;font-size: 12px;color: #333;}.home-indicator {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);width: 100px;height: 5px;background-color: #ccc;border-radius: 3px;}button {position: absolute;bottom: 50px;left: 50%;transform: translateX(-50%);padding: 10px 20px;background-color: #4285F4;color: white;border: none;border-radius: 5px;cursor: pointer;}</style>
</head><body><div class="phone"><div class="status-bar"><span>12:30</span><span>📶 100%</span></div><div class="app-icon" id="appIcon">App</div><div class="fragments-container" id="fragments"></div><div class="home-indicator"></div><button id="uninstallBtn">卸载应用</button></div><script>document.getElementById('uninstallBtn').addEventListener('click', function () {const appIcon = document.getElementById('appIcon');const fragmentsContainer = document.getElementById('fragments');// 隐藏原始图标appIcon.style.display = 'none';// 创建16个碎片(4x4网格)for (let i = 0; i < 16; i++) {const fragment = document.createElement('div');fragment.classList.add('fragment');// 计算碎片位置const x = i % 4;const y = Math.floor(i / 4);// 设置CSS变量控制动画方向const tx = (x - 1.5) * 0.8;const ty = (y - 1.5) * 0.8;const rotation = Math.random();fragment.style.setProperty('--tx', tx);fragment.style.setProperty('--ty', ty);fragment.style.setProperty('--r', rotation);console.log(tx, 'tx')// 设置碎片初始位置fragment.style.left = `${x * 15}px`;fragment.style.top = `${y * 15}px`;// 随机延迟(0-0.3s)fragment.style.animationDelay = `${Math.random() * 0.3}s`;fragmentsContainer.appendChild(fragment);}// 动画结束后移除碎片setTimeout(() => {fragmentsContainer.innerHTML = '';appIcon.style.display = 'flex';}, 1200);});</script>
</body></html>