给小伙伴们分享6种CSS消息提示特效,分别从页面的不同方位滑入提示消息,消息内容完全可以自由设置,颜色、字体等也可以自行调整,喜欢的童鞋请收下吧。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791