参考文章：http://www.webhek.com/7-new-css-units标记说明：数字上标为有疑惑的地方尽量做到在专有名字后面给出英文翻译，因为官方的文档基本上是英文的，经过各个读者的翻译后可能有所区别而产生歧义。 概述：em：相对于当前对象内文本的字体大小。相对于父节点的字体大小rem：相对于根元素<html>的字体大小。应用场景：以文字内容决定布局的。vh和vv：1vh等于1/100的视口高度①，1vw等于1/100的视口宽度。vmin和vmax：关于视口高...
前言动画使用示例https://github.com/AndyFlower/web-front/tree/master/css3/loading学习CSS3中Animation之前先来看一个动画特效（可以自己运行看下实际效果） 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Title</title> 6<style type="text/css"> 7 .spinner{ 8 width:60px; 9 height: 60px;10 background-color: #67CF22;11 margin: 100p...
1、css3中应用了伪类 ：hover，鼠标位于a之上时，绝对定位下拉列表和宽度。但是没有定义left和top，列表会显示在标签a的下方。目前测试除了ie8，其他浏览器都没问题。2、伪元素::before和::after，表示在某个元素之前之后插入内容{content:"",transform:,}等3、计数器。http://www.w3cplus.com/css3/css-counters.html父元素中：counter-reset:计数器名 [起始值]子元素{counter-increment:计数器名 [增长速度] &：before{content:"...
css3的动画支持大多数浏览器，但最好还是加-webkit-animation等属性IE9以及以前的版本并不支持。animation属性是一个简写属性，用于设置六个动画的属性;animation-name 动画名称(自己取的名称)animation-duration 动画持续时间(这个必须要写，否则显示不出效果) animation-timing-function 动画的速度曲线，默认是"ease"animation-delay 动画何时开始，默认0.（这个需...
本文实例讲述了基于css3的属性transition制作菜单导航效果。分享给大家供大家参考。具体如下：CSS3导航菜单，当你运动层在显示层下面时，transition会使页面产生闪动，原因是Chrome在初始渲染CSS动画时产生的Bug，虽然暂时无法考证这个问题的根本原因，但是目前已知的解决方案有两条： -webkit-backface-visibility: hidden;（设置进行转换的元素的背面在面对用户时是否可见：隐藏） -webkit-transform-style: preserve-3d; （设置...
该效果的主要实现思路是给文字添加渐变的背景，然后对背景进行裁剪，按文字裁剪（目前只有webkit内核浏览器支持该属性），最后给背景添加动画，即改变背景的位置，背景动画效果如下（GIF录制时有卡顿，代码实现时不卡）：最终效果：全部代码如下：<!DOCTYPE html><html><head><style>p{width:50%;margin:0 auto;line-height:50px; font-size:50px; text-align:center;-webkit-background-clip: text;/*按文字裁剪*/ -webkit...
Atitti css3 新特性attilax总结 图片发光效果2透明渐变效果2文字描边2背景拉伸2 CSS3 选择器（Selector）4@Font-face 特性7Word-wrap & Text-overflow 样式9Word-wrap9Text-overflow10文字渲染（Text-decoration） 描边12CSS3 的多列布局（multi-column layout）13边框和颜色（color, border）14CSS3 的渐变效果（Gradient）15线性渐变15径向渐变16CSS3 的阴影（Shadow）和反射（Reflect）效果19CSS3 的背景效果21CSS3 的盒子模...
1、什么是媒体查询媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。 2、为什么响应式设计需要，媒体查询如果没有CSS3的媒体查询模块，就不能针对设备特...
CSS 3 现状 兼容性差，需添加私有前缀／移动端优于PC端／不断改进中／渐进增强原则／考虑用户群体／遵照产品的方案 ； CSS3手册 需要阅读其--阅读及使用指引[]表示全部的可选项 || 或者 | 表示 多选一 ? 表示 0个或1个* 表示 0个或多个{}表示范围 {A}代表出现A次 ，{A,B}代表出现A次以上B次以下 ，B可以省略，{A,} 代表至少出现A次，无上限# 出现1次以上，以逗号隔开，可以选择后面跟大括号的方式精确表示重复次数：...
前言
我们在手机上布局一般是这个样子的：其中头部对整个mobile的设计至关重要，而且坑也很多：① 一般来说整个header是以fixed布局，fixed这个产物在移动端来说本身坑就非常多② 在Hybrid应用中，Header很多时候扮演了不一样的角色，首先要完成以webview(window)为容器的功能，又要调用native提供的接口Hybrid中Header的实现往往是一个难点，主要原因是同一套接口，要保证H5站点与native处于不一样的环境调用相同的接口，完成不同...
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果大家好，我是小强老师。 今天我们看下CSS3最为简单的两个属性。 css3给我们带来了很多视觉的感受和变化，以前的图片做的事情，很多代码都能实现。 下面给大家简单介绍两种最为常见的圆角边框和盒子阴影，同时附上一个iphone 手机效果，提供大家练习。1.border-radius 圆角矩形 语法格式： border-radius: 水平半径/垂直半径 只不过我们平时都把后面的这个垂直半...
很多时候我们用到三角形这个效果： 我们可以用CSS3实现这个效果，怎去做呢？先阐述一下原理，我们定义一个空的div，设置这个div宽高为0，给这个div加上一个100px边框（这里是方便观察），得到的是一个正方形，颜色和定义边框的颜色相同，我们看到正方形其实是这个div边框。<div id="d1"></div>style：#d1{width:0; height:0; border:100px solid red;}实现效果：那么这个元素现在对应的每个边框是什么样子的呢？我们来看：对应代...
效果图演示，源代码 原文：http://www.cnblogs.com/wangyongx/p/5022550.html
今天大家在浏览B站，腾讯视频，等网站时，有没有发现一个现象，网站变成灰色的了。
是不是跟平常不一样了呢，这是因为今天（2020.4.4）是全国哀悼日，
所以网站这些就变成灰色的呢。我去看了一下腾讯的做法，腾讯是将所有的图片换成了灰色的。
我觉得的缺点是：如果网站非要展示大量图片，不可能每一张图，
都替换成灰色的图片吧！这样可能要把美工累成啥XX那么B站是如何做的呢？
B站是通过，css3的属性去控制的，
首先找到 html. ...
transform
（变形）包括：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrixtransition主要包含四个属性值：transform: rotate | scale | skew | translate |matrix;transform:rotate(45deg);围绕中心旋转角度transform-origin：left top 修改旋转中心（默认就是中心点） {left
top right bottom}transform:translate(x,y) 位移距离 translateX(x)
translateY(y){三种位移方式}transform:scale(x,y) 缩放大小...
