Current path: home/webdevt/www/wdp/wp-content/plugins/supreme-modules-pro-for-divi/includes/modules/GlitchText/
?? Go up: /home/webdevt/www/wdp/wp-content/plugins/supreme-modules-pro-for-divi/includes/modules
.dsm-glitch-text {
position: relative;
}
.dsm-glitch-text:before, .dsm-glitch-text:after {
content: attr(data-dsm-glitch-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.dsm-glitch-effect-type-one:after {
left: 2px;
text-shadow: -1px 0 red;
animation: dsm-glitch-anim-one-1 2s infinite linear alternate-reverse;
}
.dsm-glitch-effect-type-one:before {
left: -2px;
text-shadow: 2px 0 blue;
animation: dsm-glitch-anim-one-2 3s infinite linear alternate-reverse;
}
.dsm-glitch-effect-type-two::after {
left: 2px;
text-shadow: -1px 0 purple;
animation: dsm-glitch-anim-one-1 2s infinite linear alternate-reverse;
}
.dsm-glitch-effect-type-two::before {
left: -2px;
text-shadow: 2px 0 green;
animation: dsm-glitch-anim-two-2 3s infinite linear alternate-reverse;
}
.dsm-glitch-effect-type-three:before {
animation: dsm-glitch-anim-three-1 2.5s infinite;
color: inherit;
z-index: 1;
}
.dsm-glitch-effect-type-three>span {
display: block;
animation: dsm-glitch-anim-three-2 2.5s infinite;
color: red;
z-index: -1;
}
.dsm-glitch-effect-type-three:after {
color:blue;
animation: dsm-glitch-anim-three-3 2.5s infinite;
z-index: -1;
}
@keyframes dsm-glitch-anim-one-1 {
0% {
clip-path: inset(82% 0 13% 0);
}
5.8823529412% {
clip-path: inset(17% 0 48% 0);
}
11.7647058824% {
clip-path: inset(11% 0 88% 0);
}
17.6470588235% {
clip-path: inset(2% 0 11% 0);
}
23.5294117647% {
clip-path: inset(48% 0 3% 0);
}
29.4117647059% {
clip-path: inset(34% 0 61% 0);
}
35.2941176471% {
clip-path: inset(10% 0 83% 0);
}
41.1764705882% {
clip-path: inset(83% 0 1% 0);
}
47.0588235294% {
clip-path: inset(36% 0 4% 0);
}
52.9411764706% {
clip-path: inset(52% 0 16% 0);
}
58.8235294118% {
clip-path: inset(86% 0 4% 0);
}
64.7058823529% {
clip-path: inset(49% 0 7% 0);
}
70.5882352941% {
clip-path: inset(35% 0 53% 0);
}
76.4705882353% {
clip-path: inset(3% 0 19% 0);
}
82.3529411765% {
clip-path: inset(28% 0 40% 0);
}
88.2352941176% {
clip-path: inset(62% 0 3% 0);
}
94.1176470588% {
clip-path: inset(42% 0 28% 0);
}
100% {
clip-path: inset(17% 0 20% 0);
}
}
@keyframes dsm-glitch-anim-one-2 {
0% {
clip-path: inset(72% 0 6% 0);
}
5.8823529412% {
clip-path: inset(2% 0 87% 0);
}
11.7647058824% {
clip-path: inset(52% 0 49% 0);
}
17.6470588235% {
clip-path: inset(9% 0 10% 0);
}
23.5294117647% {
clip-path: inset(12% 0 65% 0);
}
29.4117647059% {
clip-path: inset(48% 0 45% 0);
}
35.2941176471% {
clip-path: inset(14% 0 41% 0);
}
41.1764705882% {
clip-path: inset(55% 0 4% 0);
}
47.0588235294% {
clip-path: inset(10% 0 3% 0);
}
52.9411764706% {
clip-path: inset(14% 0 45% 0);
}
58.8235294118% {
clip-path: inset(54% 0 18% 0);
}
64.7058823529% {
clip-path: inset(93% 0 7% 0);
}
70.5882352941% {
clip-path: inset(89% 0 12% 0);
}
76.4705882353% {
clip-path: inset(83% 0 17% 0);
}
82.3529411765% {
clip-path: inset(55% 0 13% 0);
}
88.2352941176% {
clip-path: inset(66% 0 5% 0);
}
94.1176470588% {
clip-path: inset(40% 0 49% 0);
}
100% {
clip-path: inset(16% 0 42% 0);
}
}
@keyframes dsm-glitch-anim-two-1 {
0% {
clip-path: inset(4% 0 27% 0);
}
10% {
clip-path: inset(15% 0 57% 0);
}
20% {
clip-path: inset(79% 0 14% 0);
}
30% {
clip-path: inset(9% 0 43% 0);
}
40% {
clip-path: inset(47% 0 44% 0);
}
50% {
clip-path: inset(63% 0 26% 0);
}
60% {
clip-path: inset(44% 0 47% 0);
}
70% {
clip-path: inset(71% 0 22% 0);
}
80% {
clip-path: inset(48% 0 36% 0);
}
90% {
clip-path: inset(4% 0 24% 0);
}
100% {
clip-path: inset(72% 0 12% 0);
}
}
@keyframes dsm-glitch-anim-two-2 {
0% {
clip-path: inset(24% 0 29% 0);
}
10% {
clip-path: inset(54% 0 21% 0);
}
20% {
clip-path: inset(28% 0 28% 0);
}
30% {
clip-path: inset(27% 0 47% 0);
}
40% {
clip-path: inset(13% 0 55% 0);
}
50% {
clip-path: inset(9% 0 37% 0);
}
60% {
clip-path: inset(22% 0 73% 0);
}
70% {
clip-path: inset(4% 0 94% 0);
}
80% {
clip-path: inset(98% 0 1% 0);
}
90% {
clip-path: inset(74% 0 26% 0);
}
100% {
clip-path: inset(54% 0 10% 0);
}
}
@keyframes dsm-glitch-anim-three-1 {
0% {
transform: none;
opacity: 1;
}
7% {
transform: skew(-0.5deg, -0.9deg);
opacity: 0.75;
}
10% {
transform: none;
opacity: 1;
}
27% {
transform: none;
opacity: 1;
}
30% {
transform: skew(0.8deg, -0.1deg);
opacity: 0.75;
}
35% {
transform: none;
opacity: 1;
}
52% {
transform: none;
opacity: 1;
}
55% {
transform: skew(-1deg, 0.2deg);
opacity: 0.75;
}
50% {
transform: none;
opacity: 1;
}
72% {
transform: none;
opacity: 1;
}
75% {
transform: skew(0.4deg, 1deg);
opacity: 0.75;
}
80% {
transform: none;
opacity: 1;
}
100% {
transform: none;
opacity: 1;
}
}
@keyframes dsm-glitch-anim-three-2 {
0% {
transform: none;
opacity: 0.25;
}
7% {
transform: translate(-2px, -3px);
opacity: 0.5;
}
10% {
transform: none;
opacity: 0.25;
}
27% {
transform: none;
opacity: 0.25;
}
30% {
transform: translate(-5px, -2px);
opacity: 0.5;
}
35% {
transform: none;
opacity: 0.25;
}
52% {
transform: none;
opacity: 0.25;
}
55% {
transform: translate(-5px, -1px);
opacity: 0.5;
}
50% {
transform: none;
opacity: 0.25;
}
72% {
transform: none;
opacity: 0.25;
}
75% {
transform: translate(-2px, -6px);
opacity: 0.5;
}
80% {
transform: none;
opacity: 0.25;
}
100% {
transform: none;
opacity: 0.25;
}
}
@keyframes dsm-glitch-anim-three-3 {
0% {
transform: none;
opacity: 0.25;
}
7% {
transform: translate(2px, 3px);
opacity: 0.5;
}
10% {
transform: none;
opacity: 0.25;
}
27% {
transform: none;
opacity: 0.25;
}
30% {
transform: translate(5px, 2px);
opacity: 0.5;
}
35% {
transform: none;
opacity: 0.25;
}
52% {
transform: none;
opacity: 0.25;
}
55% {
transform: translate(5px, 1px);
opacity: 0.5;
}
50% {
transform: none;
opacity: 0.25;
}
72% {
transform: none;
opacity: 0.25;
}
75% {
transform: translate(2px, 6px);
opacity: 0.5;
}
80% {
transform: none;
opacity: 0.25;
}
100% {
transform: none;
opacity: 0.25;
}
}
