前端大本营

HTML5,CSS3,Responsive,资料站

利用CSS3动画制作你的动画加载页面

制作工具
  1. WOW.js
  2. Animate.css
制作方法

将css及js加载到页面

<link rel="stylesheet" type="text/css" media="all" href="/js/animate.css" />
<script type="text/javascript" src="/js/wow.min.js"></script>

在HTML中需要加载动画的部分,添加class名

<div class="wow slideInLeft"></div>  
<div class="wow slideInRight"></div>

可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>  
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div> 

执行js

var wow = new WOW({  
    boxClass: 'wow',  /*指定动画元素的class名*/
    animateClass: 'animated',  
    offset: 0,  /*距离可视区域多少开始执行动画*/
    mobile: true,  /*是否在移动设备上执行动画*/
    live: true  /*异步加载的内容是否有效*/
});  
wow.init();  
Tags: ,
Posted in 精彩内容 | 利用 CSS3 技术制作屏幕滚动 动画加载内容的效果已关闭评论

首先现在比较流行的区别IE与其他浏览器的CSS写法,

条件判断式

这种方法旨在页面读取中使用相应的判断条件,让浏览器读取指定的CSS样式

<!--[if !IE]><!--> 除IE以外的浏览器都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE浏览器可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
稍作说明 ! 表示否,除了
lt 表示小于
lte 表示小于等于
gt 表示大于
gte 表示大于等于
( ) 优先计算
& 表示和,并且
| 表示或者
加载CSS2
<!--[if lt IE 9]>
加载CSS1(可以把要重写的写在这里).
<![endif]-->
以上内容均为了解即可, 这里告诉大家一个更有效的CSS写法,可以直接在样式表内,判断是否为IE浏览器。
@media all and (-ms-high-contrast:none){
   *******
}
简单吧,再不用为一个IE浏览器,来回在页内追加判断代码了
Tags: ,
Posted in CSS最新技术 | IE区别于其他浏览器的CSS代码写法。不使用判断条件式已关闭评论

虽然CSS3已经流行很久了,但是总有一部分人还在使用IE8的浏览器。
没有办法,作为一个负责人的前端人员,总是要求满足客户的需求, 如何才能叫IE8 实现rgba的效果呢?

在IE8实现背景透明的效果
div{
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 
    background: rgba(0, 0, 0, 0.4);
}
div:not(:target){
    filter: none;
}
代码说明

利用IE以前制作过渡效果的代码,我们可以将起始颜色,和结束颜色设置为相同, 这样就可以实现半透明状态。
startColorstr=#66000000 其中66为透明度, 后面的000000为16进制的颜色代码
透明度的设置可以参考以下表格

透明度 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
00 1A 33 4D 66 80 99 B3 CC E6 FF

Tags: , ,
Posted in 本站原创 | 使用Hack,让IE8实现 rgba的效果已关闭评论
以前制作手风琴效果一定要配合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 实现的淡入淡出效果已关闭评论

使用 jQuery 和 CSS 判断 iPhone6 PLUS 及各种技巧

iPhone6 PLUS *************************************************************************************** 前提 苹果公司发布了 iPhone6 及 iPhone6 PLUS, 同时,苹果手机产品的屏幕尺寸又发生了新的变化。 作为合格的前端,我们又该在Javascript 和 CSS中添加相应的代码来适应苹果的各种改变。 使用Javascript (jQuery) 来判断是否是 iPhone6 PLUS Javascript可以通过 devicePixelRatio 获取显示器的 Ratio值 iPhone6 PLUS 的这个值是 3 iPhone5/5s/6 的devicePixelRatio值是 2
if(navigator.userAgent.indexOf('iPhone') > 0){
    if(window.devicePixelRatio == 3) {
        alert('iPhone6 Plus!!'); //「iPhone6 Plus」処理
    }
}
使用Javascript 判断 iPhone6 PLUS 的屏幕状态(横向? 竖向?)
if(navigator.userAgent.indexOf('iPhone') > 0){
    if(window.devicePixelRatio == 3) {
        window.onorientationchange = setView;
        setView();
 
        function setView(){
            if(window.orientation == 0){
                alert('portrait:iPhone6 PLUS 竖向'); 
            } else {
                alert('landscape:iPhone6 PLUS 横向'); 
            }
        }
    }
}
为 iPhone6 PLUS 横向的时候添加 Class
<script>
$(function(){
    var lsClass = 'ip6landscape';
    if(navigator.userAgent.indexOf('iPhone') > 0){
        if(window.devicePixelRatio == 3) {
            window.onorientationchange = setView;
            setView();
 
            function setView(){
                if(window.orientation == 0){
                    $('body').removeClass(lsClass);
                } else {
                    $('body').addClass(lsClass);
                }
            }
        }
    }
});
</script>
利用CSS来判断 iPhone6 PLUS
@media screen and (-webkit-device-pixel-ratio:3) {
    body {
        color: #fff;
        background: #333;
    }
}
利用CSS来判断 iPhone6 PLUS的屏幕状态(横向? 竖向?)
@media screen and (-webkit-device-pixel-ratio:3) and (orientation: portrait) {
    body {
        color: #fff;
        background: #333;
    }
}
@media screen and (-webkit-device-pixel-ratio:3) and (orientation: landscape) {
    body {
        color: #000;
        background: #ccc;
    }
}
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: , ,
Posted in 本站原创 | 使用 jQuery 和 CSS 判断 iPhone6 PLUS 及各种技巧已关闭评论
适用于Chrome和Opera的 CSS hack写法 以下两种方法都适用,效果是一样的
/*适用于Chrome和Opera的 CSS hack*/
_::content, _:future, .css_selector:not(*:root) { 
  background-color: ForestGreen;
}

/*适用于Chrome和Opera的CSS hack*/
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .css_selector {
    background-color: ForestGreen;
  }
}
适用于Firefox的 CSS hack写法
/*适用于Firefox的CSS hack*/
@-moz-document url-prefix() {
  .css_selector {
    background-color: OrangeRed;
  }
}
适用于Safari的CSS hack写法
/*适用于Safari的CSS hack*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, .css_selector {
    background-color: LightSteelBlue;
  }
}

适用于Internet Explorer10和11的 CSS hack写法
/*适用于IE10以后的所有版本*/
@media all and (-ms-high-contrast:none){
  .css_selector {
    background-color: LightSkyBlue;
  }
}

/*适用于IE11*/
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .css_selector {
    background-color: LightSkyBlue;
  }
}
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags:
Posted in CSS最新技术 | Chrome, Firefox, Safari, IE10, IE11 各个浏览器 CSS hack大集合已关闭评论