*{ padding: 0px; margin: 0px; } .container{ position: relative; overflow: hidden; width: 100%; background-color: #F6F7F8; } .emojiList{ height: 260px; padding: 5px; list-style: none; overflow: hidden; } .emojiList::after{ /* content: ""; */ /* display: block; */ /* clear: both; */ } .item{ width: 360px; height: 184px; overflow: hidden; float: left; } .item img{ width: 48px; height: 48px; left: 20px; /* display: block; */ } .point{ position: absolute; list-style: none; left: 50%; /* 在x负轴上移动 50% */ transform: translateX(-50%); bottom: 60px; } .point-item{ float: left; width: 8px; height: 8px; margin: 0px 5px; background-color: black; /* white */ opacity: .2; border-radius: 100px; } /* 激活指示器 */ .point-item.active { opacity: 1; } /* 小表情样式 */ .emojiImg.minImg { width: 32px; height:32px; float: left; margin-left: 16px; margin-top: 16px; } /* 大表情样式 */ .emojiImg.bigImg { width: 64px; height:64px; float: left; margin-left: 20px; margin-top: 14px; } .toast { position: fixed; z-index: 2000; left: 50%; top:50%; transition:all .5s; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); text-align: center; border-radius: 5px; color:#FFF; background: rgba(17, 17, 17, 0.7); height: 120px; line-height: 45px; padding: 0 15px; }