css3双击点赞动画,利用css3实现svg爱心点赞动画特效

特效描述：利用css3实现 svg 爱心点赞 动画特效。利用css3实现svg爱心点赞动画特效

代码结构

1. 引入CSS

2. HTML代码

viewBox="0 0 269 264" style="enable-background:new 0 0 269 264;" xml:space="preserve">

.st1{fill:#9BB133;}

.st2{fill:#E7E43B;}

.st3{fill:#6BABBD;}

.st4{fill:#38B133;}

.st5{fill:#E03BE7;}

.st6{fill:#E9ACC1;}

.st7{fill:#F04151;}

.st8{fill:#13414C;}

.st9{font-family:'Montserrat-Regular';}

.st10{font-size:23.9043px;}

Thanks!

function addListener() {

var btn = document.querySelector('#Heart_2_');

btn.addEventListener("click", restart, false);

}

function restart() {

var container = document.querySelector('#Layer_1');

var newContainer = container.cloneNode(true);

container.parentNode.replaceChild(newContainer, container);

addListener();

}

addListener();