源码：
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>鼠标停留按钮实现动画效果</title> <style>.button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 300px; transition: all 0.5s; cursor: pointer; margin: 5px;}.button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}.button span:after { content: '»'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s;}.button:hover span { padding-right: 25px;}.button:hover span:after { opacity: 1; right: 0;}</style></head><body><button class="button" style="vertical-align:middle"><span>Hello Word </span></button></body></html> |
QQ群：513185891![]()