第五篇案例展示
1.svg动画
1.1.svg基本语法使用
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./iconfont/iconfont.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}a {text-decoration: none;color: #000;}ul,li {list-style: none;}.nav {width: 500px;margin: 50px;display: flex;gap: 20px;}.nav li a {display: flex;/* 设置flex的主轴方向为垂直，子元素会垂直方向排列 */flex-direction: column;/* 控制子元素在交叉轴上居中对齐 */align-items: center;/* 控制子元素在主轴上居中对齐 */justify-content: center;}.nav a span {display: block;}.nav li a svg {width: 20px;height: 20px;}/* 鼠标经过li时，里面的svg有动画 */.nav li:hover svg {animation: move 0.5s;}/* 1.定义动画 */@keyframes move {0% {transform: translateY(0);}50% {transform: translateY(-5px);}100% {transform: translateY(0);}}</style>
</head><body><ul class="nav"><li><a href="#"><svg class="icon" width="200px" height="199.80px" viewBox="0 0 1025 1024" version="1.1"xmlns="http://www.w3.org/2000/svg"><pathd="M512.118374 131.072L603.766374 317.44c20.48 41.472 59.392 70.144 104.96 76.8l205.824 30.208-148.992 145.92c-32.768 32.256-47.616 78.336-39.936 123.392l35.328 205.824-183.296-96.768c-19.968-10.752-42.496-16.384-65.024-16.384-22.528 0-45.056 5.632-65.024 16.384l-183.296 96.768 35.328-205.824c7.68-45.056-7.168-91.136-39.936-123.392L109.686374 424.448 314.998374 394.24c45.568-6.656 84.992-35.328 104.96-76.8l92.16-186.368m0-112.64c-20.48 0-41.472 10.752-51.712 32.256L346.742374 281.6c-8.192 16.896-24.576 29.184-43.52 31.744L49.270374 350.208C2.166374 357.376-16.777626 415.232 17.526374 449.024l183.808 180.224c13.312 13.312 19.968 32.256 16.384 51.2l-43.52 253.952c-6.144 37.376 23.552 67.584 56.832 67.584 8.704 0 17.92-2.048 27.136-6.656L484.982374 875.52c8.192-4.608 17.92-6.656 27.136-6.656 9.216 0 18.432 2.048 27.136 6.656l226.816 119.808c8.704 4.608 17.92 6.656 27.136 6.656 33.792 0 63.488-30.208 56.832-67.584l-43.52-253.952c-3.072-18.944 3.072-37.888 16.384-51.2l183.808-180.224c34.304-33.28 15.36-91.648-32.256-98.304l-253.952-36.864c-18.944-2.56-35.328-14.848-43.52-31.744L563.830374 50.688c-10.752-21.504-31.232-32.256-51.712-32.256z" /></svg><span>收藏</span></a></li><li><a href="#"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg"><pathd="M511.73808594 93.19941406c-140.67070313 0-264.92695313 69.1453125-341.01035156 175.08955078v-70.47597656c0-21.66767578-17.61679688-39.22998047-39.346875-39.22998047s-39.346875 17.56318359-39.346875 39.22998047v156.91992188c0 21.66240234 17.61679688 39.22998047 39.346875 39.22998047h170.50341796c21.73007813 0 39.346875-17.56669922 39.346875-39.22998047 0-21.66767578-17.61679688-39.22998047-39.346875-39.22998047h-68.4421875c61.73085937-86.98798828 163.28496094-143.84267578 278.296875-143.84267578 188.32851562 0 341.00507812 152.22128906 341.00507813 339.99345703 0 187.76865234-152.6765625 339.99345703-341.00507813 339.99345703-158.73574219 0-291.74589844-108.29179688-329.75771484-254.70439453l-0.68291016 0.21269531c-5.3015625-15.41162109-19.54248047-26.65986328-36.8024414-26.65986328-21.73007813 0-39.346875 17.56318359-39.346875 39.22558594 0 3.86630859 1.16367187 7.36875 2.20605469 10.89316406l-0.40957032 0.12919922c0.25839844 0.95009766 0.73212891 1.8 0.99580078 2.74482422 0.28916016 0.76201172 0.48164063 1.52314453 0.81650391 2.2640625 49.92539062 175.47011719 210.98935547 304.35380859 402.98378906 304.35380859 231.79394531 0 419.69970703-187.35029297 419.69970703-418.45341797-0.00175781-231.10751953-187.90839844-418.45429688-419.70322265-418.45429687z m0 176.53183594c-21.73007813 0-39.346875 17.56318359-39.346875 39.22998047v235.37988281c0 21.66767578 17.61679688 39.22998047 39.346875 39.22998047h170.50253906c21.73007813 0 39.346875-17.56318359 39.346875-39.22558594 0-21.67119141-17.61679688-39.22998047-39.346875-39.22998047H551.08496094v-196.15429687c0-21.66767578-17.61767578-39.22998047-39.34775391-39.22998047z" /></svg><span>历史</span></a></li><li><a href="#"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg"><pathd="M93.090909 200.145455V837.818182c4.654545 51.2 51.2 93.090909 107.054546 93.090909H837.818182c51.2-4.654545 97.745455-51.2 97.745454-102.4V437.527273c-4.654545-18.618182-18.618182-32.581818-37.236363-32.581818s-32.581818 18.618182-32.581818 37.236363v386.327273c-4.654545 18.618182-18.618182 32.581818-37.236364 32.581818H190.836364c-18.618182-4.654545-32.581818-18.618182-32.581819-32.581818V195.490909c4.654545-18.618182 18.618182-32.581818 37.236364-32.581818h386.327273c18.618182-4.654545 32.581818-18.618182 32.581818-32.581818s-18.618182-32.581818-37.236364-32.581818H190.836364C134.981818 97.745455 93.090909 144.290909 93.090909 200.145455zM479.418182 488.727273c-9.309091 13.963636-9.309091 37.236364 4.654545 46.545454s37.236364 13.963636 46.545455 0L889.018182 186.181818c9.309091-13.963636 9.309091-32.581818-4.654546-46.545454-13.963636-13.963636-32.581818-13.963636-46.545454 0l-358.4 349.090909z" /></svg><span>创作中心</span></a></li></ul>
</body>1.2 svg的描边效果
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./iconfont/iconfont.css"><style>svg {/* 填充颜色 */fill: none;/* 描边颜色 */stroke: skyblue;/* 描边宽度 */stroke-width: 10;}/* 实现绘画效果 */@keyframes move {0% {/* 初始实线为0.间隔300 */stroke-dasharray: 0 300;}100% {/* 最终实线为300.间隔0 */stroke-dasharray: 300 0;}}/* 鼠标经过效果 */svg:hover {animation: move 1s;}</style>
</head><body><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg"><pathd="M511.73808594 93.19941406c-140.67070313 0-264.92695313 69.1453125-341.01035156 175.08955078v-70.47597656c0-21.66767578-17.61679688-39.22998047-39.346875-39.22998047s-39.346875 17.56318359-39.346875 39.22998047v156.91992188c0 21.66240234 17.61679688 39.22998047 39.346875 39.22998047h170.50341796c21.73007813 0 39.346875-17.56669922 39.346875-39.22998047 0-21.66767578-17.61679688-39.22998047-39.346875-39.22998047h-68.4421875c61.73085937-86.98798828 163.28496094-143.84267578 278.296875-143.84267578 188.32851562 0 341.00507812 152.22128906 341.00507813 339.99345703 0 187.76865234-152.6765625 339.99345703-341.00507813 339.99345703-158.73574219 0-291.74589844-108.29179688-329.75771484-254.70439453l-0.68291016 0.21269531c-5.3015625-15.41162109-19.54248047-26.65986328-36.8024414-26.65986328-21.73007813 0-39.346875 17.56318359-39.346875 39.22558594 0 3.86630859 1.16367187 7.36875 2.20605469 10.89316406l-0.40957032 0.12919922c0.25839844 0.95009766 0.73212891 1.8 0.99580078 2.74482422 0.28916016 0.76201172 0.48164063 1.52314453 0.81650391 2.2640625 49.92539062 175.47011719 210.98935547 304.35380859 402.98378906 304.35380859 231.79394531 0 419.69970703-187.35029297 419.69970703-418.45341797-0.00175781-231.10751953-187.90839844-418.45429688-419.70322265-418.45429687z m0 176.53183594c-21.73007813 0-39.346875 17.56318359-39.346875 39.22998047v235.37988281c0 21.66767578 17.61679688 39.22998047 39.346875 39.22998047h170.50253906c21.73007813 0 39.346875-17.56318359 39.346875-39.22558594 0-21.67119141-17.61679688-39.22998047-39.346875-39.22998047H551.08496094v-196.15429687c0-21.66767578-17.61767578-39.22998047-39.34775391-39.22998047z" /></svg><svg t="1760015322843" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="9768" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><pathd="M476.65047493 40.67345935H5.32393427c-8.67168037 0-15.71120688 7.03814567-15.71120688 15.70982604v926.9446361H52.45617408v-141.39810028c0-8.67306121 7.03814567-15.71120688 15.71120689-15.71120688h62.84206587c8.67306121 0 15.71258772 7.03814567 15.71258771 15.70982604v141.39810028h345.63826643V56.38328539c0-8.67168037-7.03676483-15.70982605-15.70982605-15.70982604z m-329.92844038 699.13351712a7.85836512 7.85836512 0 0 1-7.85698428 7.85698428H60.31315837a7.85836512 7.85836512 0 0 1-7.85560344-7.85698428V661.25508457a7.85836512 7.85836512 0 0 1 7.85560344-7.85560345h78.55465359a7.85836512 7.85836512 0 0 1 7.85560344 7.85560345v78.55465357z m0-172.81913322a7.85836512 7.85836512 0 0 1-7.85698428 7.85698428H60.31315837a7.85836512 7.85836512 0 0 1-7.85560344-7.85698428v-78.55465358a7.85836512 7.85836512 0 0 1 7.85560344-7.85560344h78.55465359a7.85836512 7.85836512 0 0 1 7.85560344 7.8569843v78.55327272z m0-172.8191332a7.85836512 7.85836512 0 0 1-7.85698428 7.85560344H60.31315837a7.85836512 7.85836512 0 0 1-7.85560344-7.85698428v-78.55327274a7.85836512 7.85836512 0 0 1 7.85560344-7.85698429h78.55465359a7.85836512 7.85836512 0 0 1 7.85560344 7.85698429v78.55465358z m0-172.82051405a7.85836512 7.85836512 0 0 1-7.85698428 7.85560343H60.31315837a7.85836512 7.85836512 0 0 1-7.85560344-7.85560343v-78.55465358a7.85836512 7.85836512 0 0 1 7.85560344-7.85560345h78.55465359a7.85836512 7.85836512 0 0 1 7.85560344 7.85698428v78.55327275z m141.39810028 518.4601613a7.85836512 7.85836512 0 0 1-7.85698427 7.85560345H201.71125865a7.85836512 7.85836512 0 0 1-7.85560343-7.85698428V661.25508457a7.85836512 7.85836512 0 0 1 7.85560343-7.85560345h78.55465357a7.85836512 7.85836512 0 0 1 7.85560346 7.85560345v78.55465357z m0-172.82051405a7.85836512 7.85836512 0 0 1-7.85698427 7.85698428H201.71125865a7.85836512 7.85836512 0 0 1-7.85560343-7.85698428v-78.55465358a7.85836512 7.85836512 0 0 1 7.85560343-7.85560344h78.55465357a7.85836512 7.85836512 0 0 1 7.85560346 7.8569843v78.55327272z m0-172.8191332a7.85836512 7.85836512 0 0 1-7.85698427 7.85560344H201.71125865a7.85836512 7.85836512 0 0 1-7.85560343-7.85698428v-78.55327274a7.85836512 7.85836512 0 0 1 7.85560343-7.85698429h78.55465357a7.85836512 7.85836512 0 0 1 7.85560346 7.85698429v78.55465358z m0-172.82051405a7.85836512 7.85836512 0 0 1-7.85698427 7.85560343H201.71125865a7.85836512 7.85836512 0 0 1-7.85560343-7.85560343v-78.55465358a7.85836512 7.85836512 0 0 1 7.85560343-7.85560345h78.55465357a7.85836512 7.85836512 0 0 1 7.85560346 7.85698428v78.55327275z m141.39810028 518.4601613a7.85836512 7.85836512 0 0 1-7.85698426 7.85560345H343.10935893a7.85836512 7.85836512 0 0 1-7.85560344-7.85698428V661.25508457a7.85836512 7.85836512 0 0 1 7.85560344-7.85560345h78.55465358a7.85836512 7.85836512 0 0 1 7.85560346 7.85560345v78.55465357z m0-172.82051405a7.85836512 7.85836512 0 0 1-7.85698426 7.85698428H343.10935893a7.85836512 7.85836512 0 0 1-7.85560344-7.85698428v-78.55465358a7.85836512 7.85836512 0 0 1 7.85560344-7.85560344h78.55465358a7.85836512 7.85836512 0 0 1 7.85560346 7.8569843v78.55327272z m0-172.8191332a7.85836512 7.85836512 0 0 1-7.85698426 7.85560344H343.10935893a7.85836512 7.85836512 0 0 1-7.85560344-7.85698428v-78.55327274a7.85836512 7.85836512 0 0 1 7.85560344-7.85698429h78.55465358a7.85836512 7.85836512 0 0 1 7.85560346 7.85698429v78.55465358z m0-172.82051405a7.85836512 7.85836512 0 0 1-7.85698426 7.85560343H343.10935893a7.85836512 7.85836512 0 0 1-7.85560344-7.85560343v-78.55465358a7.85836512 7.85836512 0 0 1 7.85560344-7.85560345h78.55465358a7.85836512 7.85836512 0 0 1 7.85560346 7.85698428v78.55327275zM1046.5000083 493.06867232L575.17346765 360.49966826c-10.02352353-2.81277275-19.96833915 4.71280972-19.96833914 15.1298729v607.69699949H618.0485752v-125.6868934c0-8.67168037 7.03814567-15.71120688 15.71120689-15.71120688h62.84206586c8.67306121 0 15.71258772 7.03952652 15.71258773 15.71120688v125.6868934h345.63826642V508.19854522c0-7.03952652-4.6810504-13.22845508-11.4526938-15.1298729zM712.31443568 771.22939022a7.85836512 7.85836512 0 0 1-7.85698429 7.8569843H625.9055595a7.85836512 7.85836512 0 0 1-7.85560346-7.8569843v-78.55465358a7.85836512 7.85836512 0 0 1 7.85560346-7.8542226h78.55465358a7.85836512 7.85836512 0 0 1 7.85560343 7.8542226v78.55603443z m0-172.81913319a7.85836512 7.85836512 0 0 1-7.85698429 7.85560343H625.9055595a7.85836512 7.85836512 0 0 1-7.85560346-7.85698428V519.85698428a7.85836512 7.85836512 0 0 1 7.85560346-7.85560344h78.55465358a7.85836512 7.85836512 0 0 1 7.85560343 7.85560344v78.55465359z m141.39810027 172.81913319a7.85836512 7.85836512 0 0 1-7.85698427 7.8569843H767.30365977a7.85836512 7.85836512 0 0 1-7.85560345-7.8569843v-78.55465358a7.85836512 7.85836512 0 0 1 7.85560345-7.8542226h78.55465358a7.85836512 7.85836512 0 0 1 7.85560344 7.8542226v78.55603443z m0-172.81913319a7.85836512 7.85836512 0 0 1-7.85698427 7.85560343H767.30365977a7.85836512 7.85836512 0 0 1-7.85560345-7.85698428V519.85698428a7.85836512 7.85836512 0 0 1 7.85560345-7.85560344h78.55465358a7.85836512 7.85836512 0 0 1 7.85560344 7.85560344v78.55465359z m141.39810028 172.81913319a7.85836512 7.85836512 0 0 1-7.85698428 7.8569843H908.70176005a7.85836512 7.85836512 0 0 1-7.85560344-7.8569843v-78.55465358a7.85836512 7.85836512 0 0 1 7.85560344-7.8542226h78.55465359a7.85836512 7.85836512 0 0 1 7.85560343 7.8542226v78.55603443z m0-172.81913319a7.85836512 7.85836512 0 0 1-7.85698428 7.85560343H908.70176005a7.85836512 7.85836512 0 0 1-7.85560344-7.85698428V519.85698428a7.85836512 7.85836512 0 0 1 7.85560344-7.85560344h78.55465359a7.85836512 7.85836512 0 0 1 7.85560343 7.85560344v78.55465359z"p-id="9769"></path></svg>
</body>1.可能因为svg有内联元素导致描边效果无法实现，所以可以将其删除，再在style中进行修饰
1.3 svg的dashoffset效果
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./iconfont/iconfont.css"><style>svg {fill: none;stroke: red;stroke-width: 10;/* 实线长度 */stroke-dasharray: 2616;/* 起始距离 *//* 刚开始全部擦掉 */stroke-dashoffset: 2616;/* 调用动画 */animation: heart1 1s linear infinite;}/* 之后再慢慢画出来 *//* 做一个画爱心的效果 */@keyframes heart1 {0% {stroke-dashoffset: 2616;}100% {stroke-dashoffset: 0;}}</style>
</head><body><svg t="1760016604237" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="10755" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path id="heart"d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z"p-id="10756"></path></svg>
</body>