div+css布局实现浪漫表白墙效果代码
代码语言:html
所属分类:表白
代码描述:div+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> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; padding: 20px; } .header { text-align: center; margin: 30px 0; color: #ff6b8b; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); } .header h1 { font-size: 3rem; margin-bottom: 10px; animation: pulse 2s infinite; } .header p { font-size: 1.2rem; color: #666; } .love-wall { width: 100%; max-width: 1000px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 40px; } .love-note { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; } .love-note:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); } .love-note::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, #ff6b8b, #ff8e53); } .love-note h3 { color: #ff6b8b; margin-bottom: 10px; font-size: 1.5rem; } .love-note p { color: #555; line-height: 1.6; } .love-note .date { font-size: 0.8rem; color: #999; margin-top: 15px; text-align: right; } .form-container { background: white; width: 100%; max-width: 600px; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); margin-bottom: 40px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; color: #666; font-weight: bold; } .form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; transition: border 0.3s; } .form-group inp.........完整代码请登录后点击上方下载按钮下载查看
网友评论0