6种CSS消息提示特效

给小伙伴们分享6种CSS消息提示特效，分别从页面的不同方位滑入提示消息，消息内容完全可以自由设置，颜色、字体等也可以自行调整，喜欢的童鞋请收下吧。

分类：文字特效 > 提示文字难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分需引入两个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分结构比较简单，消息内容放在一个div容器里，6个按钮分别用了6个a标签，代码如下：

<div class="notify bar-top do-show" data-notification-status="success">要相信，美好的事情正在发生...</div>
<main>
  <div class="wrapper">
    <h1>6种CSS消息提示特效</h1>

    <nav>
      <a href="#" class="button" data-type="top-left" data-status="success">顶部左侧</a>
      <a href="#" class="button" data-type="top-right" data-status="warning">顶部右侧</a>
      <a href="#" class="button" data-type="bottom-right" data-status="error">底部右侧</a>
      <a href="#" class="button" data-type="bottom-left" data-status="notice">底部左侧</a>
      <a href="#" class="button" data-type="bar-top" data-status="plain">顶部固定</a>
      <a href="#" class="button" data-type="bar-bottom" data-status="plain">底部固定</a>
    </nav>
  </div>
</main>

页面的底部引入jQuery库和一个js文件，用来响应按钮的点击事件代码如下：

<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>