css3动画

CSS 引入的方式有哪些? link 和@import 的区别是? 答：内联 内嵌 外链 导入 区别 ：同时加载 前者无兼容性，后者 CSS2.1 以下浏览器不支持 Link 支持使用 javascript 改变样式，后者不可 CSS3 新特性有哪些？ 答：1. 颜色：新增 RGBA，HSLA 模式 2. 文字阴影（text-shadow、） 3.边框： 圆角（border-radius）边框阴影： box-shadow 4. 盒子模型：box-sizing 5.背景：background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点 background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局 .渐变：linear-gradient、radial-gradient 7. 过渡：transition，可实现动画 8. 自定义动画 9. 在 CSS3 中唯一引入的伪元素是 ：：selection. 10. 媒体查询，多栏布局 11. border-image 12.2D 转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y) 13. 3D 转换 来源： https://www.cnblogs.com/pangwl/p/8024688.html

css3新特性： 1.css3重要模块： 1.1选择器 1.2盒模型 1.3背景和边框 1.4文字特效 1.5 2D/3D转换 1.6动画 1.7多列布局 1.8用户界面 css3可继承的属性： 字体：font，font-size，font-weight，font-family，font-style，font-variant， 颜色：color。 列表：list-style，list-style-type，list-style-position，list-style-image. 文字：letter-spacing，word-spacing，white-space，line-height，text-decoration，text-transform，text-indent，text-align。 所有元素可继承：visibility和cursor。 2.css3边框 2.1 border-radius//圆角 <div>border-radius</div> div{ border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:30px; border-radius:25px; -webkit-border-radius:25px; -ms-border-radius:25px; -o-border

1.前言 css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但是很难用得好，用得顺手，最近我也在过一遍css3的一些新特性（不是全部，是我在工作上常用的，或者觉得有用的），以及一些实例，就写了这一篇总结！希望，这篇文章能帮到大家认识css3。写这篇文章主要是让大家能了解css3的一些新特性，以及基础的用法，感觉css3的魅力！如果想要用好css3，这个得靠大家继续努力学习，寻找一些讲得更深入的文章或者书籍了！如果大家有什么其他特性推荐的，欢迎补充！大家一起学习，进步！ 看这篇文章，代码可以不用看得过于仔细！这里主要是想让大家了解css3的新特性！代码也是很基础的用法。我给出代码主要是让大家在浏览器运行一下，让大家参考和调试。不要只看代码，只看代码的话，不会知道哪个代码有什么作用的，建议边看效果边看代码。 2.过渡 过渡，是我在项目里面用得最多的一个特性了！也相信是很多人用得最多的一个例子！我平常使用就是想让一些交互效果（主要是hover动画），变得生动一些，不会显得那么生硬！好了，下面进入正文！ 引用菜鸟教程的说法：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。 2-1语法

1. 元字符使用： []: 全部可选项 ||：并列 |：多选一 ?: 0个或者一个 *：0个或者多个 {}: 范围 2.CSS3属性选择器： E[attr]： 存在 attr属性即可； E[attr=val]：属性值完全等于val E[attr*=val]： 属性值里包含 val字符并且在“任意”位置 E[attr^=val]： 属性值里包含 val字符并且在“开始”位置 E[attr$=val]： 属性值里包含 val字符并且在“结束”位置 3.CSS3伪类选择器： P:first-child：P元素的 父元素的第 1个子元素（第一个元素必须是p标签，否则无效） P:last-child： 其父元素的最后 1个子元素 P:nth-child(n): 其父元素的第 n个子元素（n遵循线性变化，其取值0、1、2、3、4...） P:nth-last-child(n): 其父元素的第 n个子元素（倒着数） 4.伪类： E:empty ：空伪类； 选中没有任何子节点的 E元素；（使用不是非常广泛） E:target ：目标伪类；结合锚点进行使用，处于当前锚点的元素会被选中； E:not(selector) ：排除伪类； 除 selector（任意选择器）外的元素会被选中； 5.伪元素： 1、E::first-letter文本的第一个单词或字（如中文、日文、韩文等） 2、E::first

CSS3总结 1. 简介 1.1 现状 浏览器的支持程度差，需要添加私有前缀 移动端支持优先于pc端 不断改进中 应用相对广泛 1.2 如何对待 坚持渐进增强 考虑用户群体 遵照产品的方案 听boss的！ 2. 基础知识 2.1 选择器 属性选择器 1. [attr] : 表示存在attr属性即可(属性没有赋值都没有关系) 2. [attr=val] : 表示属性值完全等于val 3. [attr^=val] : 表示属性值以val开头 4. [attr*=val] : 表示属性值在任意位置含有val字符 5. [attr$=val] : 表示属性值以val结尾 伪类选择器: :link, :active, :visited, :hover 以某元素相对于其父元素或兄弟元素的位置来获取元素的结构伪类 E:first-child E的父元素的所有子元素中的第一个子元素为E的元素被选中 E:last-child E的父元素的所有子元素中最后一个子元素为E的元素被选中 E:nth-child(n) 第n个子元素: n的取值为从0开始计算,但子元素的序号是从1开始计算(索引<=0时,选取无效) E:nth-last-child(n) 倒数第n个元素 E:empty 选中没有任何子节点的E元素 目标伪类 : E:target 结合锚点使用,处于当前锚点的元素会被选中 排除伪类 : .test

1.CSS3边框 border-radius:创建圆角边框 border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ box-shadow:边框阴影，方向为x，y，z -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */ box-shadow: 10px 10px 5px #888888; border-image:边框图片，IE不支持 2.CSS3背景 background-size:规定背景图片的尺寸，宽、高 background:url(/i/bg_flower.gif); background-size:63px 100px; -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-repeat:no-repeat; background-origin 属性规定背景图片的定位区域。 背景图片可以放置于 content-box、padding-box 或 border-box 区域。 background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit

CSS3 边框： border-radius（倒圆角） box-shadow （盒子阴影） border-image （边界图片） CSS3 背景： background-size（属性规定背景图片的尺寸。） background-origin（属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域） CSS3 文本效果： text-shadow（可向文本应用阴影，可以设置水平阴影、垂直阴影、模糊距离，以及阴影的颜色） word-wrap（word-wrap 属性允许您允许文本 强制文本进行换行 - 即使这意味着会对单词进行拆分） CSS3 字体： @font-face 在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。 如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)： <style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div { 　　font-family:myFirstFont; } <

此片文章是CSS3学习，如果要学习CSS基础，点击 CSS基础入门学习笔记 目录 ： 新增选择器 属性选择器 结构伪类选择器 兄弟伪类 目标伪类 伪元素选择器 盒模型 颜色 RGBA HSLA 渐变 线性渐变 径向渐变 重复渐变 边框 边框圆角 边框阴影 边框图片 背景 背景属性 背景缩放 多背景 过渡 transform2D transform3D 透规(pespective) backface-visibility 动画animation Flex伸缩布局(CSS3) 容器的属性 项目的属性 参考手册解读指南： [] 表示可选项 | 表示或者 || 表示多选一 ？ 0个或1个 *表示0个或多个 {} 表示范围 新增选择器 属性选择器 选取标签带 有某些特殊属性 的选择器 /* 获取到拥有该属性的元素 */ div[class^=font] { /* class^=font 表示 font 开始位置就行了 */ color : pink ; } div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */ color : skyblue ; } div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */ color : green ; } 结构伪类选择器 结构伪类选择器 功能描述

前端点滴（CSS3）----倾尽所有 css3选择器 css3盒子模型 CSS3 弹性盒子内容 css3背景和边框 css3背景 css3边框 css3渐变 css3 文本效果/字体 css3 文本效果 css3 2D/3D转换（transform） 2D转换 3D转换 css3动画与过度 css3动画 css3过渡 css3多列布局 css3用户界面 css3图片 css3按钮 css3 分页 css3多媒体查询 css3选择器 相比于css，css3增设了许多css伪类选择器 具体如下： 选择器 例子 说明 css element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 3 [attribute^=value] a[src^=“https”] （条件选择器）选择其 src 属性值以 “https” 开头的每个 <a> 元素。 3 [attribute$=value] a[src$=".pdf"] （条件选择器）选择其 src 属性以 “.pdf” 结尾的所有 <a> 元素。 3 [attribute*=value] a[src*=“abc”] （条件选择器）选择其 src 属性中包含 “abc” 子串的每个 <a> 元素。 3 :first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p>

这篇文章主要分析css3新特性的典型应用，都是干活，没得水分。 　　　　1.动画属性：animation。 　　　　利用animation可以实现元素的动画效果，他是一个简写属性，用于设置6个动画属性：amination-name（名字)/duration（持续时间）/delay（延迟时间）/timing-function(速度曲线)/iteration-count（播放次数）/direction(是否轮流反向播放动画)。 animation: name duration timing-function delay iteration-count direction; animation-delay - 设置延时，也即从元素加载完成之后到动画序列开始执行的时间。 animation-direction - 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。 允许值：normal(正常顺序), alternate, reverse（反向播放）, alternate-reverse 默认值：normal normal：动画循环播放时，从结束状态跳回到起始状态 浏览器对其他值的支持情况不佳，应该慎用。 animation-duration - 设置动画一个周期的时长。 animation-iteration-count - 设置动画重复次数