一款CSS3基于svg制作简洁的消息提示框样式代码。
使用方法
引入需要用到的jquery.min.js文件
<script src="js/jquery.min.js"></script>
CSS3样式
html, body{ height:100%; width:100%; font-family: 'Raleway', sans-serif; background-color:#efefef; display: table; text-align: center; } .toast__container { display: table-cell; vertical-align: middle; } .toast__cell{ display:inline-block; } .add-margin{ margin-top:20px; } .toast__svg{ fill:#fff; } .toast { text-align:left; padding: 21px 0; background-color:#fff; border-radius:4px; max-width: 500px; top: 0px; position:relative; box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2); } .toast:before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; border-top-left-radius:4px; border-bottom-left-radius: 4px; } .toast__icon{ position:absolute; top:50%; left:22px; transform:translateY(-50%); width:14px; height:14px; padding: 7px; border-radius:50%; display:inline-block; } .toast__type { color: #3e3e3e; font-weight: 700; margin-top: 0; margin-bottom: 8px; } .toast__message { font-size: 14px; margin-top: 0; margin-bottom: 0; color: #878787; } .toast__content{ padding-left:70px; padding-right:60px; } .toast__close { position: absolute; right: 22px; top: 50%; width: 14px; cursor:pointer; height: 14px; fill:#878787; transform: translateY(-50%); } .toast--green .toast__icon{ background-color:#2BDE3F; } .toast--green:before{ background-color:#2BDE3F; } .toast--blue .toast__icon{ background-color:#1D72F3; } .toast--blue:before{ background-color:#1D72F3; } .toast--yellow .toast__icon{ background-color:#FFC007; } .toast--yellow:before{ background-color:#FFC007; }