css3鼠标特效大全

发布时间:2025-12-10 12:51:36 浏览次数:5

CSS3鼠标特效是非常有趣和实用的,它们可以让您的网站更加引人注目。这里向您提供一些有用的CSS3鼠标特效列表,供您参考:

/* 1. 鼠标悬停效果 */a:hover {color: blue;}/* 2. 鼠标点击效果 */a:active {color: red;}/* 3. 鼠标进入效果 */p:hover {background-color: yellow;}/* 4. 鼠标离开效果 */p:hover {background-color: white;}/* 5. 光标变化效果 */button:hover {cursor: pointer;}/* 6. 按钮放大效果 */button:hover {transform: scale(1.2);}/* 7. 图片旋转效果 */img:hover {transform: rotate(360deg);}/* 8. 文本弹出效果 */h1:hover {animation: bounce 0.5s;}@keyframes bounce {0% {transform: translateY(0);}25% {transform: translateY(-10px);}50% {transform: translateY(0);}75% {transform: translateY(-5px);}100% {transform: translateY(0);}}/* 9. 渐变背景色效果 */p {background: linear-gradient(to right, #ff0000, #00ff00);transition: background 0.5s ease;}p:hover {background: linear-gradient(to right, #00ff00, #ff0000);}/* 10. 边框动画效果 */p {border: 1px solid black;transition: border 0.5s ease;}p:hover {border: 3px solid red;}

上面这些是一些常见的鼠标特效,它们可以帮助您的网站更加生动和吸引人。但是,请注意不要过度使用这些特效,否则可能会使您的网站过于花哨和分散用户注意力,从而影响用户体验。

需要做网站?需要网络推广?欢迎咨询客户经理 13272073477