今天接到一个需求，通过一张图片得到其镜像对称的图片。本来说是后台处理的，但这样除了技术上难实现之外，还带来了资源消耗的问题，相当于每张图都要存储一个副本了。 只记得以前用过css的滤镜可以实现这个，但只在IE下有效。后来找到一个兼容多浏览器的样式，大爱。 css样式定义： .flip-horizontal { -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1);...
总是能看见很多广告或者网站都是使用整屏滚动的效果，一直看着都心痒痒，想自己也实现一个。最近刚学习到css3的动画效果，所以尝试使用css3做了一个整屏切换。 页面结构 实现思路与大众方法类似，如图 每个section就是一页内容，它的大小充满了屏幕（红色区域），一个container由多个section构成，我们通过改变container的位置，来达到页面切换的效果。container向下走，页面好像上移了，container向上走，页面就下移了。 ...
前言： 昨天晚上休息，忘记发博客了。对于学习这件是，还是需要坚持的。想想自建一个Jekyll博客模版还是很兴奋的，话不多说，看正文吧！ 关于开发： 先看个Demo吧,点这里。你会发现，点击是没有效果的，对于这样的瑕疵，我是不能容忍的，劳资就各种百度，发现度娘，终于找到了一个方法。只要添加一个属性就行。 data-toggle="tab" Demo在这里,又解决了一个问题，还是很开心的。接下来，准备添加类似于...
昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记…… PS:如需转载，请注明出处！ 第1种效果： 代码如下： .loading{ width: 80px; height: 40px; margin: 0 auto; margin-top:100px; } .loading span{ display: inline-block; width: 8px; ...
如何在IE6下实现position:fixed效果:建议:尽可能的手写代码，可以有效的提高学习效率和深度。由于IE6并不支持position:fixed，所以导致很多好的效果都无法实现，但是在IE6下并不是不能够实现此中效果，下面就通过一段实例介绍一下如何实现此种效果。代码实例如下: IE6下实现position:fixed-蚂蚁部落body{ margin:40px; padding:0px; border:1px solid blue;}.first{ width:300px; height:600px; border:1px solid red;...
新学员请教论坛朋友。 有以下两段代码，为什么用br写出来的就比pre写出来的字体大呢？ 以下是br的 以下是pre的 先感谢各位朋友帮忙。谢谢。 回复讨论(解决方案) 没有人吗？前辈们都在忙着啪啪啪敲码呢吗？ Document 文字，默认的font-size:16px; ，默认的font-size:13px; 锄禾日当午， 汗滴禾下土。 锄禾日当午， 汗滴禾下土。 Document ...
很棒的CSS3立体效果http://www.999jiujiu.com/ .list_case_left{position:absolute;left:10%;font-size:130px;font-weight:800;color:#fff;text-shadow:1px 0px #009807, 1px 2px #006705, 3px 1px #009807, 2px 3px #006705, 4px 2px #009807, 4px 4px #006705, 5px 3px #009807, 5px 5px #006705, 7px 4px #009807, 6px 6px #006705, 8px 5px #009807, 7px 7px #006705, 9px 6px #009807, 9px 8px #006705, 11px 7px #009807, 1...
兼容各个浏览器的未知高度div垂直居中效果:让div垂直居中与它的父对象中，并不像是让div在父元素中水平居中那么简单，只要简单的为此元素设置margin:0px auto即可，虽然将一些属性配合使用也可以将div垂直居中与父元素中，但是在某些浏览器中并不兼容，下面就介绍一种兼容各大浏览器的方式。先看一段代码实例: 蚂蚁部落 .parent { width:200px; height:200px; background-color:green; display:table-cell; verti...
如何使用CSS实现小三角形效果:在众多的网页效果中，都有小三角形效果的应用，能够增加特定应用的美观度，下面就给出一段实例代码，里面介绍了两种实现小三角头效果的方式。代码如下: 三种纯CSS实现三角形的方法.message-box { position:relative; float:left; margin:80px 0 0 100px; width:240px; height:60px; line-height:60px; border:1px solid #000; text-align:center; color:#0C7823;}.triangle-border { ...
（1）我想做一个电子菜谱，在菜谱页面左边有菜式的分类，点击分类能在右边显示该分类的菜式。我用两个使用浮动属性实现了左右两个界面，可是两个界面之间有内容会重叠在一起，百度了也不知道怎么解决，右边界面中我把一类型的菜式用表格放在一起，不过效果不是很好的样子（本来想加入图片的，不过太乱了，放弃了），而且无法做到分类显示，几个表格都同时显示了，这种情况要怎么解决？使得左边分类与右边的菜式一一对应。 （2）...
CSS如何实现滑动门效果:所谓的滑动门和tab选项卡其实是一个意思，下面就通过实例介绍一下如何实现此功能，代码实例如下: JS实现的新闻列表tab选项卡效果-蚂蚁部落* { padding:0; margin:0}img { border:0; display:block;}body { font-size:12px; margin:0px auto; color:black; text-align:center;}.dis{ display:block;}.undis { display:none;}#cntR { width:302px; margin:0 auto;}#NewsTop{ ...
CSS如何实现网易的盖楼效果:建议:尽可能的手写代码，可以有效的提高学习效率和深度。在很多论坛性质或者回复功能的网站都有盖楼效果，就是回复与回复之间能够叠加，这个感觉比较人性化，没有体验过这样的效果的朋友可以去网易找一个比较火热的帖子看一下它的回复就明白了。下面就介绍一下如何实现此种功能，代码实例如下: 蚂蚁部落* { margin:0px; padding:0px;}#wrap{width:500px;}.box { margin-bottom:12px; overflow...
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title></title> 7 <script src="/Scripts/jquery-1.10.2.min.js"></script> 8 9 <link rel="stylesheet" href=""> 10 <style> 11 *{ 12 padding:0; 13 margin:0; 14 font: 24px/24px "Microsoft Yahei"; 1...
示例代码是这个 http://www.thibaud.be/#/style04/ 自己写了一个 但是连续hover时 里面的字会上升 怎样解决？代码在下面 a{ text-decoration: none; color: #333333; } .bar{ list-style: none; width:200px; height:50px; line-height: 50px; font: "Microsoft YaHei",tahoma,arial,Hiragino Sans GB,\5b...
如何实现div水平垂直和居中效果: 有时候可能我们需要让一个div在它的父容器中居中显示。先看代码实例再进行分析。 代码实例: 蚂蚁部落.parent{ width:500px; height:500px; border:1px solid red; position:absolute;}.children{ width:200px; height:100px; background-color:green; position:absolute; top:50%; left:50%; margin:-50px 0 0 -100px;} 上面代码中，使用了position属性实现对象的垂直...