网站前端制作之鼠标经过按钮效果二_成都网站搭建
接着上次关于页面布局中,内容模块里的按钮,鼠标经过的动画效果的总结。鼠标经过的按钮的时候会触发各种效果,如渐变、放大、旋转抑或是翻转等效果。开始的按钮样式,如下图
鼠标移入最终的效果
动态效果三: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
- SEO整站优化解决方
- 企业网站SEO优化中常用的主要技能_成都seo优化
- 如何优化网站加载速度之——图片处理_成都网站制作
- 【seo外链优化】关注外链数量是诊断排名忽上忽下的重要指标-成都seo优化-成都网站优化
- seo信息 SEO优化通过SEO和基于搜索引擎的营销思想,提供了一种生态化seo知识 -会理SEO优化
- 关键词排名网站自然优化并不是佛系的管理网站SEM和SEO技巧关键长尾词-雅安SEO
- seo排名网站SEO如何快速提高排名?(一)SEO优化快速seo排名玖金手指排名2-雅安SEO
- 排名SEO网站优化推广工具(排名SEO网站优化推广工具有哪些)
- 知名的网站SEO优化
- SEO优化快速提升网站流量那都点事儿-邛崃SEO优化