❤
❤
❤
❤
❤
n
i
e
t
s
l
o
h
g
i
w
s
e
l
h
c
S
n
i
e
d
r
ö
f
n
r
e
k
c
E
❤
❤
❤
❤
❤
<div class="frame">
<div class="text">
<span>❤</span>
<span>❤</span>
<span>❤</span>
<span>❤</span>
<span>❤</span>
<span>n</span>
<span>i</span>
<span>e</span>
<span>t</span>
<span>s</span>
<span>l</span>
<span>o</span>
<span>h</span>
<span>g</span>
<span>i</span>
<span>w</span>
<span>s</span>
<span>e</span>
<span>l</span>
<span>h</span>
<span>c</span>
<span>S</span>
<span></span>
<span>n</span>
<span>i</span>
<span></span>
<span>e</span>
<span>d</span>
<span>r</span>
<span>ö</span>
<span>f</span>
<span>n</span>
<span>r</span>
<span>e</span>
<span>k</span>
<span>c</span>
<span>E</span>
<span>❤</span>
<span>❤</span>
<span>❤</span>
<span>❤</span>
<span>❤</span>
</div>
</div>
<style>
.ich {
--duration: 15s;
--size: 80vw;
--characters: 14;
--font-size: 40px;
--delay-character: 0.33s;
/*--text-color-hover: blue;*/
}
.text{
color:#777;
}
.frame {
width: 660px;
height: 500px;
max-width: 660px;
max-height: 500px;
margin: 0 auto;
border: 10px #fbfbfb solid;
position: relative;
box-shadow: inset 0 0 0 20px white;
background: url(/wp-content/uploads/2022/12/IMG_7039-scaled.jpg) no-repeat center;
background-size: cover;
transition: ease all 0.3s;
}
.frame:hover {
box-shadow: inset 0 0 0 0 white;
border: 2px #f9f9f9 solid;
cursor: pointer;
}
.frame:hover .text {
mix-blend-mode: normal;
}
.frame:hover .text span {
/*color: var(--text-color-hover);*/
color:red;
}
.frame .text {
transform: translate(calc(calc(var(--font-size) * -1) / 2), calc(calc(var(--font-size) * -1) / 2));
position: relative;
height: 100%;
transition: ease all 0.3s;
}
.frame span {
font-size: var(--font-size);
/*font-size:40px;*/
display: inline-block;
text-align: center;
width: var(--font-size);
animation: frameMove var(--duration) linear infinite;
position: absolute;
transition: ease all 0.3s;
}
.frame span:nth-of-type(1) {
animation-delay: calc(var(--delay-character) * 1);
}
.frame span:nth-of-type(2) {
animation-delay: calc(var(--delay-character) * 2);
}
.frame span:nth-of-type(3) {
animation-delay: calc(var(--delay-character) * 3);
}
.frame span:nth-of-type(4) {
animation-delay: calc(var(--delay-character) * 4);
}
.frame span:nth-of-type(5) {
animation-delay: calc(var(--delay-character) * 5);
}
.frame span:nth-of-type(6) {
animation-delay: calc(var(--delay-character) * 6);
}
.frame span:nth-of-type(7) {
animation-delay: calc(var(--delay-character) * 7);
}
.frame span:nth-of-type(8) {
animation-delay: calc(var(--delay-character) * 8);
}
.frame span:nth-of-type(9) {
animation-delay: calc(var(--delay-character) * 9);
}
.frame span:nth-of-type(10) {
animation-delay: calc(var(--delay-character) * 10);
}
.frame span:nth-of-type(11) {
animation-delay: calc(var(--delay-character) * 11);
}
.frame span:nth-of-type(12) {
animation-delay: calc(var(--delay-character) * 12);
}
.frame span:nth-of-type(13) {
animation-delay: calc(var(--delay-character) * 13);
}
.frame span:nth-of-type(14) {
animation-delay: calc(var(--delay-character) * 14);
}
.frame span:nth-of-type(15) {
animation-delay: calc(var(--delay-character) * 15);
}
.frame span:nth-of-type(16) {
animation-delay: calc(var(--delay-character) * 16);
}
.frame span:nth-of-type(17) {
animation-delay: calc(var(--delay-character) * 17);
}
.frame span:nth-of-type(18) {
animation-delay: calc(var(--delay-character) * 18);
}
.frame span:nth-of-type(19) {
animation-delay: calc(var(--delay-character) * 19);
}
.frame span:nth-of-type(20) {
animation-delay: calc(var(--delay-character) * 20);
}
.frame span:nth-of-type(21) {
animation-delay: calc(var(--delay-character) * 21);
}
.frame span:nth-of-type(22) {
animation-delay: calc(var(--delay-character) * 22);
}
.frame span:nth-of-type(23) {
animation-delay: calc(var(--delay-character) * 23);
}
.frame span:nth-of-type(24) {
animation-delay: calc(var(--delay-character) * 24);
}
.frame span:nth-of-type(25) {
animation-delay: calc(var(--delay-character) * 25);
}
.frame span:nth-of-type(26) {
animation-delay: calc(var(--delay-character) * 26);
}
.frame span:nth-of-type(27) {
animation-delay: calc(var(--delay-character) * 27);
}
.frame span:nth-of-type(28) {
animation-delay: calc(var(--delay-character) * 28);
}
.frame span:nth-of-type(29) {
animation-delay: calc(var(--delay-character) * 29);
}
.frame span:nth-of-type(30) {
animation-delay: calc(var(--delay-character) * 30);
}
.frame span:nth-of-type(31) {
animation-delay: calc(var(--delay-character) * 31);
}
.frame span:nth-of-type(32) {
animation-delay: calc(var(--delay-character) * 32);
}
.frame span:nth-of-type(33) {
animation-delay: calc(var(--delay-character) * 33);
}
.frame span:nth-of-type(34) {
animation-delay: calc(var(--delay-character) * 34);
}
.frame span:nth-of-type(35) {
animation-delay: calc(var(--delay-character) * 35);
}
.frame span:nth-of-type(36) {
animation-delay: calc(var(--delay-character) * 36);
}
.frame span:nth-of-type(37) {
animation-delay: calc(var(--delay-character) * 37);
}
.frame span:nth-of-type(38) {
animation-delay: calc(var(--delay-character) * 38);
}
.frame span:nth-of-type(39) {
animation-delay: calc(var(--delay-character) * 39);
}
.frame span:nth-of-type(40) {
animation-delay: calc(var(--delay-character) * 40);
}
.frame span:nth-of-type(41) {
animation-delay: calc(var(--delay-character) * 41);
}
.frame span:nth-of-type(42) {
animation-delay: calc(var(--delay-character) * 42);
}
.frame span:nth-of-type(43) {
animation-delay: calc(var(--delay-character) * 43);
}
.frame span:nth-of-type(44) {
animation-delay: calc(var(--delay-character) * 44);
}
.frame span:nth-of-type(45) {
animation-delay: calc(var(--delay-character) * 45);
}
.frame span:nth-of-type(46) {
animation-delay: calc(var(--delay-character) * 46);
}
.frame span:nth-of-type(47) {
animation-delay: calc(var(--delay-character) * 47);
}
.frame span:nth-of-type(48) {
animation-delay: calc(var(--delay-character) * 48);
}
.frame span:nth-of-type(49) {
animation-delay: calc(var(--delay-character) * 49);
}
.frame span:nth-of-type(50) {
animation-delay: calc(var(--delay-character) * 50);
}
.frame span:nth-of-type(51) {
animation-delay: calc(var(--delay-character) * 51);
}
.frame span:nth-of-type(52) {
animation-delay: calc(var(--delay-character) * 52);
}
@keyframes frameMove {
0% {
top: 0;
left: 0;
transform: rotate(0deg);
}
24% {
top: 0;
left: 100%;
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
49% {
top: 100%;
left: 100%;
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
74% {
top: 100%;
left: 0%;
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
99% {
top: 0%;
left: 0%;
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
❤
❤
❤
n
i
e
t
s
l
o
h
g
i
w
s
e
l
h
c
S
n
i
e
d
r
ö
f
n
r
e
k
c
E
❤
❤
❤
