我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

怎么使用纯CSS实现从按钮两侧滑入元素的悬停效果-创新互联

这篇文章主要介绍了怎么使用纯CSS实现从按钮两侧滑入元素的悬停效果,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

成都创新互联公司长期为成百上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为郎溪企业提供专业的成都网站设计、做网站,郎溪网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。效果预览

怎么使用纯CSS实现从按钮两侧滑入元素的悬停效果

源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器是一个无序列表,列表项代表按钮:

  • home

居中显示:

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(deepskyblue, navy);
}

去掉列表项前面的符号:

ul {
  padding: 0;
  list-style-type: none;
}

设置按钮的文字样式:

ul li {
  color: #ddd;
  font-size: 25px;
  font-family: sans-serif;
  text-transform: uppercase;
}

用伪元素在按钮的左侧增加一个方块:

ul li {
  position: relative;
}

ul li::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: tomato;
  left: -100%;
}

用伪元素在按钮的右侧增加一条下划线:

ul li::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0.2em;
  background: tomato;
  bottom: 0;
  left: 100%;
}

接下来设置鼠标悬停效果。
当鼠标悬停时,左侧的方块移到文字所在位置:

ul li::before {
  transition: 0.4s ease-out;
}

ul li:hover::before {
  left: 100%;
}

右侧的下划线移到文字所在位置,它的动画时间延迟到方块的动画快结束时再开始:

ul li::after {
  transition: 0.3s 0.3s ease-out;
}

ul li:hover::after {
  left: 0%;
}

同时,提高文字的亮度:

ul li {
  transition: 0.3s;
  cursor: pointer;
}

ul li:hover {
  color: #fff;
}

隐藏掉按钮外的部分,使方块和下划线在默认状态下都不可见,只有鼠标悬停时它们才从两侧入场:

ul li {
  overflow: hidden;
}

最后,在 dom 中再增加几个按钮:

  • home
  • products
  • services
  • contact

布局多个按钮:

ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}

ul li {
  margin: 0.5em;
}

感谢你能够认真阅读完这篇文章,希望小编分享怎么使用纯CSS实现从按钮两侧滑入元素的悬停效果内容对大家有帮助,同时也希望大家多多支持创新互联建站,关注创新互联网站制作公司行业资讯频道,遇到问题就找创新互联建站,详细的解决方法等着你来学习!


网站名称:怎么使用纯CSS实现从按钮两侧滑入元素的悬停效果-创新互联
URL标题:http://shouzuofang.com/article/cediii.html

其他资讯