接着上次关于页面布局中，内容模块里的按钮，鼠标经过的动画效果的总结。鼠标经过的按钮的时候会触发各种效果，如渐变、放大、旋转抑或是翻转等效果。开始的按钮样式，如下图

鼠标移入最终的效果

动态效果三：Htmldiv class=xbtn1a href=了解更多/a/divCss.xbtn1 a{position: relative;display: block;margin: 20px auto;width: 100%;height: 50px;line-height: 50px;max-width: 150px;text-align: center;text-transform: uppercase;overflow: hidden;border: 1px solid currentColor;color: #FFFFFF;}.xbtn1 a:after{content: ;width: 0;height: 0;-webkit-transform: rotate(360deg);-webkit-transition: 0.5s; transition: 0.5s;border-style: solid;border-width: 0 0 0 0;border-color: #FFFFFF transparent transparent transparent;position: absolute;top: 0;left: 0;z-index: -1;}.xbtn1 a:hover:after {border-width: 330px 330px 0 0;}.xbtn1 a:hover{color: #1b3952;}动态效果四：Htmldiv class=xbtn2a href=了解更多/a/divCss.xbtn2 a{position: relative;display: block;margin: 20px auto;width: 100%;height: 50px;line-height: 50px;max-width: 150px;text-align: center;text-transform: uppercase;overflow: hidden;border: 1px solid currentColor;}.xbtn2 a:before{content: ;width: 0;height: 0;-webkit-transform: rotate(360deg);-webkit-transition: 0.5s; transition: 0.5s;border-style: solid;border-width: 0 0 0 0;border-color: transparent transparent transparent #1b3952;position: absolute;bottom: 0;left: 0;z-index: -1;}.xbtn2 a:after{content: ;width: 0;height: 0;-webkit-transform: rotate(360deg);-webkit-transition: 0.5s; transition: 0.5s;border-style: solid;border-width: 0 0 0 0;border-color: transparent transparent #1b3952 transparent;position: absolute;right: 0;bottom: 0;z-index: -1;}.xbtn2 a:hover {color: #FFFFFF;}.xbtn2 a:hover:before {border-width: 150px 0 0 150px;}.xbtn2 a:hover:after {border-width: 0 0 150px 150px;}接下来动态效果五，这种动态效果是鼠标移入，出现背景和水波纹的效果，如下图是最开始的样式，关于分享的图标是用切了颜色不一样的两张图标，一张是白色，一张是黑色，黑色图标是输入移入之后的效果，图标的背景变白色，周围出现的波纹，主要用伪类实现的。

下面是鼠标移入的效果Htmldiv class=foot-shareullia href=img src=images/img1.png class=ic1/img src=images/img1a.png class=ic2//a/lilia href=img src=images/img2.png class=ic1/img src=images/img2a.png class=ic2//a/lilia href=img src=images/img3.png class=ic1/img src=images/img3a.png class=ic2//a/lilia href=img src=images/img4.png class=ic1/img src=images/img4a.png class=ic2//a/li/ul/div下面关于样式有点多，主要的样式是关于伪类做的波纹

网站前端制作之鼠标经过按钮效果二_成都网站搭建   https://cdnanqi.cn/wangzhanzhizuo/11311.html