在很多网站中，我们都可以看到这样的效果，当用户鼠标进入某一个元素后，下方就会有遮罩层上浮动画，如图： 今天我们就用hover伪类加上css3实现，没有使用任何JS #d1{ height: 100px; position: relative; width: 100px; overflow: hidden; } #d1:hover > #d3{ transition: transform 0.5s ease; transform: translateY(-100%); } #d2{ background: red; heig...
纯CSS3实现的各种阴影效果body{padding: 20px 0 0;font: 14px/1.5 Arial, sans-serif;text-align: center;color: #333;background: #FAF0D9;}a{font-weight: bold;color: #346AA8;}a: hover, a: focus, a: active{text-decoration: none;}.container{position: relative;z-index: 1;width: 600px;padding: 20px;margin: 0 auto;background: #FAF0D9;}.container: after{content: "";display: block;clear: both;visibility: hidden...
CSS3实现各种纹理背景效果 body{font-family: Georgia, serif;}.stripes{height: 250px;width: 375px;float: left;margin: 10px;-webkit-background-size: 50px 50px;-moz-background-size: 50px 50px;background-size: 50px 50px;-moz-box-shadow: 1px 1px 8px gray;-webkit-box-shadow: 1px 1px 8px gray;box-shadow: 1px 1px 8px gray;}.angled{background-color: #ac0;background-image: -webkit-gradient(linear, 0 100%...
图片投影效果.box { position: absolute; padding: 2px; background: white; -webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5); -moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5); box-shadow: 1px 2px 4px rgba(0,0,0,.5);}.box img { display:block; width:200px; height:220px; border: 1px inset #8a4419; background:#eee; } .box:after { content: ''; -webkit-box-shadow: 100px 0 10px rgba(0,0,0,.2); -moz-box-shadow: 100p...
友情链接用的CSS图片链接和文字链接样式.f4{width:100%; overflow:hidden; clear:both; margin:0; padding:0;}.f4 li{ width:94px; height:37px; display:block; float:left; overflow:hidden; margin:10px 12px 2px 3px;}.f4 li a{ width:88px; height:31px; overflow:hidden; float:left; border:3px solid #FFF;}.f4 li a:hover{ border:3px solid #EEE;}.f5{width:100%; overflow:hidden; clear:both; margin:0; padding:0;}.f...
CSS3立体开关var snd = new Audio('');document.addEventListener('change', function(e){ if(e.target.parentNode.className.indexOf('checkboxControl') != -1){ snd.currentTime = 0; snd.play(); }});*{ margin:0; padding:0; }html, body{ height:100%; }body{ font:15px/1 arial; text-align:center; background:#509DAD; }body:before{ content:''; display:inline-block; height:100%; vertical-align:middle; }fieldset{...
渐隐渐显 @-webkit-keyframes cf3FadeInOut { 0% { opacity:1; } 20% { opacity:.8; } 50% { opacity:0.5; } 70%{ opacity: .3;} 100% { opacity:0; } } div.bg { -webkit-animation-name: cf3FadeInOut; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 3s; } 晃动 .hand-animate { -webkit-animation: hand_move infinite 2s; } @-webkit-keyframes ha...
IMG标签本身是显示图片的，但通过CSS可以再为其设置背景图片，让其和自身的图片配合来显示，最终的效果会让你惊叹。当然，这个发现来自于老外，所以代码马上与大家分享。再此之前，我也从来没有想到过这个思路，我想这种思路可以应用的地方相当多了。 CSS奇特用法：为IMG设置背景图片div {background: url('http://www.codefans.net//jscss/demoimg/201312/blur.jpg') no-repeat top left;width:232px;height: 200px; }img {...
CSS3感应鼠标的背景闪烁和图片缩放动态效果/*标题背景*/h2{background:rgba(0,0,0,0.5);color:#FFF;padding:10px 0;width:300px;text-align:center;transition:opacity 0.5s linear 0s;}h2:hover{-moz-animation:bg .5s ease-in-out;-webkit-animation:bg .5s ease-in-out;}h2,a{cursor:pointer;margin:10px auto;}@-moz-keyframes bg{0%{background:rgba(144,24,53,0.18);}25%{background:rgba(144,24,53,0.5);}50%{background:rg...
与背景相关的新增属性 大家都知道在HTML页面中，元素都是由以下几部分组成 使用background-clip来修改背景的显示范围，如果设定为border-box，则背景范围包含边框区域，如果设定为padding-box则不包含边框,包含padding区域。如果设定为content-box则背景只包含内容区域 background-origin属性：指定绘制背景图像的绘制起点，它的属性值跟background-clip是一样的，也就是说你可以通过它的指定绘制时从边框的左上角开始...
纯CSS3实现的联系人表单输入效果 * { margin: 0px; padding: 0px; } body { margin: 0 auto; background: #f5f5f5; color: #555; width: 800px; font-family: 'Yanone Kaffeesatz', arial, sans-serif; } h1 { color: #555; margin: 0 0 20px 0; } label { font-size: 20px; color: #666; } form { float: left; border: 1px solid #ddd; padding: 30px 40px 20px 40px; margin: 75px 0 0 0; width: 715px; ba...
今天才开始学习html的，但是float:left;却没有效果，不知道我是错哪 了。 css--4div.a{ background:##CCFFFF; width:100px; height:25px; border:5px 15px solid #CCFFCC; margin:1px 2px; text-align:center; color:#999999; font-size:15px; line-height:22px; font-weight:bold; float:left; } div.b{ background:#CCFFFF; width:1100px; height:25px; border:5px solid #CCF...
box-shadow: 0 0 10px 10px #b9bcbf; CSS3 box-shadow 属性 CSS 参考手册 实例 向 div 元素添加 box-shadow： div{box-shadow: 10px 10px 5px #888888;} 亲自试一试 页面底部有更多实例。 浏览器支持 IE Firefox Chrome Safari Opera IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。 定义和用法 box-shad...
利用div实现遮罩层效果就是利用一个全屏、半透明的div遮住页面上其它元素，典型的例子就是百度的登录界面。下面贴出示例代码： 全屏divhtml,body { margin:0; height:100%;}#test { width:100%; height:100%; background-color:#000; position:absolute; top:0; left:0; z-index:2; opacity:0.3; /*兼容IE8及以下版本浏览器*/ filter: alpha(opacity=30); display:none;}#log_window...
css3幻灯片换位效果 .flowGallery {width:810px; height:540px; position:relative; z-index:100;}.flowGallery input {position:absolute; left:-9999px;}.flow {padding:0; margin:0; list-style:none; width:810px; height:540px;}.flow li {width:150px; height:100px; position:absolute;}.flow li img {display:block; width:100%; height:100%;}.flow li.c1 {left:0; top:0;-webkit-transition:0.5s 0.05s;-moz-transition:...