发布于 2017-07-11 08:28:00 | 212 次阅读 | 评论: 0 | 来源: 网友投递
CSS3 层叠样式表
CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
基于CSS3动态背景登录框代码。这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效。效果图如下:
实现的代码如下:
html代码:
<div class="htmleaf-container">
<div class="wrapper">
<div class="container">
<h1>Welcome</h1>
<form class="form">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit" id="login-button">Login</button>
</form>
</div>
<ul class="bg-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$('#login-button').click(function (event) {
event.preventDefault();
$('form').fadeOut(500);
$('.wrapper').addClass('form-success');
});
</script>
本文介绍的这款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效,希望大家可以喜欢。