css好看的用户互动样式 |css 仿ios加载

/* 按钮悬停效果 */
button:hover {
background-color: #4CAF50; /* 深绿色 */
color: white;
}
/* 输入框聚焦效果 */
input:focus {
border: 3px solid #4CAF50;  /* 深绿色边框 */
outline: none;  /* 去掉默认的聚焦外框 */
}
/* 鼠标悬浮提示框 */
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}

以上CSS代码实现了常用的好看的用户互动样式，包括按钮悬停效果、输入框聚焦效果、以及鼠标悬浮提示框。这些样式为用户提供了直观易懂的互动体验，增强了网页的可操作性。

设计好看的用户互动样式需要考虑多方面，如用户体验、交互流畅性等等，只有综合考虑并结合实际需求，才能真正做到好看、实用。