第一次写博客，只是单纯的想把我自己的一些心得和使用过的css3的animation的一些方法记录和总结，方便下次使用，我写的这些都是刚入门适合做一些简单的动画动作，过于复杂的还有待发掘或者使用别的方法实现。 那么先简单说说animation的使用方法： animation的语法就是...

2018-06-24 01:22:50

圆角边框以及阴影制作卡片式图片 圆角边框 border-radius 卡片使用阴影 box-shadow 利用阴影给图片底部创造一个长方形 内部的元素会直接覆盖整个阴影 HTML 部分 ! DOCTYPE HTML html head meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" title...

2018-06-24 01:23:04

查看效果： http://hovertree.com/texiao/css3/43/ 代码如下： ! DOCTYPE html html head meta charset ="UTF-8" title css3 loading等待加载代码 - 何问起 / title style @keyframes move { from { transform : translate(0,50%) ; } to { transform : translate(0,85...

2018-06-24 01:23:09

六、垂直居中-父元素高度确定的单行文本 1 ! DOCTYPE HTML 2 html 3 head 4 meta charset ="utf-8" 5 title 垂直居中 / title 6 style 7 8 .wrap h2 { 9 margin : 0 ; 10 height : 100px ; 11 12 background : #ccc ; 13 } 14 / style 15 / head 16 17 body 18 19 !--...

2018-06-24 01:23:01

Base64 is a group of similarbinary-to-text encodingschemes that representbinary datain anASCIIstring format by translating it into aradix-64 representation. Base64是一种用64个可打印字符来表示任意二进制数据的方法，不能用于加密。 为什么使用Base64格式...

2018-06-24 01:22:47

关于表格宽度的渲染规则 表格单元格宽度的计算方式主要分为两种方式： 固定表格布局、自动表格布局， 这个经常写css的人应该还是知道的，但是我们经常会发现给表格列定了宽度不起作用，又或是没有定宽度渲染出来的却是正常的吗，下面就来介绍下这两个方式具体是怎么计...

2018-06-24 01:22:31

做为css布局的又一种新方式，Flex拥有极强的使用效果，相比原来的float，position对元素样式的操作更加简洁，本文是我的一点学习经验和心得吧，如有错误以及不足之处，请多多指点。 好进入正题吧，首先借用阮一峰大神的一副图片： 再来说说flex的几个属性吧： 一、容器...

2018-06-24 01:22:16

前言 通常我们所做的一些页面，我们可以从设计图里面看出有一些地方是相同的。例如：头部，底部，侧边栏等等。如果是制作静态页面的同学，对于这些重复的部分只能够通过复制粘贴到新的页面来，如果页面的数量上去了而中途公共的部分出现要修的地方。不过有上10个页面都...

2018-06-24 01:22:44

定义： CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。 通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编...

2018-06-24 01:22:37

js部分 /*加入购物车*/ function loadCar(){ var carData = JSON.parse(getCar()); if(carData){ var carUl = document.getElementById("carUl"); for(var i=0;icarData.length;i++){ /*增加li*/ var li = document.createElement("li"); li.setAttribute("data-id",ca...

2018-06-24 01:22:10