前端大本营

HTML5,CSS3,Responsive,资料站

CSS3 nth-child 和 nth-of-type的区别

CSS3带来了更多的选择器功能, 我们可以通过这些特殊的功能来实现我们的,各种样式来提高用户的视觉享受, 其中nth-child和nth-of-type就是 CSS3中很重要的两个选择器 :nth-child() 用来定位某个父元素的特定的一个或多个子元素, :nth-child()有一个参数n, n可以是数值,表达式,关键词。 如下面的例子
HTML代码
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS代码
li{width:10px; height:10px; background: red; float: left; margin-right:5px;}
li:nth-child(3){background: green; border-radius: 10px;}
其中参数n,指的是父元素中第几个子元素,和计算机中常用的以0开始不同。 其中表达式类似于 2n(等同于关键词even), 2n+1(等同于odd) :nth-of-type() :nth-of-type()和 :nth-child()类似, 不同的是,他只计算父元素中指定的某种类型的子元素。当某个元素中的子元素,不单单是同一种类型的元素时,使用:nth-of-type 选择器来定位与父元素中的某种类型的子元素是非常方便和有用的。
Posted in CSS最新技术 | CSS3 nth-child 和 nth-of-type的区别已关闭评论
以前制作手风琴效果一定要配合javascript, CSS3 的出现完全简化了这个过程,我们可以通过简单的CSS代码就可以生成漂亮的手风琴效果 首先放效果

CSS3 手风琴效果

CSS代码
    .accordion{background:#FFF; color:#424242; font: 12px Arial, Verdana, sans-serif; margin:0 auto; padding: 10px; width:500px;}
    .accordion h2{margin:5px 0; padding:0; position:relative;}
    .accordion h2:before{border:5px solid #FFF; border-color:#FFF transparent transparent; content: ""; height: 0; position:absolute; right: 10px; top: 15px; width:0;}
    .accordion h2 a{background: #8f8f8f; background: linear-gradient(top, #cecece, #8f8f8f); border-radius: 5px; color:#424242; display:block; font-size:13px;  font-weight: normal; margin:0; padding: 10px; text-shadow:2px 2px 2px #aeaeae; text-decoration: none; background: -webkit-linear-gradient(top, #cecece, #8f8f8f)}
    .accordion :target h2 a, .accordion h2 a:focus, .accordion h2 a:hover, .accordion h2 a:active{background: linear-gradient(top, #6bb2ff, #2288dd); color:#FFF; background: -webkit-linear-gradient(top, #6bb2ff, #2288dd)}
    .accordion p{margin: 0; height: 0; overflow: hidden; padding: 0 10px; transition: height 0.5s ease-in;}
    .accordion :target p{height: 100px; overflow: auto;}
    .accordion :target  h2:before{border-color: transparent transparent transparent #FFF;}
HTML代码
<div class="accordion">
        <div class="menuSection" id="brand">
            <h2><a href="#brand">Brand</a></h2>
            <p>Lorem ipsum dolor...</p>
        </div>
        <div class="menuSection" id="promotion">
            <h2><a href="#promotion">Promotion</a></h2>
            <p>Lorem ipsum dolor...</p>
        </div>
        <div class="menuSection" id="event">
            <h2><a href="#event">Event</a></h2>
            <p>Lorem ipsum dolor...</p>
        </div>
    </div>
短短的几行代码我们就可以实现手风琴效果了。
Tags: ,
Posted in CSS最新技术 | CSS3 制作的手风琴效果已关闭评论
网上的淡入淡出效果大多是依照jquery中fadeIn和fadeOut的方法使用js来控制元素的透明度达到目的,但缺点是有轻微的卡顿感,并且运行效率一般。 这里提供另外一个思路,即通过预先定义好的css样式控制图片透明度的过渡, 这种方法过渡平滑,过渡的效果基于css3的animation,所以效率高些。 思路是将淡入,淡出的效果做成预先定义好的样式类,然后用JS改变元素的类来达到图片轮播。(注意:因为是基于CSS3的animation,在移动端做的兼容性测试表现不错,桌面端暂时没有发现太大的问题。但IE对于css的background支持不太好,外链图片有时会有问题。) 关键点在于fadeIn和fadeOut之间的透明度切换: 以下为实际代码 CSS
.animate-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
  transition: opacity 2s linear;
  opacity:0;

}

#bg1 {
  background: url(../img/index2-1.jpg) no-repeat;
  background-size: cover;
  
}

#bg2 {
  background: url(../img/index2-2.jpg) no-repeat;
  background-size: cover;
}

#bg3 {
  background: url(../img/index2-3.jpg) no-repeat;
  background-size: cover;
}

.fadein {
  opacity: 100;
  filter: alpha(opacity=100);
}
HTML(后插入的图片显示在前):
<div id="imgs">
        <div id="bg3" class="animate-bg"></div>
        <div id="bg2" class="animate-bg"></div>
        <div id="bg1" class="animate-bg fadein"></div>
    </div>
JS:
function fadeIn(e) {
  e.className = "animate-bg fadein"
};

function fadeOut(e) {
  e.className = "animate-bg"
};
//申明图片数组中当前的轮播图片
cur_img = document.getElementById("imgs").children.length - 1;
//图片轮播函数
function turnImgs(imgs) {
    var imgs = document.getElementById("imgs").children;
    if (cur_img == 0) {
      fadeOut(imgs[cur_img]);
      cur_img = imgs.length - 1;
      fadeIn(imgs[cur_img]);
    } else {
      fadeOut(imgs[cur_img]);
      fadeIn(imgs[cur_img - 1]);
      cur_img--;
    }
  }
  //设置轮播间隔
setInterval(turnImgs, 6000);
Tags:
Posted in CSS最新技术 | 基于 CSS3 利用javascript 实现的淡入淡出效果已关闭评论