哈喽！大家好！今儿咱们说说有趣的事儿！听说过用HTML5和CSS3画个笑脸吗？我还挺期待这个挑战的！有点不信？咱们一起瞧瞧呗，详细步骤在HTML5里的svg和CSS3动画里等着你！当然别忘了先温习下之前那篇《HTML5+CSS3画出一只大象》，相信你肯定会爱上它的！
先搞定页面背景和笑脸布尺寸再挑专属自己的直线色。笑容满满地上班，感觉更有活力咯！别急，还有更多有趣的在后头等着！
body {
background: #222;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
margin: 0;
}
svg {
display: block;
height: 90vmin;
width: 90vmin;
}
.stroke {
stroke-width: 1;
stroke: #fff;
fill: none;
}
来了老铁们，今天开始咱们要学习如何利用 HTML5 的svg来制作大伙儿都喜欢的笑脸。说起 SVG, 这玩意儿是个用来快速画矢量图形的神奇编程工具。它不仅有特别的角度和坐标设定，玩起来还特别有意思！不过千万别忘了我们得把svg元素塞进类似HTML文档那样的基本框架里面才能使用哟。接下来，得学会如何运用path元素来画出各种花样图形。这个小小的元素能画出各种各样的精美图案，填充和不填充全看你喜好！虽然 path 元素听起来可能有点抽象难懂，但却是在 SVG 世界里最实用、最常见的技能了哟~
搞定了，笑脸的涂鸦画完了！别急，还没结束！下面我们要给它上点颜色，做成动态图片咯！听着简单？就是把 stroke 那个东东跟表情图关联起来，调高低数值就搞定咯！比如说，用 stroke-dasharray 和 stroke-dashoffset 这俩东西，可以让笑脸先隐藏一会儿，然后再悄悄露出来。不过记住，实际的动画效果可能跟你想的有点不太一样。
想让动画看起来更酷的话，尝试下@keyframes规则！记得设置’stroke-dashoffels’设为0，那样你就能看见笑脸逐渐出现。不过，在滑动过程中别忘了添加’animation-delay’属性，这能确保脸部、眼睛、鼻子和嘴巴出现得更有节奏感。这么做，你的笑脸会更生动活泼！
看好了！咱们制作的动画终于上线了！但这才刚刚起步！我要给大家科普几个超实用的标签和属性首先，你知道SVG图吗？这些都是由一堆小图标组合成的，像拼积木那样，能拼贴出漂亮的形状。而且，即使svg不在最上面，也可以当作“家”，其他svg模块都能住进来。每个模块都有独特的画风和坐标体系。再来说说Path元素，这个货简直就是画出各种形状的神奇利器！最后，千万别忘记用animation属性，肯定能让你的作品增色不少！
.stroke {
stroke-linecap: round;
}
小伙伴们，揭晓答案~想要笑脸复活，必须要用到HTML5的SVG和CSS3的神奇魔法！开始，先把网站颜色调整为咱们喜欢的样子，然后改变SVG的大小，画出那个可爱的笑脸曲线。接下来，给.stroke模块配上动画，想好它的隐藏方法，再指定一下动画的运动轨迹。当然，动画的跑动也要看@keyframes的指挥，通过设置animation-delay掌握起跑时间。照着这样画下去，我们就能得到一个栩栩如生的头像，是不是很有趣？赶紧去试一试，相信你们一定会迷上这个新技能的！别忘了留言告诉我你们的体验！学会这些新知识，以后浏览网页也能变得更有趣了。说实话，这种技巧牛不牛？试试用HTML5的SVG和CSS3制作动画，就算是提升了自己的技术才华，同时也乐在其中。快去亲身尝试一番，保证你们会喜欢上这个简单易学的新技术！
.stroke {
animation: stroke-anim 2s linear forwards;
stroke-dasharray: 300;
stroke-dashoffset: 300;
}
评论0