1、
2、测试代码:
<html> <meta name="description" content="心跳动画"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" width="800" height="800" viewBox="0 0 400 400" style="enable-background:new 0 0 50 50;" xml:space="preserve" > <defs> <symbol id="heart01"> <!-- ZC: 这是画的心形 --> <path style="fill:#C03A2B;" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543 c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503 c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z"/> <!-- ZC: 这是画的心形左上角的那个小圆弧 --> <path style="fill:#ED7161;" d="M6,18.078c-0.553,0-1-0.447-1-1c0-5.514,4.486-10,10-10c0.553,0,1,0.447,1,1s-0.447,1-1,1 c-4.411,0-8,3.589-8,8C7,17.631,6.553,18.078,6,18.078z"/> </symbol> </defs> <rect x="0" y="0" width="100%" height="100%" stroke="black" stroke-width="3" fill="none" /> <!-- <g id="heart"> <path style="fill:#C03A2B;" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543 c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503 c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z"/> <path style="fill:#ED7161;" d="M6,18.078c-0.553,0-1-0.447-1-1c0-5.514,4.486-10,10-10c0.553,0,1,0.447,1,1s-0.447,1-1,1 c-4.411,0-8,3.589-8,8C7,17.631,6.553,18.078,6,18.078z"/> </g> --> <use x="0" y="0" witht="50" height="50" xlink:href="#heart01" /> <rect x="0" y="0" width="10" height="10" fill="blue" transform="translate(100 100)" /> </svg> <style id="jsbin-css"> svg { width: 100%; margin: 0 auto; text-align: center; } #heart { animation-name: beat; animation-duration: 1s; animation-timing-function: ease; animation-iteration-count: infinite; } @keyframes beat { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } use { animation-name: beat02; animation-duration: 1s; animation-timing-function: ease; animation-iteration-count: infinite; } @keyframes beat01 { 0% { transform: translate(100px, 100px) scale(1); } /*ZC: 用空格隔开 ! !*/ 50% { transform: translate(100px, 100px) scale(1.2); } /*ZC: 注意,CSS中translate中的偏移量要带单位[如px/em/rem(css3)等]*/ 100% { transform: translate(100px, 100px) scale(1); } /*ZC:还要注意,渲染顺序。transform里面是从后往前一步一步来渲染的。不按照此顺序的话,可能得不到预期的效果 ! ! !*/ } @keyframes beat02 { 0% { transform: translate(3em, 3em) scale(1); } 50% { transform: translate(3em, 3em) scale(1.2); } 100% { transform: translate(3em, 3em) scale(1); } } </style> </html>
3、
4、
5、