艺术与代码的完美结合:实现鼠标悬停文字分割动画

        当你的鼠标轻触文字时,一场奇幻的表演即将开始。欢迎来到我的博客,今天,我将分享一个惊艳的CSS技巧,它可以让文字在鼠标悬停下分裂成上下两部分,仿佛音符般的动感,让你的页面瞬间生动起来。无需繁杂的代码,我将带你逐步探索如何实现这个独特的效果,让我们一同在创意的海洋里畅游,为你的网页增添一抹魔法!

艺术与代码的完美结合:实现鼠标悬停文字分割动画_第1张图片

 好~废话不多说,先上最终实现效果图

艺术与代码的完美结合:实现鼠标悬停文字分割动画_第2张图片

 今天这个同样也值得8块大洋,还不赶快学起来,接下来直接手撸代码

分析过程

        1.  HTML结构:我们需要一个一个容器来承载我们的文字,这里我选择

标签,需要考虑的是,我们需要将文字进行分割,则css需要获取到我们的的文字,则需要一个自定义的属性,这里我是用的是 text-content 

        2. CSS样式:

                (1). 最重要的就是 ::before , ::after 内使用 content:attr(text-content) 拿到文字,然后将两个元素各裁剪一半,放在指定的位置即可

                (2). 移动这里我选择使用的是 transform 搭配 transition 的组合,当然也可以使用关键帧动画来进行实现,不过能用简单的为什么不用呢~

HTML





  
  
  
  文字切割



  

艺术与代码的完美结合

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ecf0f1;
}

h1 {
  font-size: 50px;
  position: relative;
  color: transparent;
  caret-color: white;
  outline: none;
  cursor: text;
  white-space: nowrap;
}

h1::before,
h1::after {
  content: attr(text-content);
  /* 将文字内容赋给伪元素 */
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  color: #000;
}

h1::before {
  top: 0;
  height: 50%;
  border-bottom: 1px solid transparent;
  /* 实现中心有切割效果的样式 */
  box-sizing: border-box;
  transition: all 1.6s;
}

h1::after {
  bottom: 0;
  height: 50%;
  display: flex;
  align-items: flex-end;
  border-top: 1px solid transparent;
  /* 实现中心有切割效果的样式 */
  box-sizing: border-box;
  /* 该样式是为了让border显示出来 */
  transition: all 1.6s;
}


h1:hover {
  cursor: pointer;
}

h1:hover::before {
  color: #e74c3c;
  transform: translateX(.5em);
  /* 移动半个文字的距离 */
}

h1:hover::after {
  color: #e74c3c;
  transform: translateX(-.5em);
}

至此,这个CSS效果已经实现,期望对你有所收获~O(∩_∩)O哈哈~


        在这个精彩的探索中,我们学会了如何用简单的CSS代码创造出令人惊叹的鼠标悬停文字分割动画效果。通过将想象转化为现实,我们让文字在用户的互动下舞动,为网页增添了独特的艺术性和魅力。无论你是新手还是经验丰富的开发者,我希望本文能够激发你的创意,并在实践中探索更多可能。如果你有任何问题或想法,欢迎在评论区与我分享。让我们继续探索前端的无限魅力,用代码书写出更多令人惊叹的故事吧!感谢阅读,期待与你的下一次相约!

你可能感兴趣的:(CSS魔法工坊,css)