html5 svg创建项目列表添加删除动画特效

新建html文档。

书写css代码。ul.todo li .buttons button svg { width: 22px; height: 22px; }ul.todo li .buttons button svg .fill { transition: all 0.3s ease-out; }ul.todo li .buttons button.deleteButton svg .fill { fill: #C0CECB; }ul.todo li .buttons button.checkButton svg .fill { fill: rgb(47, 167, 77); }ul.todo li .buttons button.checkButton svg .noFill { fill: none; }ul.todo:not(#completed) li .buttons button.checkButton:hover svg .noFill, ul.todo#completed li .buttons button.checkButton svg .noFill { fill: rgb(84, 201, 113); }ul.todo:not(#completed) li .buttons button.checkButton:hover svg .fill, ul.todo#completed li .buttons button.checkButton svg .fill { fill: #fff; }ul.todo li .buttons button.deleteButton:hover svg .fill { fill: rgb(201, 41, 41); }hr.divider { width: 50%; margin: 20px auto 5px auto; }#completed { opacity: 0.5; }#checkAnimateDiv { width: 1px; height: 1px; z-index: -10; position: relative; bottom: 12px; left: 15px; }

书写并添加js代码。

代码整体结构。

查看效果。