文本/链接

CSS3文字震动破碎特效

也想出现在这里?联系我们
面包多

CSS3文字震动破碎特效-创客云
这是一款 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

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

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

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!