CSS hover实现多种块效果1
来源：互联网 发布：mac 安装nodejs环境 编辑：程序博客网 时间：2024/05/17 01:11
css有几种伪类是比较好用，可以简化我们的HTML代码 非常实际！
我们一般经常用的虚类就是：hover吧还有:after以及:befor这两种，你可以把它理解成一个隐藏的元素，需要的时候直接CSS设定属性让它出来，下面看看我用它实现的多种效果，很实际哦。
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <style> *{ margin:0px; padding: 0px; } .main{ width: 700px; height: 800px; margin:0 auto; } .main ul li{ float: left; width: 200px; height: 120px; margin:10px; list-style: none; position: relative; -webkit-transition-duration: 0.5s; -ms-transition-duration:0.5s; -moz-transition-duration: 0.5s; -o-transition-duration:0.5s; } .main ul li img{ width: 100%; height: 100%; } .main .mask,ul li:before{ content:""; position: absolute; width: 100%; height: 100%; opacity: 0.6; cursor: pointer; background-color: rgb(0, 0, 0); -webkit-transition-duration: 0.5s; -ms-transition-duration:0.5s; -moz-transition-duration: 0.5s; -o-transition-duration:0.5s; } .main ul li:hover{ -webkit-transform: scale(1.2); -webkit-box-shadow:0px 0px 30px #ccc; -ms-transform: scale(1.2); -ms-box-shadow:0px 0px 30px #ccc; -moz-transform: scale(1.2); -moz-box-shadow:0px 0px 30px #ccc; -o-transform: scale(1.2); -o-box-shadow:0px 0px 30px #ccc; } .img-1:hover:before{ height: 0%; } .img-2:hover:before{ height: 0%; margin-top:60px; } .img-3:before{ opacity: 0; display: none; } .img-3 .mask3{ width: 50%; position: absolute; top: 0px; left: 0px; height: 100%; -webkit-transition-duration: 0.5s; -ms-transition-duration:0.5s; -moz-transition-duration: 0.5s; -o-transition-duration:0.5s; opacity: 0.6; cursor: pointer; background-color: rgb(0, 0, 0); } .img-3 .mask4{ width: 50%; margin-left: 100px; position: absolute; top: 0px; height: 100%; -webkit-transition-duration: 0.5s; -ms-transition-duration:0.5s; -moz-transition-duration: 0.5s; -o-transition-duration:0.5s; opacity: 0.6; cursor: pointer; background-color: rgb(0, 0, 0); } .img-3:hover .mask3{ width:0%; } .img-3:hover .mask4{ margin-left: 200px; width:0%; } .img-4:hover:before{ height: 0%; width: 0%; margin-top:60px; margin-left: 100px; } .img-5:hover:before{ height: 0%; width: 0%; margin-top:60px; margin-left: 100px; -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); -o-transform: rotateX(360deg); -ms-transform: rotateX(360deg); } .img-6:hover:before{ height: 0%; width: 0%; margin-top:60px; margin-left: 100px; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); } </style></head><body> <div class="main"> <ul> <li class="img-1"> <!--用class控制--> <!-- <div class="mask"></div>--> <img src="img/111.jpg" alt=""> </li> <li class="img-2"> <!-- <div class="mask"></div>--> <img src="img/222.jpg" alt=""> </li> <li class="img-3"> <div class="mask3"></div> <div class="mask4"></div> <img src="img/333.jpg" alt=""> </li> <li class="img-4"> <!-- <div class="mask"></div>--> <img src="img/444.jpg" alt=""> </li> <li class="img-5"> <!-- <div class="mask"></div>--> <img src="img/5555.jpg" alt=""> </li> <li class="img-6"> <!-- <div class="mask"></div>--> <img src="img/6666.jpg" alt=""> </li> </ul> </div></body></html> .main .mask,ul li:before{ content:""; position: absolute; width: 100%; height: 100%; opacity: 0.6; cursor: pointer; background-color: rgb(0, 0, 0); -webkit-transition-duration: 0.5s; -ms-transition-duration:0.5s; -moz-transition-duration: 0.5s; -o-transition-duration:0.5s; } .main ul li:hover{ -webkit-transform: scale(1.2); -webkit-box-shadow:0px 0px 30px #ccc; -ms-transform: scale(1.2); -ms-box-shadow:0px 0px 30px #ccc; -moz-transform: scale(1.2); -moz-box-shadow:0px 0px 30px #ccc; -o-transform: scale(1.2); -o-box-shadow:0px 0px 30px #ccc; } .img-1:hover:before{ height: 0%; } .img-2:hover:before{ height: 0%; margin-top:60px; } .img-3:before{ opacity: 0; display: none; } .img-3 .mask3{ width: 50%; position: absolute; top: 0px; left: 0px; height: 100%; -webkit-transition-duration: 0.5s; -ms-transition-duration:0.5s; -moz-transition-duration: 0.5s; -o-transition-duration:0.5s; opacity: 0.6; cursor: pointer; background-color: rgb(0, 0, 0); } .img-3 .mask4{ width: 50%; margin-left: 100px; position: absolute; top: 0px; height: 100%; -webkit-transition-duration: 0.5s; -ms-transition-duration:0.5s; -moz-transition-duration: 0.5s; -o-transition-duration:0.5s; opacity: 0.6; cursor: pointer; background-color: rgb(0, 0, 0); } .img-3:hover .mask3{ width:0%; } .img-3:hover .mask4{ margin-left: 200px; width:0%; } .img-4:hover:before{ height: 0%; width: 0%; margin-top:60px; margin-left: 100px; } .img-5:hover:before{ height: 0%; width: 0%; margin-top:60px; margin-left: 100px; -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); -o-transform: rotateX(360deg); -ms-transform: rotateX(360deg); } .img-6:hover:before{ height: 0%; width: 0%; margin-top:60px; margin-left: 100px; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); } </style></head><body> <div class="main"> <ul> <li class="img-1"> <!--用class控制--> <!-- <div class="mask"></div>--> <img src="img/111.jpg" alt=""> </li> <li class="img-2"> <!-- <div class="mask"></div>--> <img src="img/222.jpg" alt=""> </li> <li class="img-3"> <div class="mask3"></div> <div class="mask4"></div> <img src="img/333.jpg" alt=""> </li> <li class="img-4"> <!-- <div class="mask"></div>--> <img src="img/444.jpg" alt=""> </li> <li class="img-5"> <!-- <div class="mask"></div>--> <img src="img/5555.jpg" alt=""> </li> <li class="img-6"> <!-- <div class="mask"></div>--> <img src="img/6666.jpg" alt=""> </li> </ul> </div></body></html> 0 0
- CSS hover实现多种块效果1
- 【CSS实现hover动态效果】
- 用CSS实现的一页面内的多种HOVER的效果
- 不用js只用CSS实现鼠标hover效果
- css圆角的多种效果及实现方法
- css多种方式实现元素的居中效果
- hover一个组件，另一个组件css效果
- 简单的hover效果的实现
- jquery实现hover图片半透明效果
- hover效果
- 按钮hover状态的css实现
- css 实现 section(块) 的左右滑动，以及块内文字居中的效果
- CSS实例(九)：多种菜单效果
- CSS实现画出多种图形
- html&css实验8.(3)CSS.hover实现两级菜单
- qss 使用hover效果不能实现的奇怪问题
- css3 实现图片遮罩效果,hover出现文字
- hover实现伪元素无HTML弹出效果2
- javascript深入理解js闭包
- CSS content内容生成技术以及应用
- java虚拟机内存
- Android GMS无法通过网络定位
- eclipse导出war包文件缺失问题
- CSS hover实现多种块效果1
- UML类图图示
- NAT（NAPT）地址转换过程
- This text field does not specify an inputType or a hint
- Adapter的getViewTypeCount和getItemViewType[转]
- 第十二周项目3-摩托车继承自行车和机动车
- java中的使用RSA算法进行公钥加密私钥解密
- 程序语言的类型系统
- 极简ftp——基于jackrabbit-2.6.5
