<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>HTML5 Emoji自定义表情编辑器</title> <link href="https://fonts.googleapis.com/css?family=Comfortaa:400,700|Fredoka+One" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css'> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main-content"> <div class="emoji-name"> <div>Emoji Factory</div> </div> <div class="emoji-preview"> <div class="emoji__wrapper"> <div class="emoji-face"> <div class="hat no-hat"></div> <div class="eyebrows"> <div class="eyebrow left no-eyebrows"></div> <div class="eyebrow right no-eyebrows"></div> </div> <div class="eyes"> <div class="eye left default"></div> <div class="eye right default"></div> </div> <div class="mouth default"></div> <div class="face-extras sweat"></div> <div class="item default"></div> </div> </div> </div> <div class="emoji-choices"> <div class="emoji-choices__header">skin color</div> <div class="emoji-choices__group emoji-choices__group--skin"> <div class="emoji-choice__skin selected js-choice selected" data-type="skin" data-multiple="no" data-name="skin-1"></div> <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-2"></div> <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-3"></div> <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-4"></div> <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-5"></div> <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-6"></div> </div> <div class="emoji-choices__header">eyes</div> <div class="emoji-choices__group"> <div class="emoji-choice__item js-choice selected" data-type="eyes" data-multiple="no" data-name="default"></div> <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="startled"></div> <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="heart"></div> <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="star"></div> <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="fire"></div> <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="squeeze"></div> <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="closed-up"></div> <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="closed-down"></div> <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="lined"></div> </div> <div class="emoji-choices__header">mouth</div> <div class="emoji-choices__group"> <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="no-mouth"></div> <div class="emoji-choice__item js-choice selected" data-type="mouth" data-multiple="no" data-name="default"></div> <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="upside"></div> <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="open"></div> <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="tongue"></div> <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="lined"></div> <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="frown"></div> <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="smile"></div> <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="curse"></div> <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="grimace"></div> </div> <div class="emoji-choices__header">eyebrows</div> <div class="emoji-choices__group"> <div class="emoji-choice__item js-choice selected" data-type="eyebrows" data-multiple="no" data-name="no-eyebrows"></div> <div class="emoji-choice__item js-choice" data-type="eyebrows" data-multiple="no" data-name="downwards"></div> <div class="emoji-choice__item js-choice" data-type="eyebrows" data-multiple="no" data-name="furrow"></div> <div class="emoji-choice__item js-choice" data-type="eyebrows" data-multiple="no" data-name="furrow-far"></div> <div class="emoji-choice__item js-choice" data-type="eyebrows" data-multiple="no" data-name="up-far"></div> </div> <div class="emoji-choices__header">hats</div> <div class="emoji-choices__group"> <div class="emoji-choice__item js-choice selected" data-type="hat" data-multiple="no" data-name="no-hat"></div> <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="round-hat"></div> <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="wizard-hat"></div> <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="sorting-hat"></div> <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="top-hat"></div> <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="traffic-cone"></div> <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="cactus"></div> <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="mickey"></div> </div> <div class="emoji-choices__header"> extras <small>(Multiples allowed)</small></div> <div class="emoji-choices__group"> <div class="emoji-choice__item js-choice selected" data-type="face-extras" data-multiple="yes" data-name="sweat"></div> <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="tears"></div> <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="geek-glasses"></div> <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="sunglasses"></div> <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="crescent-glasses"></div> <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="blush"></div> <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="bandage"></div> <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="scarf-gryf"></div> <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="scarf-huff"></div> <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="scarf-rave"></div> <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="scarf-slyt"></div> </div> <div class="emoji-choices__header">item</div> <div class="emoji-choices__group"> <div class="emoji-choice__item js-choice selected" data-type="item" data-multiple="no" data-name="default"></div> <div class="emoji-choice__item js-choice" data-type="item" data-multiple="no" data-name="shield"></div> <div class="emoji-choice__item js-choice" data-type="item" data-multiple="no" data-name="dango"></div> <div class="emoji-choice__item js-choice" data-type="item" data-multiple="no" data-name="wand"></div> <div class="emoji-choice__item js-choice" data-type="item" data-multiple="no" data-name="coffee"></div> <div class="emoji-choice__item-custom" data-type="item" data-multiple="no" data-name="custom"><span>Type/Paste any emoji here for a custom item: </span> <input class="js-custom-item" maxlength="2"/> </div> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script src="js/index.js"></script> </body> </html>
HTML5 Emoji自定义表情编辑器
标签：
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论