搜索到
1061
篇与
的结果
-
css3实现正六边形图片+悬停效果 html代码<div class="boxF pic1"> <div class="boxS"> <div class="boxT" style="background-image: url(1.jpg);"> <div class="overlay"> <a>正六边形</a> </div> </div> </div> </div>css代码 .lineF, .lineS { position: absolute; visibility: hidden; } .lineS { top: 182px; left: 105px; } .boxF, .boxS, .boxT, .overlay { width: 240px; height: 290px; overflow: hidden; } .boxF, .boxS { visibility: hidden; } .boxF { transform: rotate(30deg); float: left; margin-left: 10px; -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); } .boxS { transform: rotate(-60deg); -ms-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); } .boxT { transform: rotate(30deg); background: no-repeat 50% center; background-size: 100% auto; -ms-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); visibility: visible; } .overlay { transition: all 250ms ease-in-out 0s; display: none; position: relative; } .overlay:hover { background-color: rgba(0,0,0,0.6); cursor: pointer; } .boxT:hover .overlay { display: block; } .overlay a { transform: rotate(90deg); display: block; /*display: inline-block;*/ position: absolute; left: 14%; top: 45%; text-align: center; width: 220px; height: 32px; line-height: 35px; color: White; font-size: 24px; font-weight: normal; } -
css3实现鼠标悬停图片翻转 css3实现鼠标悬停图片翻转.last_btn img{-moz-transition:all 0.5s linear 0s; webkit-transition:all 0.5s linear 0s; transition:all 0.5s linear 0s; } .last_btn a:hover img{ -moz-transform:rotateY(360deg) perspective(200px); -ms-transform:rotateY(360deg) perspective(200px); -o-transform:rotateY(360deg) perspective(200px); -webkit-transform:rotateY(360deg) perspective(200px); transform:rotateY(360deg) perspective(200px); }
-
-
CSS3：线性渐变+各种分布 CSS3：线性渐变+各种分布<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页title</title> <style> #grad1 { height: 40px; background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(0deg, red, blue); /* 标准的语法（必须放在最后） */ } #grad2 { height: 40px; background: -webkit-linear-gradient(90deg, red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(90deg, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(90deg, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(90deg, red, blue); /* 标准的语法（必须放在最后） */ } #grad3 { height: 40px; background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(180deg, red, blue); /* 标准的语法（必须放在最后） */ } #grad4 { height: 40px; background: -webkit-linear-gradient(-90deg, red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(-90deg, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(-90deg, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(-90deg, red, blue); /* 标准的语法（必须放在最后） */ } #grad5 { height: 40px; background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, green, blue); /* 标准的语法（必须放在最后） */ } #grad6 { height: 40px; background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */ background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */ } #grad7 { height: 40px; background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */ background: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法（必须放在最后） */ } #grad8 { height: 40px; background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */ } </style> </head> <body> <h3>线性渐变 - 使用不同的角度</h3> <div id="grad1" style="color:white;text-align:center;">0deg</div><br> <div id="grad2" style="color:white;text-align:center;">90deg</div><br> <div id="grad3" style="color:white;text-align:center;">180deg</div><br> <div id="grad4" style="color:white;text-align:center;">-90deg</div> <h3>3 个颜色结点（均匀分布）</h3> <div id="grad5"></div> <h3>7 个颜色结点（均匀分布）</h3> <div id="grad6"></div> <h3>3 个颜色结点（不均匀分布）</h3> <div id="grad7"></div> <br> <div id="grad8" style="text-align:center;margin:auto;color:#FFFFFF;font-size:20px;font-weight:bold"> 渐变背景 </div> </body> </html>
-
css六种隐藏元素的方法 1、display，使用none值会让元素从文档中直接删除，”直接消失不见了”用法：display:none优点：简单暴力，不需要多余代码。不占空间，对布局没影响。缺点：元素从文档删除，不利于seo2、text-indent，一般是首行缩2个中文字的用法是text-indent:2em。但当给他一个足够大的负值，大到一般我们浏览器无法显示。用法：text-indent:-999em优点：利于搜索引擎缺点：它的作用其实就是把文字提到段落前面，不让我们看见，不影响宽度？会影响布局。3、position，假如说一个元素的距离我们的视窗（电脑显示屏幕）足够大，大到我们浏览器也无法显示出来，那么它也是“消失”的。但是这种做法一般适用于比较写死的东西。用法：position:absolute; top:-999em或者left:-999em或 position:absolute; visibility:hidden;优点：信手拈来，随意摆放缺点：用法太死，不能随意修改，比较死板4、visibility，只是“看不见”而已，所以元素依然会影响到布局用法：visibility:hidden优点：利于SEO优化缺点：该属性会继承，假如祖先用了visibility:hidden，那么子元素也是直接显示不见，想要子元素显示让用户看见，还要必须再多写visibility：visible5、opacity:0设置元素透明度opacity属性为0，也可以隐藏页面元素，在呈现上与visibility:hidden;方式一样，同样会占据页面空间。6、clip-path:polygon(0px 0px , 0px 0px,0px 0px,0px 0px)通过掩蔽和剪裁来隐藏部分元素
