文本/链接

CSS3文字震动破碎特效

PetitQPetitQ 文本/链接 2019-11-22 1.94K 0
收藏
阿里云


这是一款 css3 文字震动破碎特效。该特效通过伪元素和 CSS3 帧动画来实现文字震动之后，碎裂开来的效果。
HTML 结构

  1. <h2 data-text="black mirror"><span>black mirror</span></h2>
也想出现在这里？联系我们吧
创客主机

CSS 样式

  1. body {
  2.     display: flex;
  3.     flex-direction: column;
  4.     justify-content: center;
  5.     align-items: center;
  6.     height: 100vh;
  7.     background-color: #000;
  8.     overflow: hidden;
  9. }
  10.  
  11. h2 {
  12.     position: relative;
  13.     font-family: 'Montserrat', Arial, sans-serif;
  14.     font-size: calc(20px + 5vw);
  15.     font-weight: 700;
  16.     color: #fff;
  17.     letter-spacing: 0.02em;
  18.     text-transform: uppercase;
  19.     text-shadow: 0 0 0.15em #1da9cc;
  20.     user-select: none;
  21.     white-space: nowrap;
  22.     filter: blur(0.007em);
  23.     animation: shake 2.5s linear forwards;
  24. }
  25.  
  26. h2 span {
  27.     position: absolute;
  28.     top: 0;
  29.     left: 0;
  30.     transform: translate(-50%, -50%);
  31.     -webkit-clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
  32.             clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
  33. }
  34.  
  35. h2::before,
  36. h2::after {
  37.     content: attr(data-text);
  38.     position: absolute;
  39.     top: 0;
  40.     left: 0;
  41. }
  42.  
  43. h2::before {
  44.     animation: crack1 2.5s linear forwards;
  45.     -webkit-clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
  46.             clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
  47. }
  48.  
  49. h2::after {
  50.     animation: crack2 2.5s linear forwards;
  51.     -webkit-clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
  52.             clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
  53. }
  54.  
  55. @keyframes shake {
  56.     5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% {
  57.         filter: blur(0.018em);
  58.         transform: translateY(0.018em) rotate(0deg);
  59.     }
  60.  
  61.     10%, 30%, 40%, 50%, 70%, 80%, 90% {
  62.         filter: blur(0.01em);
  63.         transform: translateY(-0.018em) rotate(0deg);
  64.     }
  65.  
  66.     20%, 60% {
  67.         filter: blur(0.03em);
  68.         transform: translate(-0.018em, 0.018em) rotate(0deg);
  69.     }
  70.  
  71.     45%, 85% {
  72.         filter: blur(0.03em);
  73.         transform: translate(0.018em, -0.018em) rotate(0deg);
  74.     }
  75.  
  76.     100% {
  77.         filter: blur(0.007em);
  78.         transform: translate(0) rotate(-0.5deg);
  79.     }
  80. }
  81.  
  82. @keyframes crack1 {
  83.     0%, 95% {
  84.         transform: translate(-50%, -50%);
  85.     }
  86.  
  87.     100% {
  88.         transform: translate(-51%, -48%);
  89.     }
  90. }
  91.  
  92. @keyframes crack2 {
  93.     0%, 95% {
  94.         transform: translate(-50%, -50%);
  95.     }
  96.  
  97.     100% {
  98.         transform: translate(-49%, -53%);
  99.     }
  100. }

Codepen 网址：https://codepen.io/GeorgePark/pen/jeBbGN

CSS3 文字震动破碎特效

已有 484 人购买
  • q7m6
查看演示升级 VIP立刻购买

演示地址 下载地址

咨询客服 中文演示

专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！

创客主机
收藏
赞(0)

相关文章

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！

登录