css实现欢度中秋佳节代码
代码语言:html
所属分类:其他
代码描述:css实现欢度中秋佳节代码,中秋佳节,月圆人团圆。愿您与家人共享美好时光,品尝香甜月饼,共赏明月。祝福大家中秋快乐,阖家幸福!
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!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, html { margin: 0; padding: 0; height: 100%; font-family: 'Arial', sans-serif; overflow: hidden; } .container { background: linear-gradient(to bottom, #0f1746, #372f6a); height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center; position: relative; } .moon { width: 150px; height: 150px; background: #ffd700; border-radius: 50%; box-shadow: 0 0 20px #ffd700; margin-bottom: 20px; animation: glow 2s infinite alternate; position: absolute; top: 50px; right: 50px; } .mooncake { width: 100px; height: 100px; background: #cd853f; border-radius: 50%; margin: 20px auto; position: relative; overflow: hidden; } .mooncake::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: #deb887; border-radius: 50%; } .mooncake::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: #cd853f; border-radius: 50%; box-shadow: -10px -10px 0 #b8860b, 10px 10px 0 #b8860b; } .house { width: 200px; height: 150px; background: #8b4513; position: relative; margin-top: 50px; } .roof { width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 80px solid #a0522d; position: absolute; top: -80px; } .window { width: 40px; height: 40px; background: #ffd700; position: absolute; top: 30px; left: 30px; animation: windowLight 2s infinite alternate; } .family { position: absolute; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0