What we want to share this time is a way to realize expression animation, which is to realize a set of animated expressions through SVG combined with CSS3, draw expressions using SVG's path function, and then use CSS3 to make expressions animated.
Advertisement
<svg xmlns:dc="https://www.xxx.com/" xmlns:cc="https://www.xxx.com/ns#" xmlns:rdf="https://www.xxx.com/22-rdf-syntax-ns#" xmlns:svg="https://www.xxx.com/svg" xmlns="https://www.xxx.com/svg" viewBox="0 0 47.5 47.5" style="enable-background:new 0 0 47.5 47.5;"
xml:space="preserve" version="1.1" id="svg2">
<metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="https://www.xxx.com/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath16" clipPathUnits="userSpaceOnUse"><path id="path18" d="M 0,38 38,38 38,0 0,0 0,38 Z"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,47.5)" id="g10"><g id="head_5"><g clip-path="url(#clipPath16)" id="g14"><g transform="translate(36,19)" id="g20"><path id="path22" style="fill:#ffcc4d;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-9.389 -7.611,-17 -17,-17 -9.388,0 -17,7.611 -17,17 0,9.388 7.612,17 17,17 C -7.611,17 0,9.388 0,0"/></g><g transform="translate(29.457,19.2031)" id="g24"><path id="path26" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.059,0.135 -1.499,3.297 -4.457,3.297 -2.957,0 -4.397,-3.162 -4.457,-3.297 -0.092,-0.207 -0.032,-0.449 0.144,-0.591 0.175,-0.142 0.426,-0.147 0.611,-0.014 0.012,0.009 1.262,0.902 3.702,0.902 2.426,0 3.674,-0.881 3.702,-0.901 0.088,-0.066 0.194,-0.099 0.298,-0.099 0.11,0 0.221,0.037 0.312,0.109 C 0.032,-0.452 0.093,-0.208 0,0"/></g><g transform="translate(17.457,19.2031)" id="g28"><path id="path30" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.06,0.135 -1.499,3.297 -4.457,3.297 -2.957,0 -4.397,-3.162 -4.457,-3.297 -0.092,-0.207 -0.032,-0.449 0.144,-0.591 0.176,-0.142 0.427,-0.147 0.61,-0.014 0.013,0.009 1.262,0.902 3.703,0.902 2.426,0 3.674,-0.881 3.702,-0.901 0.088,-0.066 0.194,-0.099 0.298,-0.099 0.11,0 0.221,0.037 0.312,0.109 C 0.033,-0.452 0.092,-0.208 0,0"/></g><g transform="translate(32,20.9995)" id="g32"><path id="brow_5" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C -0.396,0 -0.772,0.238 -0.929,0.629 -2.707,5.074 -7.151,6.01 -7.196,6.02 -7.737,6.128 -8.089,6.655 -7.98,7.196 -7.872,7.738 -7.346,8.087 -6.804,7.98 -6.578,7.936 -1.248,6.812 0.929,1.372 1.134,0.859 0.884,0.277 0.371,0.072 0.25,0.023 0.124,0 0,0"/></g><g transform="translate(5.9995,20.9995)" id="g36"><path id="brow_6" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C -0.124,0 -0.249,0.023 -0.371,0.072 -0.884,0.277 -1.133,0.859 -0.928,1.372 1.248,6.812 6.579,7.936 6.804,7.98 7.348,8.087 7.873,7.738 7.981,7.196 8.089,6.656 7.739,6.13 7.2,6.02 7.015,5.982 2.693,5.04 0.929,0.629 0.772,0.238 0.397,0.001 0,0"/></g><g transform="translate(19,15)" id="g40"><path id="mouth_5" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -3.623,0 -6.027,0.422 -9,1 -0.679,0.131 -2,0 -2,-2 0,-4 4.595,-9 11,-9 6.404,0 11,5 11,9 C 11,1 9.679,1.132 9,1 6.027,0.422 3.623,0 0,0"/></g><g transform="translate(10,14)" id="g44"><path id="mouth_6" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,0 3,-1 9,-1 6,0 9,1 9,1 0,0 -2,-4 -9,-4 -7,0 -9,4 -9,4"/></g><g transform="translate(11.8472,8.7705)" id="g48"><path id="tear_5" style="fill:#5dadec;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.68,-2.677 -3.4,-4.295 -6.077,-3.615 -2.676,0.678 -4.295,3.399 -3.615,6.076 0.679,2.677 6.337,8.708 7.307,8.462 C -1.417,10.677 0.679,2.677 0,0"/></g><g transform="translate(26.1328,8.7705)" id="g52"><path id="tear_6" style="fill:#5dadec;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0.68,-2.677 3.4,-4.295 6.077,-3.615 2.677,0.678 4.296,3.399 3.616,6.076 C 9.014,5.138 3.355,11.169 2.386,10.923 1.417,10.677 -0.679,2.677 0,0"/></g></g></g></g></svg>
body {
background-color: white;
}
.wrapper {
height: 100%;
width: 100%;
margin-top: 50px;
padding: 0;
align-items: center;
justify-content: center;
display: flex;
}
.wrapper .linkDiv{
position: absolute;
bottom: 10px;
font-size: 1em;
font-family: sans-serif;
}
.wrapper .linkDiv a{
color: #5dadec;
text-decoration: none;
}
.wrapper .linkDiv a::after{
content: '';
position: absolute;
right: 0;
width: 0;
height: 100%;
border-bottom: 2px solid #5dadec;
transition: width 300ms ease-out 0s;
}
.wrapper .linkDiv a:hover::after{
width: 7.6em;
transition: width 300ms ease-out 0s;
}
svg {
position: relative;
width: 10em;
transition: width 200ms ease-in-out 0s;
}
Advertisement
