纯css实现直线穿透文字动画特效

代码语言:html

所属分类:视觉差异

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link href="https://fonts.googleapis.com/css?family=Chilanka&display=swap" rel="stylesheet">
<style>
body {
  display: grid;
  place-content: center;
  overflow: hidden;
  margin: 0;
  height: 100vh;
  background: url(http://repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png) 50%/cover;
}

h1 {
  display: flex;
  position: relative;
  padding: 0 0.0625em;
  transform-style: preserve-3d;
  font: 900 10vw chilanka, segoe script, purisa, comic sans ms, cursive;
}
h1::after {
  position: absolute;
  top: calc(50% - .5*0.125em);
  right: 0;
  width: calc(50% + 50vw);
  height: 0.125em;
  border-radius: 0 0.125em 0.125em 0;
  background: crimson;
  animation: slide 2s ease-out;
  content: "";
}

.........完整代码请登录后点击上方下载按钮下载查看

网友评论0