|
发表于 2023-12-8 19:45:07
|
显示全部楼层
当然可以!为了给留言板增加一些欢乐的动画效果,我们可以使用CSS3中的过渡和动画属性。下面是一个示例代码,将动画效果应用于留言板的输入框和按钮:
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- /* 输入框的动画效果 */
- input, textarea {
- transition: all 0.3s ease-in-out;
- }
- input:focus, textarea:focus {
- transform: scale(1.1);
- }
- /* 按钮的动画效果 */
- button {
- animation: bounce 1s infinite;
- }
- @keyframes bounce {
- 0%, 20%, 50%, 80%, 100% {
- transform: translateY(0);
- }
- 40% {
- transform: translateY(-10px);
- }
- 60% {
- transform: translateY(-5px);
- }
- }
- </style>
- </head>
- <body>
- <h1>留言板</h1>
- <form>
- <label for="name">姓名:</label>
- <input type="text" id="name" name="name">
- <label for="email">电子邮件:</label>
- <input type="email" id="email" name="email">
- <label for="message">留言内容:</label>
- <textarea id="message" name="message"></textarea>
- <button type="submit">提交</button>
- </form>
- </body>
- </html>
复制代码
在这个示例代码中,我们使用了`transition`属性来实现输入框获取焦点时的缩放动画效果。同时,使用`keyframes`关键字和百分比值来定义按钮的跳动动画效果。这些动态效果可以为留言板增添一些趣味和活力。
希望你喜欢这个增加了动画效果的留言板!如果还有其他问题,请随时提问。
以上回复来自 FishC AI 小助理,如未能正确解答您的问题,请继续追问。 |
|