```json
{
"summary": "为视频添加带有酷炫动画效果的封面图,增强视觉冲击力",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"relative h-screen overflow-hidden bg-black\">\n <!-- 视频封面 -->\n <div class=\"absolute inset-0 z-0 overflow-hidden group\">\n <img src=\"/assets/images/16-9/business-01.jpg\" alt=\"视频封面\" class=\"w-full h-full object-cover opacity-90\">\n <!-- 封面动画效果 -->\n <div class=\"absolute inset-0 bg-gradient-to-t from-black/80 to-transparent\"></div>\n <div class=\"absolute top-0 left-0 w-1/2 h-full bg-gradient-to-r from-black/70 to-transparent\"></div>\n <div class=\"absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-black/70 to-transparent\"></div>\n <!-- 粒子动画效果 -->\n <div class=\"absolute inset-0 opacity-70 group-hover:opacity-100 transition-opacity duration-500\">\n <div class=\"absolute top-1/4 left-1/4 w-2 h-2 rounded-full bg-blue-400 animate-pulse\"></div>\n <div class=\"absolute top-1/3 right-1/3 w-3 h-3 rounded-full bg-purple-500 animate-pulse\"></div>\n <div class=\"absolute bottom-1/4 left-2/3 w-1 h-1 rounded-full bg-white animate-pulse\"></div>\n </div>\n </div>\n \n <!-- 视频容器 -->\n <video autoplay loop muted class=\"absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-700\" poster=\"/assets/images/16-9/business-01.jpg\">\n <source src=\"https://example.com/sample.mp4\" type=\"video/mp4\">\n </video>\n \n <!-- 导航栏 -->\n <div class=\"absolute top-0 left-0 w-full z-10 py-4 px-6 bg-transparent transition-colors duration-300 hover:bg-white\">\n <div class=\"container mx-auto flex items-center justify-between\">\n <img src=\"/assets/images/logo/google.svg\" alt=\"Logo\" class=\"h-8 w-auto mr-4\">\n <div class=\"flex items-center space-x-6\">\n <a href=\"#\" class=\"text-white hover:text-black px-2 py-1 relative\">\n <span class=\"relative\">产品<span class=\"absolute bottom-0 left-0 h-0.5 bg-blue-500 w-0 group-hover:w-full transition-all duration-300\"></span></span>\n </a>\n <a href=\"#\" class=\"text-white hover:text-black px-2 py-1 relative\">\n <span class=\"relative\">解决方案<span class=\"absolute bottom-0 left-0 h-0.5 bg-blue-500 w-0 group-hover:w-full transition-all duration-300\"></span></span>\n </a>\n <a href=\"#\" class=\"text-white hover:text-black px-2 py-1 relative\">\n <span class=\"relative\">关于我们<span class=\"absolute bottom-0 left-0 h-0.5 bg-blue-500 w-0 group-hover:w-full transition-all duration-300\"></span></span>\n </a>\n <button class=\"bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition-colors duration-300\">联系我们</button>\n </div>\n </div>\n </div>\n \n <!-- 中央播放按钮 -->\n <button class=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10 group w-24 h-24 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center transition-all duration-500 hover:bg-white/40 hover:shadow-lg hover:shadow-blue-500/30 hover:scale-110 active:scale-95\">\n <div class=\"absolute inset-0 rounded-full border-2 border-white/30 group-hover:border-white/60 transition-all duration-500\"></div>\n <div class=\"w-0 h-0 border-t-[14px] border-b-[14px] border-l-[24px] border-transparent border-l-white ml-2 transition-transform duration-300 group-hover:translate-x-1\"></div>\n <div class=\"absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-[radial-gradient(circle_at_center,_rgba(255,255,255,0.4)_0%,_transparent_70%)]\"></div>\n </button>\n \n <!-- 视频文字内容 -->\n <div class=\"absolute bottom-20 left-0 right-0 z-5 text-center\">\n <div class=\"container mx-auto px-4\">\n <h1 class=\"text-4xl md:text-5xl font-bold text-white mb-6 transform transition-transform duration-700 group-hover:translate-y-0 translate-y-10\">探索无限可能</h1>\n <p class=\"text-xl text-white mb-8 opacity-0 group-hover:opacity-100 transition-opacity duration-700 delay-100\">我们的解决方案将帮助您的业务实现突破性增长</p>\n <button class=\"bg-white text-blue-600 hover:bg-blue-50 px-8 py-3 rounded-md text-lg font-medium transition-all duration-300 hover:shadow-md opacity-0 group-hover:opacity-100 transition-opacity duration-700 delay-200\">立即体验</button>\n </div>\n </div>\n</div>"
},
"next": [
"添加封面加载动画",
"优化粒子特效",
"添加视频预加载",
"实现亮度过渡",
"增加封面文字"
]
}
```
角色
assistant
content
total_tokens
7505