搜索到
7
篇与
的结果
-
HTML5实现微信聊天气泡效果 HTML5实现微信聊天气泡效果图： 话不多说直接放代码：<div class="container-manc"> <!-- Notice/Center --> <div class="chat-notice"> <span>漫川邀请“汤圆”进入群聊</span> </div> <!-- Left --> <div class="chat-sender"> <div><img src="http://q.qlogo.cn/headimg_dl?dst_uin=82632418&spec=640&img_type=jpg"></div> <div>汤圆</div> <div> <div class="chat-left_triangle"></div> <span>哇！博主的站点真的好好看，请问如何给博主进行留言呢？</span> </div> </div> <!-- Right --> <div class="chat-receiver"> <div><img src="http://q.qlogo.cn/headimg_dl?dst_uin=28422961&spec=640&img_type=jpg"></div> <div>漫川</div> <div> <div class="chat-right_triangle"></div> <span>您可以在下面与博主进行留言，看到会回复您的喔！</span> </div> <!-- Right --> <div class="chat-receiver"> <div><img src="http://q.qlogo.cn/headimg_dl?dst_uin=28422961&spec=640&img_type=jpg"></div> <div>漫川</div> <div> <div class="chat-right_triangle"></div> <span>您的每句话都会记录在漫川站点的数据库里，直到风消失的那天.</span> </div> </div>CSS代码：/*微信聊天气泡*/ .chat-sender{ clear:both; font-size: 80%; } .chat-sender div:nth-of-type(1){ float: left; } .chat-sender div:nth-of-type(2){ margin: 0 50px 2px 50px; padding: 0px; color: #848484; font-size: 70%; text-align: left; } .chat-sender div:nth-of-type(3){ background-color: #efefef; /*float: left;*/ margin: 0 50px 10px 50px; padding: 10px 10px 10px 10px; border-radius:7px; text-indent: -12px; } .chat-receiver{ clear:both; font-size: 80%; } .chat-receiver div:nth-of-type(1){ float: right; } .chat-receiver div:nth-of-type(2){ margin: 0px 50px 2px 50px; padding: 0px; color: #848484; font-size: 70%; text-align: right; } .chat-receiver div:nth-of-type(3){ /*float:right;*/ background-color: #b2e281; margin: 0px 50px 10px 50px; padding: 10px 10px 10px 10px; border-radius:7px; } .chat-receiver div:first-child img, .chat-sender div:first-child img{ width: 40px; height: 40px; border-radius: 10%; } .chat-left_triangle{ height: 0px; width: 0px; border-width: 6px; border-style: solid; border-color: transparent white transparent transparent; position: relative; left: -22px; top: 3px; } .chat-right_triangle{ height: 0px; width: 0px; border-width: 6px; border-style: solid; border-color: transparent transparent transparent #b2e281; position: relative; right:-22px; top:3px; } .chat-notice{ clear: both; font-size: 70%; color: white; text-align: center; margin-top: 15px; margin-bottom: 15px; } .chat-notice span{ background-color: #cecece; line-height: 25px; border-radius: 5px; padding: 5px 10px; }
-
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
-
最佳PHP，HTML5和CSS框架大荟萃之二 HTML5框架 这篇文章继续我们的框架大荟萃，如果你没有阅读前面的文章，请点击这里查看PHP框架。1. Foundation 5数以百万计的设计师和工程师都接受使用foundation框架来作为产品或者网站的前端设计。foundation是第一个支持响应式，语义化，移动为先的开源框架。最近Foundation5已经发布，作为当今最快速的发布版本工具，在很多方便比如开发产品和网站都很快。内建了一个新的命令行工具可以让你加速foundation的项目开发，并且所有这些项目都使用libsass，一个后端的SASS编译类库，可以大大的提高SCSS的变化，提速了5倍。 (如果大家对于foundation框架有兴趣，请阅读foundation专题教程）源代码2. IonicIonic是一个强大HTML5本地应用开发框架，可以帮助你创建本地风格的移动应用，使用web相关技术，例如，HTML,CSS，javascript。Ionic主要针对UI界面和Look and Feel。开源并且基于SASS，针对Angular.js优化。通过知名的本地移动开发SDK来建模设计，使得对于熟悉iOS和Android开发的开发人来说上手非常容易。源代码3. Lime JS这是个HTML5的游戏框架，帮助你看起来像本地应用的游戏，在桌面，平板或者触摸设备浏览器上运行速度非常快。主要使用来自Google的losure类库开发，拥有很丰富的功能和class来控制时间轴，事件，图形和动画。同时这个框架拥有完整的Sprite sheet来支持。源代码4. 52 Framework52 frameworks在设计师和开发人员中最知名的HTML5/CSS3的框架。支持现代浏览器（包括IE6）使得它成为最有特色并且最实用的框架。源代码5. Sencha TouchSencha touch是一个高性能的HTML5移动应用框架，并且是Sencha HTML5平台的基石。帮助开发具有世界级用户体验的应用。Sencha touch是唯一的允许开发人员在iOS，Android，Window phone及其其它平台开发强大应用的框架。源代码6. JoJo是一个开源的HTML5移动应用框架。帮助你开发基于多平台的应用，支持：webOS，Android，Symbian，Safari，Chrome和Dashboard组件。这个框架非常迷你，只有8kb。没有任何的类库依赖并且兼容很多其它的JS框架。同时兼容PhoneGap，使得它也可以支持本地应用。源代码7. FireShellFireShell主要为现代浏览器开发人员准备。鼓励更好的工作流，并且可以适应单人或者团队使用。支持javascript任务运行，编译过程，自动压缩和文件组合，使用高级的HTML5 boidlerplated来封装。对于HTML5语义，WAI-ARIA角色和web访问来说拥有非常的功能。CSS框架支持小项目，并且可以升级大项目，拥有非常棒的配置安装，帮助你生成基于对象得到CSS开发扩展过程。源代码8. GridlessGridLess是一个HTML5/CSS3的boilerplate框架，帮助你开发移动为先的响应式跨浏览器网站，拥有非常漂亮的印刷排版。支持DBY方式并且允许开发人员使用CSS normalization，漂亮的排版，组织非常清楚地目录，IE Bug fix及其其它非常不错的功能。源代码9. iio EngineiiO Engine是一个开源的使用JS/画布创建HTML5应用的框架。这个框架非常轻量级（45kb），并且整合了一个debugging系统和跨平台的引擎。不依赖任何JS框架，可以和Box2D联合工作。提供了完整的文档和很多简化开发的例子。源代码10. Lungo.jsLungo.js是第一个移动框架，包含了很多丰富的HTML5，CSS3，和JS特性。帮助开发人员开发iOS，Android和BlackBerry，WebOS的应用。这个框架利用了目前移动设备的很多特性，可以捕获很多不同事件，例如，swipe，tap，double tap等等。不试用任何图片，所有内容都是vector，你可以直接发布你的应用到“应用商量”里或者网站上。源代码via codegeekz.com
-
最佳PHP，HTML5和CSS框架大荟萃之一 PHP框架 开发框架是用来帮助开发人员快速设计和开发动态网站的基础，几乎每个月都会有大量的框架被开发人员发布，用来帮助大家更简单和高效的开发web应用。在这篇文章中，我们将总结荟萃出最佳的PHP，HTML5和CSS框架，希望能够在大家选择框架的时候能够供大家参考借鉴。如果你有任何建议和补充，欢迎给我们极客标签社区的编辑们留言推荐，谢谢阅读！ 同时如果你有兴趣翻译或者翻译技术文章，请加入我们的原创翻译小组。PHP框架1. Cake PHPCakePHP是一个拥有极大灵活性的开发，维护和部署的快速开发框架。使用非常常见的MVC和ORM设计模式，及其配置规则帮助大家简化开发过程而无须开发过多的代码和ZF类似，CakePHP不要求配置。使用简单。在IRC上拥有非常友好的社区#cakePHP，用来帮助新的用户快速开始学习。基于MIT License，拥有最佳实践，例如，安全，认证和session处理。拥有面对对象的方式帮助你更简单的使用。源代码2. Yii FrameworkYii是一个免费，开源的web应用开发框架，使用PHP5开发，帮助开发干净，简洁的设计并且鼓励开发开发。它帮助流水化的开发应用，并且保证高效，可扩展和易维护。性能极大的优化，非常适合开发任何类型的产品和项目。然而，它内建复杂，企业级别的应用。你拥有完整的控制，包括表现层和持久层，符合了企业级别开发的指导方针源代码3. ZendZend Framework 2 是一个使用PHP5.3+来开发web应用和服务的开源框架。使用100%的面对对象的代码并且使用PHP5.3种的新特性，例如名字空间，late static binding，lamda function和closure。Zend framewok 2 由成功的PHP框架Zend Framework 1演变而来，而Zend framework 1拥有1500万的下载量。Zend framework2拥有独特的组件结构，每一个组件都设计的尽量少和其它组件产生依赖关系。 ZF2遵循了严格的面对对象的设计原理。这种非严格的组件关系结构允许开发人员使用任何他想使用的组件。源代码4. SymfonySmyfony是一个web应用框架，遵循了典型的MVC（model view controller）的设计结构，现在越来越受欢迎，Symfony基于MIT license，它使用一些PHP代码类的辅助类库得开发的过程简单源代码5. Webasystwebasyst是一个开源的PHP框架用来开发平滑的多用户web应用或者复杂的网站。和其它的框架，例如，zend和symfony，比较起来，Webasyst框架更专注，并且允许更快和更高效的创建基于商业和团队使用的应用。这个框架提供了大量的现成的工具用来管理用户和授权，UI创建，移动端的访问等等源代码6. LaravelLaravle是一个定位于优雅简单的PHP框架。变成不会变的苦闷。事实上，使用正确的工具绝对是让它成为一个让人愉悦的事情。Laravel适合所有的PHP开发人员，特别是初学者。除了完善的文章，Laravel的友好的社区一直帮助回答文档上没有涉及到的相关问题。使用Bundle来打包和分享代码绝对是一个非常棒的方式源代码7. GuzzleGuzzle是一个帮助大家解决发送HTTP请求和创建web service 客户端中多余的步骤的框架。包含了用来创建强壮的web service客户端的工具，其中： 定义输入和输出的服务描述API，用来遍历分页资源的资源迭代，高效发送大量请求等等。源代码8. Phalcon PHPPhalcon PHP是一个被发布成为C扩展并且提供高性能和低资源消耗的web框架。使用C书写，平台无关。作为这样的框架，PHP支持微软的windows系统， GNU/linux，Max OSX，你可以下载一个适合你的系统的二进制包或者自己编译源代码9. CodeIgniterCodelgiter是一个强大的PHP框架，拥有非常小的体积，针对需要使用简单优雅的工具套件开发完整特性的web应用而开发。如果你需要处理共享主机账号或者客户时间有限制，并且厌倦了没有文档的大型框架的话，Codeignier可能非常适合你源代码10. Fuel PHPFuel是一个简单，灵活，社区驱动的PHP5.3 web框架，基于其它框架中的好的想法而开发一个框架。在Apache,，IIS和Nginx上测试过。Fuel使用另外一种方式实现，和其它框架不同，它努力成为社区驱动的框架。刚成立不到6个月，已经有30多个开发人员贡献了代码和文档。源代码via codegeekz来源:gbtags.com
-
HTML5开发：Google Web Designer下载 Google Web Designer是Google最近发布的一款免费Web网页设计工具，主要用于创建基于HTML5和CSS3的网页或交互式动画，设计出的网页动画无需Flash支持，能适应任何平台与设备，不用考虑兼容性问题，最新版升级到1.01.1025，目前仍然是Beta版。Google Web Designer提供了一个完整的、所见即所得的全3D设计环境，支持设计视图和代码视图，对设计做的任何修改，都可以在两种视图中实时呈现。对于网页动画设计，Web Designer有两种动画模式：快速时间轴模式和高级动画模式。快速模式类似于逐帧的幻灯动画；高级模式则基于动画图层，能精确控制每一个元素的动作、位置等。Google Web Designer还是一个方便的Google广告设计工具，软件内置了标准的Adsense或AdMob广告制作流程，通过可视化创建HTML元素标签，无需任何代码基础，就可以轻松制作出动画或交互式广告，包括横幅广告、展开式广告、非页内广告等类型。Google Web Designer 1.0.1.1025更新日记：• 修复19项问题• 扩展版本更新到9.14Google Web Designer 1.0.1.1025官方下载：在线安装包下载，800 KB 支持Win7、Win8、Win8.1等系统，不支持Windows XP。
-
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
