前端开发之css3边框线条动画效果_成都网站制作
鼠标悬停按钮边框的线条动画效果在页面开发中,有不少地方都是需要添加交互效果的,譬如鼠标悬停文字变颜色、添加阴影内容模块的位置移动,放大缩小等,而鼠标悬停触发流畅的线条动画效果,不仅使页面增加了有趣的交互效果,还能给用户带来一些好的使用体验。线条的动画效果可以用伪类实现,如下图:
首先需要设置鼠标悬停触发动画前的图的基本样式,还需设置动画过渡时间transition: transform 0.3s;还需要用到transform scaleX和transform scaleY,scaleX和scaleY分别表示设置水平方向缩放的倍数和设置垂直方向的倍数,第一个图两条横向的线的鼠标悬停触发动画需要设置transform: scaleX(0);还需要设置transform-origin,这里transform-origin是设置元素缩放偏移的位置,这里需要设置left、right、top、bottom、center,结合着使用。譬如第一个图的第一根线设置transform-origin: left center;第第二根线设置transform-origin: right center; 后续鼠标悬停触发线条动画发生的方向就不同了。鼠标悬停触发动画,则需要设置transform: scaleX(1)或者transform: scaleY(1);因为第一个图的两根线水平方向发生动画,之前已经设置了transform: scaleX(0);,现在则需要设置transform: scaleX(1); 第二个图的触发动画过程也如第一个图的设置类似,不同的只是水平方向和垂直方向的区别。Html:div class=btnBoxa href= class=btn1Learn More/a/divCss:.btnBox{ display: flex; align-items: center; justify-content: center; margin-top: 60px; } .btnBox a{ position: relative; color: #FFFFFF; font-family: math; font-size: 20px; padding: 15px 25px; margin: 0 34px; } .btnBox a:before, .btnBox a:after { position: absolute; content: ; display: block; transition: transform 0.3s; background-color: #ff2626; } .btnBox a.btn1:before, .btnBox a.btn1:after{ left: 0; width: 100%; height: 2px; -webkit-transform: scaleX(0); transform: scaleX(0); } .btnBox a.btn1:before{ top: 0; } .btnBox a.btn1:after{ bottom: 0; } .btnBox a.btn1:before{ -webkit-transform-origin: left center; transform-origin: left center; } .btnBox a.btn1:after{ -webkit-transform-origin: right center; transform-origin: right center; } .btnBox a.btn1:hover:before, .btnBox a.btn1:hover:after{ -webkit-transform: scaleX(1); transform: scaleX(1); }
前端开发之css3边框线条动画效果_成都网站制作 https://cdnanqi.cn/wangzhanzhizuo/10896.html
- 信息流推广搜索推广和信息流推广的区别_成都竞价托管
- SEO首页优化注意事项(SEO首页优化注意事项有哪些)
- 网站优化可以通过哪些方面来判断一个网站是否优异?_宜宾seo优化
- 最近的SEO优化介绍(SEO在线优化排名)
- 基于用户体验进行的SEO优化-成都seo优化-成都网站优化
- SEO入门必知:搜索引擎的3种核心算法-彭州SEO优化
- 为什么网站与搜索引擎之间缺乏信任感增强搜索引擎的信任度变得越来越重要-成都seo优化-成都网站优化
- 全面认知搜索引擎优化排名规则,才有把握做网站排名-成都seo优化-成都网站优化
- 成都百度推广费用具体是多少_成都竞价托管
- 单页网站只有充分地展示所有用户的需求,才有利于搜索引擎优化的可操作性-成都seo网站关键词优化