网站前端开发之页面增添趣味性的 CSS 效果

增加趣味性的 CSS 效果可以对网站或应用程序的用户体验产生积极影响。以下是一些趣味性 CSS 效果的作用：
吸引用户的注意力：有趣的动画、颜色和形状可以引起用户的注意，帮助页面内容更容易被记住。
提升用户参与度：趣味性的效果可以鼓励用户与网站或应用程序进行互动，例如悬停效果或按钮动画，使用户更愿意点击和浏览。
创造愉快的用户体验：趣味性效果可以提供一种愉快和有趣的用户体验，使用户感到更加愉快和满足。
传达品牌个性：通过独特和有趣的 CSS 效果，网站或应用程序可以传达出品牌的个性和特色，与用户建立更加亲近的联系。
提高页面的吸引力：有趣的 CSS 效果可以使页面看起来更加吸引人，从而提高用户的停留时间和探索深度。
增加互动性：例如，卡片翻转效果可以增加用户与页面元素的互动，使用户更容易理解信息。
提供视觉引导：通过动画、颜色变化等效果，可以引导用户的视线，使用户更容易注意到重要的内容或功能。
增加页面层次感：通过阴影、颜色和渐变等效果，可以增加页面元素之间的层次感，使页面看起来更加立体和丰富。
总之，趣味性的 CSS 效果可以改善用户体验，使用户更愿意与网站或应用程序互动，提高用户满意度，增加页面的吸引力和互动性。下面这些效果可以根据自己具体需求进行调整和组合,但需要注意的是，这些效果应该适度使用，不应该过分夸张，以免影响用户的使用和理解。不过需要测试这些效果以确保在不同浏览器中的兼容性。
1. 背景渐变动画，添加背景色或者背景图，加上左右晃动动画：
body {background: linear-gradient(to right, #6d66ff, #5effe9);animation: gradientAnimation 10s ease infinite;}
@keyframes gradientAnimation {
  0% { background-position: 0% 50%;}
  50% { background-position: 100% 50%;}
  100% { background-position: 0% 50%;}
}
 

• 输入框的焦点效果：

.active-border{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;transform:scaleX(0);background-color:var(--input-bottom-animation-color);
transition:all .5s;transform-origin:center}
.field:focus~.active-border{transform:scaleX(1)}
.field-box{border-bottom:1px solid #b2b2b2;position:relative;font-size:18px;margin-top:40px}
.field{border:none;outline:none;width:100%;height:34px;background:none;transition:all .5s;caret-color:#fff;color:#cfc4c4;font-size:16px}
.holder{color:#999;position:absolute;left:0;top:0;pointer-events:none;z-index:1;transition:all .5s;}
.field:focus~.holder,.field:valid~.holder{top:-30px;color:#fff;font-size:22px}
 

• 文字抖动的效果：

.shaketxt {animation: shaketxt 0.5s infinite;}
@keyframes shaketxt {0% { transform: translateX(0); }25% { transform: translateX(-5px); }50% { transform: translateX(5px); }75% { transform: translateX(-5px); }100% { transform: translateX(0); }}
 

• 文字阴影效果：

.text-shadow {font-size: 40px; color: #3498db; text-shadow: 2px 2px 4px rgba(102,102,102,1);}
 

• 彩虹渐变文字：

.rainbowtxt {
   font-size: 40px;
    background: linear-gradient(to left, #a630a6, #b53a3a);
    -webkit-background-clip: text;
    color: transparent;
}