/*HTML代码*/ <div class="button"> Click Me </div> /*CSS代码*/ .button { background-color: #4CAF50; /*设置初始背景颜色*/ color: white; /*设置初始文字颜色*/ padding: 12px 24px; /*设置内边距*/ font-size: 16px; /*设置字体大小*/ border-radius: 4px; /*设置边框圆角*/ transition: background-color 0.3s ease, color 0.3s ease; /*设置过渡效果*/ } /*鼠标悬浮时改变背景颜色和文字颜色*/ .button:hover { background-color: white; color: #4CAF50; }
在上面的代码中,大家创建了一个div元素并添加了一个class名为”button”。大家还设置了它的背景颜色、文字颜色、内边距、字号和边框圆角。接下来,大家使用transition属性定义了过渡效果,它用来在用户点击时改变该元素的背景颜色和文字颜色。大家将过渡时间设置为0.3秒,过渡函数设置为ease,这个参数可以使效果更加平滑。
最后,大家使用:hover选择器来定义鼠标悬浮时的效果。当鼠标悬浮时,大家将背景颜色设置为白色,文字颜色设置为绿色。当鼠标移开时,元素会再次过渡到原始颜色。
总的来说,点击效果过渡是一种简单而又可靠的增强用户体验的方式。它可以让您的网站看起来更有活力并带来更多的交互性。