Category: Div / Css / XML / HTML5 / SVG

图片懒加载是一个很重要的前端性能优化手段。这篇文章将从懒加载的最简单场景开始介绍，逐步增加复杂度，希望能讲清楚常见的图片懒加载场景及在该场景下对应的解决办法。   为什么要做图片的懒加载 假设在用户访问某个页面时就加载这个页面全部的图片（即使这些图片并不处在用户的当前的视窗中），在弱网环境或者网速较慢的环境下，这些“冗余”图片的下载会占用用户本来就非常有限的带宽，伤害用户体验（比如影响其他资源的下载）。所以对于网站的图片，理想的做法是懒加载（按需加载）。   图片懒加载的原理 在浏览器内部对于各种资源有着一套自己的优先级定义，浏览器会优先加载优先级高的资源 如果我们不去进行图片的懒加载，… Read More

  智能手机得到了发展。这些设备逐渐超越其早期版本的简单性，已成为多平台控制台。因此，所有网站都必须适应这种新的动态环境。由于没有完全响应的界面，企业可能会冒很大一部分目标人群疏远的风险。管理面板和页面本身都必须具有完全响应能力，能够支持手持设备。 对于那些希望建立并保持成功的网络存在的人来说，Bootstrap是一个理想的选择。它简化了移动优先网页设计，使其非常人性化。它拥有大量的组件，工具和模式，为前端开发人员和Web设计人员提供支持。这个多产的前端框架绝对是一个改变游戏规则的游戏。您可以将Bootstrap 4管理模板用于任何类型的产品，应用程序或站点。因此，许多管理面板可以容纳所有… Read More

Web 开发中几乎的平台都需要一个后台管理，但是从零开发一套后台控制面板并不容易，幸运的是有很多开源免费的后台控制面板可以给开发者使用，那么有哪些优秀的开源免费的控制面板呢？我在 Github 上收集了一些优秀的后台控制面板，并总结得出 Top 10。 zhisheng 点评：有好的轮子可以直接用，重新造轮子耗时太长，做出的效果还不一定够好   AdminLTE Github Star 数 24969 ， Github 地址：https://github.com/almasaeed2010/AdminLTE 非常流行的基于 Bootstrap 3.x 的免费的后台 UI 框架。   vue-Element-Admin Gi… Read More

  <div style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"> <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: se… Read More

  　　虽然说目前CSS3还没正式的标准化，但新的属性已为网页带来许多的便利，像是大家所熟悉的圆角框、阴影、渐层、多栏位….，甚至目前正夯的RWD自适应，这些都是需要使用到CSS3，除此之外CSS3还提供了许多的选择器可使用，如此一来就可大量的减少一些类别的设定，直接透过HTML的标签就可直接进行选择与样式的设定，虽然说很方便，但在CSS3有二个选择器长的很像nth-child与nth-of-type，在正常情况下，二个用起来很像，但若HTML的结构改变时，二个就大不同啦!!!因此梅干作了一个小范例，来帮大家解惑，这二个属性的最大差别什么地方。   :nth-of-type(… Read More

HTML字符实体(Character Entities) 有些字符在HTML里有特别的含义，比如小于号<就表示HTML Tag的开始，这个小于号是不显示在我们最终看到的网页里的。那如果我们希望在网页中显示一个小于号，该怎么办呢？ 这就要说到HTML字符实体(HTML Character Entities)了。 一个字符实体(Character Entity)分成三部分：第一部分是一个&符号，英文叫ampersand；第二部分是实体(Entity)名字或者是#加上实体(Entity)编号；第三部分是一个分号。 比如，要显示小于号，就可以写&lt;或者&#60;。 用实体(Entity)… Read More

用法： .element {     position: relative; }   /*replace the content value with the corresponding value from the list below*/   .element:before {     content: "\f000";     font-family: FontAwesome;     font-style: normal;     font-weight: normal;     text-decoration: inherit; /*--adjust as necessary--*/     color: #000;… Read More

《SASS界面编译工具——Codekit的使用》一文中图解了”CodeKit”图形工具编译SASS项目。由于CodeKit是一款付费工具，而且只能在Mac中使用，因此国内众多SASS爱好者，或者初学者也就无法体验CodeKit工具编译SASS项目。幸运的是，有一款国产图形工具Koala和CodeKit功能极其类似，支持多个平台，而且是开源的。 Koala Koala官网下载Koala Koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、li… Read More

原文：Moving along a curved path in CSS with layered animation 翻译：涂鸦码龙 译者注：部分代码示例在原文中可以看效果（作者写在博文里面了…），我偷懒把它做成Gif图了。 CSS 的 animations （动画） 和 transitions（变换）擅于实现从点 A 到点 B 的直线运动，运动轨迹是直线路径。给一个元素添加了 animation 或者 transition 以后，无论你如何调整贝塞尔曲线，都无法让它沿着弧形路径运动。你可以通过自定义 timing function 属性，做出弹动的效果，但是它沿着 X 和 Y 轴相对移动的值永远是相同的。 与其使用 JavaScript 实现外观自然的运动，… Read More

DEMO: 点击这里看效果 简要教程 这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效。SVG路径动画在网页设计中是一项热门的技术，它允许我们绘制各种简单、精美的图标和文字。关于使用SVG制作图标方面的知识，请参考阅读ESSENTIAL ICONS。 制作流程 先用一张gif图片来看看效果： 制作SVG 1、首先你要下载和安装一款矢量图形编辑器，推荐使用Inkscape。 2、打开Inkscape，创建一个新的文档。在文档的左上角创建你的文字。 3、使用选择工具选取你创建的文字。 4、在Path菜单中，选择Object –> Path。然后保存为SVG。 5、使用文本编辑器打开你刚才保存的… Read More

在很多时候，SVG是最容易在网页上做出文字特效的方法。现在SVG已经被所有的现代浏览器支持，包括IE9。要在页面上制作SVG文字，可以直接将SVG代码插入带页面中，SVG文字代码十分简单易懂。如下是一段SVG描边文字的代码： <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <text fill="#e96" style="font-size:60px; font-family: Futura Condensed ExtraBold, Arial Black, sans-serif; color: yellow;" stroke = "black" st… Read More

SVG的样式属性和CSS的语法非常接近，有时甚至是一样的，经常会照成一些使用上的混乱。 注意，我们在这里讨论的是用于SVG代码本身出现的规则，而不是SVG被嵌入网页后被附加上去的规则样式。然而，如果你想从CSS属性来了解SVG，比较他们的语法规则是一种有效果的方法。 SVG 等效的CSS fill background-color或color fill-opacity background-color或color设置rgba/hsla opacity opacity stroke border-color stroke-width border-thickness stroke-opacity border-color设置… Read More

SVG 入门教程系列列表： SVG 教程 （一） SVG 教程 （二）矩形 SVG 教程 （三）圆形，椭圆，直线 SVG 教程 （四）多边形，曲线，路径 SVG 教程 （五）文本，Stroke 属性，SVG 滤镜，SVG 模糊效果 SVG 教程 （六）SVG 阴影，SVG 渐变 – 线性，SVG 渐变- 放射性 SVG 教程 （七）SVG 实例，SVG 参考手册 更多参考： SVG动画入门 SVG动画入门（二） SVG技术入门：线条动画实现原理 如何使用CSS来修改SVG原点和制作SVG动画 纯CSS实现帅气的SVG路径描边动画效果 SVG矢量绘图 path路径详解（基本画法） SVG矢量绘图 path路径详解（贝塞尔曲线及平滑） Web流程图绘制使用raphael   本… Read More

出处：http://www.cnblogs.com/starof/p/5443445.html 一、最终效果 需求：gift图片的小动画每隔2s执行一次。 需求就一句话，我们看一下实现过程。 二、实现过程 1、网页结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { display: inline-block; background-color: #cc2222; text-decoration: none… Read More