聊天窗口是現代社交軟件中的常見組件,其外觀優美,操作簡便,使用 CSS 能夠實現豐富的樣式和動畫效果,提升用戶體驗。
以下代碼是基于 HTML 和 CSS 的聊天窗口的簡單實現。
/* 聊天窗口容器樣式 */ .chat-window { width: 300px; height: 400px; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; } /* 聊天消息列表樣式 */ .chat-message-list { list-style: none; padding: 0; margin: 0; height: 350px; overflow-y: scroll; } /* 聊天消息樣式 */ .chat-message { display: flex; flex-direction: column; margin: 10px; } .chat-message .sender { font-size: 14px; color: #777; } .chat-message .content { font-size: 16px; color: #333; margin-top: 5px; } /* 聊天輸入框樣式 */ .chat-input { display: flex; justify-content: space-between; } .chat-input input { flex-grow: 1; border: none; padding: 10px; } .chat-input button { background-color: #007bff; color: #fff; border: none; border-radius: 4px; padding: 10px 20px; margin-left: 10px; cursor: pointer; } /* 聊天窗口動畫效果 */ .chat-window { animation-name: slide-in; animation-duration: 0.5s; } @keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
上述代碼實現了一個簡單的聊天窗口,包括聊天消息列表、聊天輸入框。其中使用了 flex 布局進行頁面布局,通過 overflow 屬性實現了消息列表的滾動效果,使用了 animation 實現了聊天窗口的初始動畫效果。
通過使用 CSS,可以實現更加豐富和復雜的聊天窗口樣式和動畫效果,提升用戶體驗,讓用戶感受到更加優美的界面和流暢的操作體驗。
下一篇股市中css