<p>css3制作消息提示铃铛左右晃动效果。</p><p>1.</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class="relative&nbsp;mr30"&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;i&nbsp;class="el-icon-message-solid&nbsp;size24 flashing"&gt;&lt;/i&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class="absolute&nbsp;size12&nbsp;tip"&gt;1&lt;/span&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;</p><p>2.css3样式,(重点)</p><p>.flashing&nbsp;{</p><p>&nbsp;&nbsp;color:&nbsp;$theme;</p><p>&nbsp;&nbsp;animation:&nbsp;opacitys&nbsp;2s&nbsp;infinite;</p><p>}</p><p>@keyframes&nbsp;opacitys&nbsp;{</p><p>&nbsp;&nbsp;0%,&nbsp;65%&nbsp;{</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(0deg);</p><p>&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;70%&nbsp;{&nbsp;&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:rotate(6deg);</p><p>&nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(6deg);</p><p>&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;75%&nbsp;{&nbsp;&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:rotate(-6deg);</p><p>&nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(-6deg);</p><p>&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;80%&nbsp;{&nbsp;&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:rotate(6deg);</p><p>&nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(6deg);</p><p>&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;85%&nbsp;{&nbsp;&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:rotate(-6deg);</p><p>&nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(-6deg);</p><p>&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;90%&nbsp;{&nbsp;&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:rotate(6deg);</p><p>&nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(6deg);</p><p>&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;95%&nbsp;{&nbsp;&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:rotate(-6deg);</p><p>&nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(-6deg);</p><p>&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;100%&nbsp;{&nbsp;&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:rotate(0deg);</p><p>&nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(0deg);</p><p>&nbsp;&nbsp;}</p><p>}</p><p>有不对的地方或有改进的地方, 还望大佬多多指教,在评论区留言!</p>