CSS3鼠标悬停360度旋转效果* {margin:0;padding:0;list-style:none;}body {background:#1F1F1F;}.zzsc {width: 220px;height: 220px;margin: 0 auto;background: no-repeat url("/author.jpg") left top;-webkit-background-size: 220px 220px;-moz-background-size: 220px 220px;background-size: 220px 220px;-webkit-border-radius: 110px;border-radius: 110px;-webkit-transition: -webkit-transform 2s ease-out;-moz-transi...
Style样式 .toggle { position: relative; display: inline-block; width: 60px; height: 30px; border: 1px solid #E5E5E5; background-color: #fff; background-clip: content-box; -webkit-border-radius: 30px; border-radius: 30px; } .toggle i { position: absolute;...
CSS3 包含多个新的文本特性。 word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分，单词太长的话就可能无法超出某个区域： text-shadow 可向文本应用阴影 属性 描述 CSS hanging-punctuation 规定标点字符是否位于线框之外。 3 punctuation-trim 规定是否对标点字符进行修剪。 3 text-align-last 设置如何对齐最后一行或紧挨着强制换行符...
CSS3网页加载效果#circular3dG{position:relative;width:128px;height:128px;}.circular3dG{position:absolute;background-color:#000000;width:36px;height:36px;-webkit-border-radius:38px;-moz-border-radius:38px;border-radius:38px;-webkit-animation-name:bounce_circular3dG;-webkit-animation-duration:1.6s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:linear;-moz-animation-name:bounce...
CSS3 Drop-shadow阴影 .drop-shadow { width: 500px; height: 300px; position: relative; background: #ccc; } .drop-shadow:before, .drop-shadow:after { content: ""; position: absolute; z-index: -1; bottom: 15px; width: 30%; height: 20%; /*add box-shadow*/ -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8); ...
纯CSS3缎带效果.ribbon-content{border: 1px solid #DDD;font-weight: bold;margin: 0 -10px;min-height: 30px;padding: 7px 31px;text-align: center;line-height: 30px;}.ribbon-left{display: block;border-left: 10px solid white;border-top: 8px solid #EEE;float: left;height: 0;margin-left: -10px;width: 0;}.ribbon-right{display: block;border-right: 10px solid white;border-top: 8px solid #EEE;float: right;heig...
在很多网站中，我们都可以看到这样的效果，当用户鼠标进入某一个元素后，下方就会有遮罩层上浮动画，如图： 今天我们就用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...
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...
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...