CSS3SVG表情图标评论交互特效源码.zip资源-CSDN文库

共3个文件

html：1个

css：1个

js：1个

版权申诉

css3

158 浏览量 2022-10-31 01:48:18 上传评论收藏 3KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS3 SVG表情图标评论交互特效源码.zip （3个子文件）

132686870757900107

css

style.css 8KB

index.html 2KB

script.js 299B

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS3 SVG表情图标评论交互特效</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <ul class="feedback"> <li class="angry"> <div> <svg class="eye left"> <use xlink:href="#eye"> </svg> <svg class="eye right"> <use xlink:href="#eye"> </svg> <svg class="mouth"> <use xlink:href="#mouth"> </svg> </div> </li> <li class="sad"> <div> <svg class="eye left"> <use xlink:href="#eye"> </svg> <svg class="eye right"> <use xlink:href="#eye"> </svg> <svg class="mouth"> <use xlink:href="#mouth"> </svg> </div> </li> <li class="ok"> <div></div> </li> <li class="good active"> <div> <svg class="eye left"> <use xlink:href="#eye"> </svg> <svg class="eye right"> <use xlink:href="#eye"> </svg> <svg class="mouth"> <use xlink:href="#mouth"> </svg> </div> </li> <li class="happy"> <div> <svg class="eye left"> <use xlink:href="#eye"> </svg> <svg class="eye right"> <use xlink:href="#eye"> </svg> </div> </li> </ul> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 4" id="eye"> <path d="M1,1 C1.83333333,2.16666667 2.66666667,2.75 3.5,2.75 C4.33333333,2.75 5.16666667,2.16666667 6,1"></path> </symbol> <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 7" id="mouth"> <path d="M1,5.5 C3.66666667,2.5 6.33333333,1 9,1 C11.6666667,1 14.3333333,2.5 17,5.5"></path> </symbol> </svg> <script src="js/script.js"></script> </body> </html>

评论收藏

内容反馈

版权申诉