Animierter SVG Briefumschlag CSS snippet
Ein kleiner Briefumschlag, in den sich ein Brief hineinschiebt und dann schließt. Die SVG kann man unter anderem verwenden, um Links zu Kontaktdaten optisch hervorzuheben. Die CSS-Angaben sind in der SVG eingebettet, können aber auch extern dazugeladen werden - das kann jedoch in einigen CMS Darstellungsprobleme verursachen.
Die Animation spielt 10 Mal ab.
So sieht die Animation aus
Der Quellcode
SVG
<?xml version="1.0" encoding="UTF-8"?>
<svg class="cd" xmlns="http://www.w3.org/2000/svg" width="474.1717" height="393.9304" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 474.1717 393.9304">
<defs>
<style>
.space {fill: transparent;}
.frontlight {fill: url(#gradient_2);}
.light {fill: url(#gradient_1);}
.letter {fill: #e4f8ab;transform: translateY(-5%);}
.lines {fill: #8cc63f;}
.dark {fill: #079876;}
.shadow {fill: #0089c0;}
.foldlight {transform:translateY(-1px);}
.foldlight .fold {transform: rotateX(90deg);}
#envelope {transform:rotate(0deg);transform-origin:center center;animation: wobble 16s 10 linear;animation-fill-mode: forwards;}
#envelope .folddark .dark {animation: folddark 16s 10 linear;animation-fill-mode: forwards;}
#envelope .foldlight .fold {transform:rotateX(90deg) ;animation: foldlight 16s 10 linear;animation-fill-mode: forwards;}
#envelope .fold,
#envelope .dark {
transform-origin: center 100%;will-change: transform; transform: translateZ(0);perspective: 580px;transform-box: fill-box;transform-style: preserve-3d;
animation-fill-mode: forwards;}
#envelope .letter {
animation: drop 16s 10 cubic-bezier(.86,0,.62,1.2);animation-fill-mode: forwards;will-change: transform; transform: translateZ(0);z-index:0;position:absolute;
position:center bottom;}
@keyframes wobble{
0%{transform: rotate(0deg);}
3%{transform: rotate(0deg);}
5%{transform: rotate(-1deg);}
7%{transform: rotate(2deg);}
9%{transform: rotate(0);}
100%{transform: rotate(0deg);}
}
@keyframes drop{
0%{transform: translateY(-5%);}
15%{transform: translateY(-5%);}
20%{transform: translateY(19%);}
95%{transform: translateY(19%);}
96.5%{transform: translateY(-5%);}
98%{transform: translateY(-4%);}
100%{transform: translateY(-5%);}
}
@keyframes folddark{
0%{transform:rotateX(0deg);}
25%{transform:rotateX(0deg);}
28%{transform:rotateX(90deg);}
90%{transform:rotateX(90deg);}
91%{transform:rotateX(0deg);}
100%{transform:rotateX(0deg);}
}
@keyframes foldlight{
0%{transform:rotateX(90deg);}
28%{transform:rotateX(90deg);}
29%{transform:rotateX(180deg);}
89%{transform:rotateX(180deg);}
90%{transform:rotateX(90deg);}
100%{transform:rotateX(90deg);}
}
</style>
<linearGradient id="gradient_4" data-name="gradient 1" x1="75.0394" y1="268.9985" x2="479.4641" y2="424.2282" gradientTransform="translate(0 453.475) scale(1 -1)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#81c4de"/>
<stop offset=".1366" stop-color="#77c0dd"/>
<stop offset=".3638" stop-color="#5eb5db"/>
<stop offset=".6517" stop-color="#35a5d8"/>
<stop offset=".7944" stop-color="#1e9cd7"/>
</linearGradient>
<linearGradient id="gradient_2" data-name="gradient 2" x1="38.3751" y1="152.9605" x2="418.2804" y2="361.1133" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#81c4de"/>
<stop offset=".172" stop-color="#77c0dd"/>
<stop offset=".4579" stop-color="#5eb5db"/>
<stop offset=".8203" stop-color="#35a5d8"/>
<stop offset="1" stop-color="#1e9cd7"/>
</linearGradient>
</defs>
<g id="envelope" >
<rect class="space" width="474.1717" height="393.9304"/>
<g class="folddark">
<path class="dark" d="M223.4026,19.6785L26.0581,128.218c-3.4927,1.921-5.6626,5.591-5.6626,9.577v9.1613h433.1924v-9.1613c0-3.9861-2.17-7.6561-5.6626-9.577L250.5807,19.6785c-8.4617-4.6539-18.7165-4.6539-27.1782,0Z"/>
</g>
<g class="back">
<rect class="dark" x="20.3955" y="146.4358" width="433.1924" height="227.5061"/>
</g>
<g class="letter">
<rect class="paper" x="40.9706" y="71.0758" width="390.9036" height="221.9661"/>
<g>
<rect class="lines" x="80.616" y="111.9255" width="143.5163" height="4.9641"/>
<rect class="lines" x="80.616" y="141.8593" width="308.6174" height="3.5345"/>
<rect class="lines" x="80.616" y="162.0059" width="308.6174" height="3.5345"/>
<rect class="lines" x="80.616" y="182.1525" width="308.6174" height="3.5345"/>
<rect class="lines" x="80.616" y="202.2991" width="308.6174" height="3.5345"/>
<rect class="lines" x="80.616" y="222.4457" width="308.6174" height="3.5345"/>
<rect class="lines" x="80.616" y="242.5923" width="308.6174" height="3.5345"/>
<rect class="lines" x="80.616" y="262.7389" width="308.6174" height="3.5345"/>
<rect class="lines" x="80.616" y="282.8855" width="308.6174" height="3.5345"/>
</g>
</g>
<g class="front">
<path class="frontlight" d="M439.228,149.5733c-1.5085,0-2.9913.3909-4.3037,1.1346l-180.6148,102.3484-7.6881-3.9047c-4.7509-2.613-14.5086-2.613-19.2595,0l-7.6881,3.9047L39.0591,150.7079c-1.3125-.7437-2.7953-1.1347-4.3039-1.1347h-14.3597v224.4213h433.1924v-224.4213h-14.3598Z"/>
<path class="shadow" d="M217.4924,251.8765s-139.9882,74.6805-185.2848,99.0596c-6.3117,3.397-11.8122,10.9549-11.8122,10.9549v1.4526s3.9672-6.8021,12.6739-11.6205c42.1853-23.346,168.264-88.5117,186.6223-98.6532-.121-.0758-2.0897-1.1061-2.1992-1.1935Z"/>
<path class="shadow" d="M256.9471,251.5906c-.1818.1423-2.4042,1.3531-2.6039,1.4621,14.0867,8.0293,146.5596,73.3682,190.5945,100.3021,4.107,2.512,8.6501,9.7508,8.6501,9.7508v-.0649s-1.8267-6.0746-9.0574-10.624c-34.1981-21.5166-187.5833-100.8261-187.5833-100.8261Z"/>
</g>
<g class="foldlight">
<g class="fold">
<path class="light" d="M223.4968,19.82L26.1523,128.3595c-3.4927,1.921-5.6626,5.591-5.6626,9.577v9.1613h433.1924v-9.1613c0-3.9861-2.17-7.6561-5.6626-9.577L250.6749,19.82c-8.4617-4.6539-18.7165-4.6539-27.1782,0Z"/>
<path class="shadow" d="M453.1144,134.4627c-.9265-2.3018-2.8485-4.1481-5.0951-5.3838L250.675,20.5395c-4.2308-2.3269-8.91-3.4905-13.5891-3.4905s-9.3583,1.1636-13.5891,3.4905L26.1523,129.0789c-2.2467,1.2357-4.1368,3.0889-5.0634,5.3907h0c.9739-2.6713,2.4371-4.4704,5.0085-5.8845L223.0148,19.6633c4.2991-2.3644,9.1647-3.6143,14.071-3.6143s9.772,1.2499,14.071,3.6143l197.4352,109.0438c1.9117,1.3156,3.569,3.105,4.5429,5.7763l-.0206-.0206Z"/>
</g></g>
</g>
</svg>
