搜索到
4
篇与
的结果
-
HTML+CSS+JS实现打字机效果！ 直接上代码：HTML泰科智能 CSS.daziji{ height: 120px; line-height: 120px; text-align: center; position: relative; font-size: 50px; letter-spacing: .2em; } .daziji h2{ margin: 50px 0 20px; color: #fff;display: initial; } .container{ margin-right: 5px; } .delete{ border-right: 2px solid #fff; /*step-end是动画过渡效果，设置step-end代表不过渡*/ animation: blingbling 1s step-end infinite; } @keyframes blingbling{ from,to{ border-color: transparent; } 50%{ border-color: #fff; } }JavaScriptconst data = ["协手未来！","开启自动化新时代","构建更智能的世界","轻巧智动 协作无间"]; //打字机文字 英文","分隔 const container = document.getElementsByClassName('container')[0]; const Delete = document.getElementsByClassName('delete')[0]; //data数组的下标 let index = 0; //data数组每一项字符串的下标 let strIndex = 0; //开始的时间或是上一刻的时间 let start = null; //上次操作与现在的时间间隔 let interval = 0; //每次变化的间隔 let change = 500; //现在是否是删除状态 let isDelete = false; //根据requestAnimationFrame定义，这是一个回调函数，这个函数会 //传入一个参数，用来表示执行回调函数的时刻 function blink(time){ //这个方法必须在函数内部再调用一次才会无限循环调用 window.requestAnimationFrame(blink); //如果不存在开始的时间，说明是第一次进入函数 if(!start){ start = time; } //计算现在与上次操作差了多久 interval = time - start; //如果大于间隔时间，则应该执行新的操作 if(interval > change){ //取出数组的某一个字符串 let str = data[index]; //不在删除状态 if(!isDelete){ //change是时间间隔，使用随机数，模仿不同的打字时间 change = 500 - Math.random()*400; container.innerHTML = str.slice(0,++strIndex); } else{ container.innerHTML = str.slice(0,strIndex--); } //当前进行了操作，需要保存当前的时间 start = time; //对字符串进行判断，全部打印后则删除 if(strIndex == str.length){ isDelete = true; change = 200; start = time + 1200; } //删除后打印下一个 if(strIndex -
最佳PHP，HTML5和CSS框架大荟萃之三 CSS框架 1. Twitter BootstrapTwitter Bootstrap是Twitter发起的一个工具型类库，可以高效的帮助你开发网站。基于LESS和一些基础的CSS/HTML，包括： 表单 按钮 表 导航 标签页 字体排版 Grid 提供了940px及其16列的布局，支持流体布局及其固定布局。（最新的BS3，缺省提供了响应式的支持，倡导Mobile First）。更多阅读：移动为先的Bootstrap 3使用Bootstrap能够让你免除自己维护和处理CSS的痛苦过程，特别是对于开发人员来说，但是缺点是界面的同质化严重，大家开发的网站都一个样子。源代码 2. Pure : CSS FrameworkPure是Yahoo创建的一个比较新的CSS框架。使用Normaliz.css并且不提供任何的JS，只提供纯HTML/CSS。这个框架发布的时候就很紧跟响应式的布局潮流，拥有字体排版，网格，表单，按钮，表格和导航等等。使用非常简单，整个框架也非常轻量级（这里推荐一个Pure使用的教程，大家可以阅读）源代码 3. Fitgrd : Responsive Grid SystemFitgrd其实不是一个框架。它是一个非常健壮可以帮助你开发响应式网站的基础。设计的初衷是为了快速的原型搭建，但是作为产品网站开发基础来说也非常的好用。如果你不希望页面看起来都是Bootstrap风格的话，这套Grid系统非常适合高级web设计师。除了Grid外所有的其它设计都可以自由掌控，它提供了很多保存非必要代码的机会。4. Metro UI CSSMetro UI CSS是一套创建UI界面的框架。包含了一个自封装的解决方案，同时也可以和其它框架联合使用。包含了图片，提示，表单，按钮，印刷字体等等的支持。这个框架目前还在开发中，未来将会提供更多的特性和选项。源代码5. SkelJSSkelJS是一个轻量级的前端框架，用来帮助你创建响应式的网站和应用。包含一个单独的JS文件（大概18kb），提供给设计师和开发人员方便的访问组件的能力，包括：CSS网格系统，响应式处理，CSS所写和插件系统源代码6. CardinalCardinal是一个超迷你，移动为先的CSS框架，使用一些非常实用的样式，可缩放的字体，可重用的模块，及其响应式的网格系统。提供了一个新的方式来缩放web字体，并且支持多种不同的设备。对于像素的精确度有一定的要求，但是并非使用非常严格。相反，Cardinal利用了模块化的缩放，非单位的行高，及其强大了REM单位来使得字体和布局在不同的设备上缩放更加简单。源代码 7. GumbyGumby框架是一个灵活的响应式的CSS框架，基于SASS。使用一个灵活的响应式网格框架和UIkit来快速创建逻辑页面和应用原型。基于强大的SASS - SASS是一个强大的CSS预编译处理器（这里了解更多SASS），可以允许你快速的开发Gumby，支持快速自定义和扩展。Gumby的开发符合最新的标准和spec。为了能够保持这种犀利，Gumby支持现代浏览器，如下：Chrome, Firefox, Opera, Internet Explorer 8 – 10.源代码8. 52 Framework52frameworks是一个CSS框架，提供了一些简单的方式来使用HTML/CSS3创建网站并且支持所有现代浏览器（包括ie6）。使用HTML5标签，例如，header，nav，section，article，footer或者新的输入字段如，url，email等等，这个框架也可以作为HTML5兼容的reset样式源代码9. 960 GS一个CSS的框架，帮助你按照960GS来开发你的网站。最重要的，提供了两个不同的包装方式：12列和16列。可以单独使用或者互相配合使用。其次，提供了一个overlay工具。源代码10. Less : HTML Powered CSS FrameworkLess框架是一个帮助你创建灵活的多列网站和布局的轻量级CSS框架。包含了8列的针对行高24px和基于黄金组合的字体预设的网格优化设计。源代码11. YAMLYAML是一个知名的多列布局CSS框架。这个框架最棒的地方在于支持几乎所有的浏览器。除此之外，这个框架的开发者也将web标准考虑到开发中去。并且这个框架兼容YAML builder。源代码12. Foundation
-
让IE6/IE7/IE8浏览器支持CSS3属性 大家都知道IE 6,IE7,IE8不支持css3中新加属性，老外写了一个ie-css3.htc，主要利用的是VML原理，可以让IE 6,7,8支持部分的CSS3属性,包括：border-radius（圆角），box-shadow（阴影），text-shadow（文本阴影）。使用是很容易的，看下面的示例代码：.box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari 和 Chrome */ border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */ box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */ }可以看到，除了最后添加了behavior这么一句，CSS3属性还是那个CSS3属性，不需要化妆、修饰或是化身为变形金刚，这也是此方法的优点所在。PS:htc文件一定要放在服务器上，放在本地测试是不行的！而且考虑到性能问题，尽量不用htc文件。htc下载：ie-css3.htc 转载请注明： 转载自WEB前端开发(www.css119.com)
-
35个最佳响应式HTML5和CSS3模板 Free Responsive TemplatesFlexAppDemo || DownloadzGallering – Free Responsive Html5 ThemeDemo || DownloadResponsive HTML5/CSS3 templateDemo || DownloadVividPhoto HTML5 and CSS3 TemplateDemo || DownloadResponseEve HTML TemplateDemo || DownloadBrownie Responsive HTML5 TemplateDemo || DownloadRetina – Free Responsive HTML5 TemplateDemo || DownloadDigyDemo || DownloadObscura – Free Responsive HTML TemplateDemo || DownloadImCreative HTML5 TemplateDemo || DownloadSimple Responsive TemplateDemo || DownloadKeyners HTML5/CSS3 Responsive TemplateDemo || DownloadzParalexy – Free Responsive Html5 ThemeDemo || DownloadPremium HTML5/CSS3 TemplatesMY FOLIO – Responsive Photography Retina-Rdy HTML5Demo || DownloadSmart Business – Responsive HTML5 TemplateDemo || DownloadRENOVA – Unique One Page ThemeDemo || DownloadIncrease – Premium Corporate HTML5 TemplateDemo || DownloadBigWig – Modern Corporate HTML5 TemplateDemo || DownloadNevia – Responsive HTML5 TemplateDemo || DownloadDelicate – Responsive Multipurpose HTML5 TemplateDemo || DownloadLeviate – HTML5 One Page Parallax TemplateDemo || DownloadConstruct – Responsive HTML5/CSS3 TemplateDemo || DownloadPorto – Responsive HTML5 TemplateDemo || DownloadCartel HTML5 Responsive Studio TemplateDemo || DownloadWebpaint – 2 in 1 Responsive HTML5 TemplateDemo || DownloadFreshlook – Responsive MultiPurpose HTML5 TemplateDemo || DownloadRT-Theme 17 Premium HTML5 TemplateDemo || DownloadSurreal – Responsive Parallax One Page HTML5Demo || DownloadRevision – Responsive HTML5 TemplateDemo || DownloadBoom – Responsive Html5 Portfolio TemplateDemo || DownloadExpo – Responsive HTML5 TemplateDemo || DownloadAMAZE – Interactive Parallax – Responsive HTML5Demo || DownloadFlexBox – HTML5 Template ResponsiveDemo || DownloadBlocked – Responsive HTML5 TemplateDemo || DownloadOutshined – Responsive HTML5 TemplateDemo || Download
