随笔分类 - HTML/CSS
摘要：CSS动画非常的有趣；这种技术的美就在于，通过使用很多简单的属性，你能创建出漂亮的消隐效果。其中代表性的一种就是CSS图片翻转效果，能让你看到一张卡片的正反两面上的内容。本文就是要用最简单的方法向大家介绍如何创建这种效果。 网上有很多其它的教材，但里面添加了很多多余的代码样式，需要读者去分清哪些是必
阅读全文
摘要：需求分析，根据当前网页中的几张图片，在手机上长按，保存图片到相册或者发送给好友。 调用方式： 注：上面的调用是使用的vue语法。 可参考地址： 利用canvas，把多张图合并成一张图片 基于html2canvas实现网页保存为图片及图片清晰度优化 canvas导出为图片并用JS下载 js截图及绕过服
阅读全文
摘要：识别规则 这里采用的逻辑是截屏识别，当客户端发现用户在网页的img标签内进行长按操作时，会立刻截屏并且启动二维码识别算法。所以这里用于二维码识别的图片是截屏，而不是之前有人提到的img标签中的图片。 为什么要用截屏，这也是一个开发时候的思考。客户端截屏时候，可以不用考虑网络传输等因素，最快的得到识别
阅读全文
摘要：简介 前面写了一篇文章讲解了position常用的几个属性：《CSS 属性之 position讲解》一般都知道下面几个常用的： 在https://developer.mozilla.org/zh-CN/docs/Web/CSS/position还说了下面这三个值： 估计大部分都没有用过positio
阅读全文
摘要：在原来有一篇文章写到了《CSS效果篇--纯CSS+HTML实现checkbox的思路与实例》。 今天这篇文章主要写各种自定义的checkbox复选框，实现如图所示的复选框： 大致的html代码都如下所示： <div class="ondisplay"> <section title=".slideO
阅读全文
摘要：使用语法 首先我们先来看一个例子：html代码： css代码： 实现效果： 结果是该DOM元素背景变成了黑色。 CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示我们的变量名称。关于命名这个东西，各种语言都有些显示，例如CSS选择器不能是数字开头，JS中的变量是不能直
阅读全文
摘要：什么是calc()? calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等
阅读全文
摘要：什么是hasLayout？ hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和
阅读全文
摘要：前言 首先第一步，先布局html代码如下： 上面一看第一个图片img 就是实现图片模糊效果的DOM元素，text-gradient实现的是流彩文字效果的DOM元素，border实现的是边框伸展效果的DOM元素 想一想样式该咋写呢，根据这个布局，我们先来实现图片模糊效果。 图片模糊效果 图片模糊效果要
阅读全文
摘要：最近翻了一下关于移动端的rem的使用，怎样最方便。在读到流云诸葛的一篇关于《从网易与淘宝的font-size思考前端设计稿与工作流》的文章后，来总结一下。 然而根据我以往做移动端web项目的时候，设计稿一般是640或者750的，我一般会在head里面这样写： <meta name="viewport
阅读全文
摘要：中文地址：http://www.cnblogs.com/rubylouvre/p/3471490.html 原文地址：http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css
阅读全文
摘要：Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 语法 transform ： none | <transform-function> [ <transfor
阅读全文
摘要：一：动画(animation)的参数详解 由于上面用到了animation动画，这里详细介绍下这个animation的参数。 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。Animations的很多方面
阅读全文
摘要：如图实现这样的效果： html代码如下： css样式代码：
阅读全文
摘要：checkbox应该是一个比较常用的html功能了，不过浏览器自带的checkbox往往样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，checkbox的自定义就被提出来了。这里对实现方法做个总结。 实现思路 纯css实现的主要手段是利用label标签的模拟功能。label
阅读全文
摘要：语法 必需。动画时长的百分比。 合法的值： 0-100% from（与 0% 相同） to（与 100% 相同） 定义和用法 通过 @keyframes 规则，您能够创建动画。 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中，您能够多次改变这套 CSS 样式。 以百分比来
阅读全文
摘要：简介 贝塞尔曲线是可以做出很多复杂的效果来的，比如弹跳球的复杂动画效果，首先加速下降，停止，然后弹起时逐渐减速的效果。 使用贝塞尔曲线常用的两个网址如下： 缓动函数：http://www.xuanfengge.com/easeing/easeing/ cubic-bezier：http://cubi
阅读全文
摘要：W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。” transition主要包含四个属性值：执行变换的属性：t
阅读全文
摘要：实现效果 如图所示： 首先得准备三张图，一张是浅黄色的背景图loading_bg.png，一张是深红色的图loading.png，最后一张为bolang.png。 css代码 html代码
阅读全文
摘要：1.所有的标记都必须要有一个相应的结束标记 以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。 2.所有标签的元
阅读全文
浙公网安备 33010602011771号