pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

用下面的代碼寫html5 和css3

Canvas rgba() hsla() border-image: border-radius: box-shadow: Multiple backgrounds opacity: CSS Animations CSS Columns CSS Gradients CSS Reflections CSS Transforms CSS Transitions var Modernizr = (function(){ var tests = { canvas: true, rg
  • Canvas
  • rgba()
  • hsla()
  • border-image:
  • border-radius:
  • box-shadow:
  • Multiple backgrounds
  • opacity:
  • CSS Animations
  • CSS Columns
  • CSS Gradients
  • CSS Reflections
  • CSS Transforms
  • CSS Transitions


var Modernizr = (function(){
    var tests = {
        canvas: true,
        rgba: true,
        hsla: true,
        multiplebgs: true,
        borderimage: true,
        borderradius: true,
        boxshadow: true,
        opacity: true,
        cssanimations: true,
        csscolumns: true,
        cssgradients: true,
        cssreflections: true,
        csstransforms: true,
        csstransitions: true
    };
    var passed = {};
    var groups = {
        canvas: ["canvas"],
        rgba: ["rgba"],
        hsla: ["hsla"],
        multiplebgs: ["multiplebgs"],
        borderimage: ["borderimage"],
        borderradius: ["borderradius"],
        boxshadow: ["boxshadow"],
        opacity: ["opacity"],
        cssanimations: ["cssanimations"],
        csscolumns: ["csscolumns"],
        cssgradients: ["cssgradients"],
        cssreflections: ["cssreflections"],
        csstransforms: ["csstransforms"],
        csstransitions: ["csstransitions"]
    };
    var enablehtml5 = true;
    var enableNoClasses = true;
    var m = document.createElement("modernizr");
    var detectFeature = function(feat){
        var supported = false, prop, i, tmp;
        switch (feat) {
            case "canvas":
                supported = !!document.createElement("canvas").getContext;
                break;
            case "rgba":
                m.style.cssText = "background-color: rgba(150,255,150, .5)";
                supported = !!(m.style.backgroundColor.indexOf("rgba") !== -1);
                break;
            case "hsla":
                m.style.cssText = "background-color: hsla(120,40%,100%, .5)";
                supported = !!(m.style.backgroundColor.indexOf("rgba") !== -1);
                break;
            case "multiplebgs":
                m.style.cssText = "background: url(m.png), url(a.png), #f99 url(m.png);";
                tmp = m.style.background;
                i = 0;
                while (tmp.indexOf("url(") !== -1) {
                    i++;
                    tmp = tmp.substring(0, tmp.indexOf("url(")) + tmp.substring(tmp.indexOf("url(") + 4)
                }
                supported = !!(i === 3);
                tmp = i = null;
                break;
            case "borderimage":
                prop = ["borderImage", "webkitBorderImage", "MozBorderImage", "mozBorderImage", "oBorderImage", "msBorderImage"];
                m.style.cssText = "border-image: url(m.png) 1 1 stretch; -webkit-border-image: url(m.png) 1 1 stretch; -moz-border-image: url(m.png) 1 1 stretch; -o-border-image: url(m.png) 1 1 stretch; -ms-border-image: url(m.png) 1 1 stretch;";
                for (i in prop) {
                    if (m.style[prop[i]] !== undefined) {
                        supported = true;
                        break
                    }
                }
                break;
            case "borderradius":
                prop = ["borderTopRightRadius", "webkitBorderTopRightRadius", "MozBorderTopRightRadius", "mozBorderTopRightRadius", "oBorderTopRightRadius", "msBorderTopRightRadius"];
                m.style.cssText = "border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-top-right-radius: 10px; -o-border-top-right-radius: 10px; -ms-border-top-right-radius: 10px;";
                for (i in prop) {
                    if (m.style[prop[i]] !== undefined && prop[i].indexOf("orderTopRight") !== -1) {
                        supported = true;
                        break
                    }
                }
                break;
            case "boxshadow":
                prop = ["boxShadow", "webkitBoxShadow", "MozBoxShadow", "mozBoxShadow", "oBoxShadow", "msBoxShadow"];
                m.style.cssText = "box-shadow: #000 1px 1px 3px; -webkit-box-shadow: #000 1px 1px 3px; -moz-box-shadow: #000 1px 1px 3px; -obox-shadow: #000 1px 1px 3px; -ms-box-shadow: #000 1px 1px 3px;";
                for (i in prop) {
                    if (m.style[prop[i]] !== undefined) {
                        supported = true;
                        break
                    }
                }
                break;
            case "opacity":
                m.style.cssText = "opacity: .5;";
                supported = !!(m.style.opacity.indexOf("0.5") !== -1);
                break;
            case "cssanimations":
                prop = ["animationName", "webkitAnimationName", "MozAnimationName", "mozAnimationName", "oAnimationName", "msAnimationName"];
                m.style.cssText = "animation: 'animate' 2s ease 2; -webkit-animation: 'animate' 2s ease 2; -moz-animation: 'animate' 2s ease 2; -o-animation: 'animate' 2s ease 2; -ms-animation: 'animate' 2s ease 2; position:relative;";
                for (i in prop) {
                    if (m.style[prop[i]] !== undefined) {
                        supported = true;
                        break
                    }
                }
                break;
            case "csscolumns":
                prop = ["columnCount", "webkitColumnCount", "MozColumnCount", "mozColumnCount", "oColumnCount", "msColumnCount"];
                m.style.cssText = "column-count: 3; -webkit-column-count: 3; -moz-column-count: 3; -o-column-count: 3; -ms-column-count: 3;";
                for (i in prop) {
                    if (m.style[prop[i]] !== undefined) {
                        supported = true;
                        break
                    }
                }
                break;
            case "cssgradients":
                m.style.cssText = "background-image: gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -webkit-gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -moz-gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -o-gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -ms-gradient(linear, left top, right bottom, from(#9f9), to(white));";
                supported = !!(m.style.backgroundImage.indexOf("gradient") !== -1);
                break;
            case "cssreflections":
                prop = ["boxReflect", "webkitBoxReflect", "MozBoxReflect", "mozBoxReflect", "oBoxReflect", "msBoxReflect"];
                m.style.cssText = "box-reflect: right 1px; -webkit-box-reflect: right 1px; -moz-box-reflect: right 1px; -o-box-reflect: right 1px; -ms-box-reflect: right 1px;";
                for (i in prop) {
                    if (m.style[prop[i]] !== undefined) {
                        supported = true;
                        break
                    }
                }
                break;
            case "csstransforms":
                prop = ["transformProperty", "webkitTransform", "MozTransform", "mozTransform", "oTransform", "msTransform"];
                m.style.cssText = "transform: rotate(3deg); -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg);";
                for (i in prop) {
                    if (m.style[prop[i]] !== undefined) {
                        supported = true;
                        break
                    }
                }
                break;
            case "csstransitions":
                prop = ["transitionProperty", "webkitTransitionProperty", "MozTransitionProperty", "mozTransitionProperty", "oTransitionProperty", "msTransitionProperty"];
                m.style.cssText = "transition: all .5s linear; -webkit-transition: all .5s linear; -moz-transition: all .5s linear; -o-transition: all .5s linear; -ms-transition: all .5s linear;";
                for (i in prop) {
                    if (m.style[prop[i]] !== undefined) {
                        supported = true;
                        break
                    }
                }
                break;
            default:
                supported = false
        }
        m.style.cssText = "";
        tmp = i = prop = null;
        return supported
    };
    function init(){
        if (enablehtml5 &&
        !(!        /*@cc_on!@*/
        0)) {
            var e = "abbr article aside audio bb canvas datagrid datalist details dialog figure footer header mark menu meter nav output progress section time video".split(" "), i = e.length;
            var n;
            while (i--) {
                n = document.createElement(e[i])
            }
            n = null
        }
        for (var feat in tests) {
            if (tests[feat]) {
                passed[feat] = detectFeature(feat)
            }
        }
        var passedgroup, len;
        var classes = [];
        for (var group in groups) {
            passedgroup = true;
            for (i = 0, len = groups[group].length; i < len; i++) {
                feat = groups[group][i];
                if (!passed[feat]) {
                    passedgroup = false;
                    if (!enableNoClasses) {
                        break
                    }
                }
            }
            if (passedgroup) {
                classes.push(group)
            }
            else {
                if (enableNoClasses) {
                    classes.push("no-" + group)
                }
            }
        }
        passed._enablehtml5 = enablehtml5;
        passed._enableNoClasses = enableNoClasses;
        document.getElementsByTagName("body")[0].className += " " + classes.join(" ");
        classes = null;
        return passed
    }
    return init()
})();

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業(yè)用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

本篇文章主要介紹了canvas 實現 github404動態(tài)效果的示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了SVG實現多彩圓環(huán)倒計時效果的示例代碼,本文主要用到了SVG的stroke-dasharray和stroke-dashoffset特性 ,具有一定的參考價值,有興趣的可以了解一下
本篇文章主要介紹了Canvas與圖片壓縮的示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了canvas之自定義頭像功能實現代碼示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
這篇文章主要介紹了HTML5、Select下拉框右邊加圖標的實現代碼,深度美化頁面增進用戶體驗效果,需要的朋友可以參考下
這篇文章主要介紹了html5使用Drag事件編輯器拖拽上傳圖片的示例代碼的相關資料,需要的朋友可以參考下
主站蜘蛛池模板: 厂房出租_厂房出售_产业园区招商_工业地产&nbsp;-&nbsp;中工招商网 | 烘箱-工业烘箱-工业电炉-实验室干燥箱 - 苏州华洁烘箱制造有限公司 | 客服外包专业服务商_客服外包中心_网萌科技 | 单机除尘器 骨架-脉冲除尘器设备生产厂家-润天环保设备 | 电缆故障测试仪_电缆故障定位仪_探测仪_检测仪器_陕西意联电气厂家 | 玉米深加工设备|玉米加工机械|玉米加工设备|玉米深加工机械-河南成立粮油机械有限公司 | 盘煤仪,盘料仪,盘点仪,堆料测量仪,便携式激光盘煤仪-中科航宇(北京)自动化工程技术有限公司 | 东莞画册设计_logo/vi设计_品牌包装设计 - 华略品牌设计公司 | 防水套管|柔性防水套管|伸缩器|伸缩接头|传力接头-河南伟创管道 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 | 污水/卧式/潜水/钻井/矿用/大型/小型/泥浆泵,价格,参数,型号,厂家 - 安平县鼎千泵业制造厂 | 免联考国际MBA_在职MBA报考条件/科目/排名-MBA信息网 | 精密钢管,冷拔精密无缝钢管,精密钢管厂,精密钢管制造厂家,精密钢管生产厂家,山东精密钢管厂家 | 石家庄救护车出租_重症转院_跨省跨境医疗转送_活动赛事医疗保障_康复出院_放弃治疗_腾康26年医疗护送转诊团队 | COD分析仪|氨氮分析仪|总磷分析仪|总氮分析仪-圣湖Greatlake | 打造全球沸石生态圈 - 国投盛世| 电动葫芦|手拉葫芦|环链电动葫芦|微型电动葫芦-北京市凌鹰起重机械有限公司 | 常州减速机_减速机厂家_常州市减速机厂有限公司 | 连栋温室大棚建造厂家-智能玻璃温室-薄膜温室_青州市亿诚农业科技 | 杭州|上海贴标机-百科 | 凝胶成像系统(wb成像系统)百科-上海嘉鹏 | 西安文都考研官网_西安考研辅导班_考研培训机构_西安在职考研培训 | 耳模扫描仪-定制耳机设计软件-DLP打印机-asiga打印机-fitshape「飞特西普」 | 雾度仪_雾度计_透光率雾度仪价格-三恩时(3nh)光电雾度仪厂家 | 【北京写字楼出租_写字楼租赁_办公室出租网/出售】-远行地产官网 | 钢结构-钢结构厂房-钢结构工程[江苏海逵钢构厂]| 法钢特种钢材(上海)有限公司 - 耐磨钢板、高强度钢板销售加工 阀门智能定位器_电液动执行器_气动执行机构-赫尔法流体技术(北京)有限公司 | 脱硫搅拌器厂家-淄博友胜不锈钢搅拌器厂家 | 继电器模组-IO端子台-plc连接线-省配线模组厂家-世麦德 | 广州物流公司_广州货运公司_广州回程车运输 - 万信物流 | 智能家居全屋智能系统多少钱一套-小米全套价格、装修方案 | 新能源汽车电池软连接,铜铝复合膜柔性连接,电力母排-容发智能科技(无锡)有限公司 | 驾驶式洗地机/扫地机_全自动洗地机_工业洗地机_荣事达工厂官网 | 首页|光催化反应器_平行反应仪_光化学反应仪-北京普林塞斯科技有限公司 | 全自动包衣机-无菌分装隔离器-浙江迦南科技股份有限公司 | 锤式粉碎机,医药粉碎机,锥式粉碎机-无锡市迪麦森机械制造有限公司 | 云杂志网-学术期刊-首页| 香港新时代国际美容美发化妆美甲培训学校-26年培训经验,值得信赖! | 船用烟火信号弹-CCS防汛救生圈-船用救生抛绳器(海威救生设备) | 深圳办公室装修-写字楼装修设计-深圳标榜装饰公司 | 涂层测厚仪_漆膜仪_光学透过率仪_十大创新厂家-果欧电子科技公司 | 共享雨伞_共享童车_共享轮椅_共享陪护床-共享产品的领先者_有伞科技 |