本文目录
- CSS3都有哪些新特性呢
- css3的-webkit-animation动画执行后会变回原来的样子，怎么保留住动画最后的状态呢
- Web前端开发知识之CSS3概述
- css3使用animation让页面加载进来时图片从中心放大
- css3 animation 怎么用
- css3中的动画功能transition和animation两种的区别是什么
- CSS3animation动画为什么会出现抖动效果，怎么解决
- CSS3与CSS的区别有哪些
- css和css3的区别
- 用CSS3怎么实现盒阴影 box-shadow
CSS3都有哪些新特性呢
第 1 选择器
第 2 RGBA和透明度
第 3 多栏布局
第 4 多背景图
第 5 Word Wrap
第 6 文字阴影
第 7 @font-face属性
第 8 圆角(边框半径)
第 9 边框图片
第 10 盒阴影
第 11 盒子大小
第 12 媒体查询
第 13 语音
扩展资料:
工作原理
CSS3原理同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。
新增特性中transform的原理较为特殊，虽然使用位移函数translate()、缩放函数scale()、旋转函数rotate()和倾斜函数skew()可以简单地实现变形，但是变形中的矩阵函数都可以使用matrix()函数来代替。
新增特性
CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。
参考资料:百度百科-css3
css3的-webkit-animation动画执行后会变回原来的样子，怎么保留住动画最后的状态呢
保留住动画的最后状态2113，在animation后面加上forwards就可5261以了代码如下：4102
-webkit-animation{animations 1s ease 1 forwards}
注意：动画如果只执行一次，1653通过css无法办到，可以把动画结束时的样式写入一个class中，用js在动画结束时把class赋给这个对象。
扩展资料
CSS animation 与 CSS transition 有何区别
一、指代不同
1、animation ：属性是一个简写属性，用于设置六个动画属性。
2、transition：属性是一个简写属性，用于设置四个过渡属性。
二、特点不同
1、animation ：animation: name duration timing-function delay iteration-count direction，规定需要绑定到选择器的 keyframe 名称。规定完成动画所花费的时间，以秒或毫秒计。
2、transition：transition: property duration timing-function delay，规定设置过渡效果的 CSS 属性的名称。规定完成过渡效果需要多少秒或毫秒。
Web前端开发知识之CSS3概述
今天小编要跟大家分享的文章是关于Web前端开发知识之CSS3概述。真正从事web前端工作的小伙伴们来小编一起看一看吧，希望本篇文章能够对大家有所帮助。
CSS3概述
CSS3是CSS技术的升级。CSS3语言开发是朝着模块化发展的。此前CSS的规范作为一个模块而言过于庞大繁杂，因此，将其分解为一些较小的模块，并加入更多新的模块。其中，最重要的CSS3模块包括选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局及用户界面等。
相比于CSS2、1，CSS3做了许多修改和补充，新增了许多属性、选择器和特性等。例如，通过CSS3，用户无须使用PhotoShop等设计软件便能便捷地创建圆角边框，向矩形添加阴影，以及使用图片来绘制边框等。CS3包含多个新的背景属性，如“background-size”
和
“background-origin”，它们提供了对背景更强大的控制。字体方面，在CSS3之前，Web设计师必须使用已在用户计算机上安装好的字体。通过CSS3，用户可使用他们喜欢的任意字体。当用户找到或购买到希望使用的字体时，可将该字体文件存放到Web服务器上，它会在需要时被自动下载到用户的计算机上。用户自定义字体是在CSS3@font-face规则中定义的。
与CSS相比，使用CSS3最明显的优势就是CSS3能让页面看起来非常炫酷，使网站设计锦上添花，但它的好处远远不止这些。在大多数情况下，使用CSS3不仅有利于开发与维护，还能提高网站的性能。与此同时，还能增加网站的可访问性、可用性，使网站能适配更多的设备，甚至还可优化网站SEO，提高网站的搜索排名结果。
下面将介绍CSS3特有的优势：
①减少开发与维护成本
针对一个圆角效果，在CSS中需要添加额外的HTML标签，使用一个或者更多图片来完成，而使用CSS3只需要一个标签、一个“bonder-radius“属性就能完成。这样，CSS3技术能把用户从绘图、切图和优化图片的工作中解救出来。
如果后续需要调整这个圆角的弧度或者圆角的颜色，使用CSS，要从头绘图、切图才能完成，而使用CSS3几秒就可完成这些工作。
CSS3还能使开发人员远离繁杂的JavaSeript脚本代码或者Flash，用户不再需要花大量时间去写脚本，或者寻找合适的脚本插件，并修改以适配网站特效。
同时，有些CSS3技术还能帮用户对页面进行”减肥”，让结构更加“苗条”。避免为了达到一个效果而嵌套很多DIV和类名，这样能有效地提高工作效率、减少开发时间、降低开发成本。例如，制作一个重叠的背景效果，在CSS中需要添加DIV标签和类名，在不同的DIV中放一张背景图，现在可使用CSS3的多背景和背景尺寸等新特性，在一个DIV标签中完成这些工作。
②提高页面性能
很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”。换句话说，在进行Web开发时，减少多余的标签嵌套，以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。另外，更少的图片、脚本和Flash文件让Web站点减少HTTP请求数，这是提升页面加载速度的最佳方法之一。而使用CSS3制作图形化网站无须任何图片，极大地减少HTTP的请求数量，并且提升页面的加载速度。当然，这取决于采用CSS3特性来代替什么技术，以及如何使用CSS3特性。例如，CSS3的动画效果，能减少对JavaScript和Flash文件的HTTP请求，但可能要求浏览器执行很多的工作来完成这个动画效果的渲染，这有可能导致浏览器响应缓慢，致使用户流失。因此，在使用一些复杂的特效时，需要仔细考虑。不过这样的现象毕竟少数，总体而言，在大多数情况下很多CSS3技术都能
大幅提高页面的性能。
以上就是小编今天为大家分享的关于Web前端开发知识之CSS3概述的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的web前端工程师。
文章来源：原创凯哥的故事
css3使用animation让页面加载进来时图片从中心放大
这个简单,先讲一下原理
先设置图片垂直水平居中(position：absolute与translate3d 相结合) class为img
2.可以编写自定义animation 0的时候width为0，100%的时候width为你想要的宽度,高一样，其他的改设置的都设置一下 class为img active(这里是两个class) 来使用这个animation
3.在window.onload的事件下执行 只需给 img再加一个active的class就ok了
注意：我之前有在写自定义动画的时候在微信端执行不了动画，之后找到原因，给animation加一个延迟 100ms就行了 如果你遇到这种问题可以试试。
css3 animation 怎么用
首先，在css部分创建动画,使用@keyframes关键字创建动画如
《style》
#odiv{
width:200px;
height:200px;
position:absolute;
bakcground:#000;
/*接下来开始使用animation来连接动画*/
animation:abc 2s; -webkit-animation:abc 2s;
}//2s是动画时间可以自己设。
@keyframes abc{
from{
/*定义动画最初的状态*/
left:0px;
opacity:1;
}
to{
/*定义动画的结束状态*/
left:300px;
opacity:0;
}
} //abc 是动画名称
@-webkit-keyframes abc{
from{
left:0px;
opacity:1;
}
to{
left:300px;
opacity:0;
}
}//用webkit兼容谷歌和safari
《/style》
《body》
《div id=“odiv“》《/div》
《/body》
以上是CSS动画简单的使用
具体可以参考 w3school
希望对你有帮助，有什么不明白的可以问我
css3中的动画功能transition和animation两种的区别是什么
css中动画功能分为transition和animation两种，这个两种方法都可以通过改变css中的属性值来产生动画效果
transition：只能实现两个简单值之间的过渡
animation：通过引用keyframes关键帧来实现复杂动画。by三人行慕课
CSS3animation动画为什么会出现抖动效果，怎么解决
animation-fill-mode : forwards //设置对象状态为动画结束时的状态
animation-fill-mode
语法：
animation-fill-mode：none | forwards | backwards | both [ ,
none | forwards | backwards | both ]*
默认值：none
适用于：所有元素，包含伪对象:after和:before
继承性：无
取值：
none：
默认值。不设置对象动画之外的状态
forwards：
设置对象状态为动画结束时的状态
backwards：
设置对象状态为动画开始时的状态
both：
设置对象状态为动画结束或开始的状态
说明：
检索或设置对象动画时间之外的状态
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationFillMode。
这个是最简单的方法，
也可以侦听动画结束事件，给元素加个class类名，这个class定义的就是元素结束时的状态的css样式
CSS3与CSS的区别有哪些
一、指代不同
1、CSS3：是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。
2、CSS：是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
二、内容不同
1、CSS3：主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
2、CSS：不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
三、特点不同
1、CSS3：新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。
2、CSS： 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式的能力。
参考资料来源：百度百科-CSS
参考资料来源：百度百科-CSS3
css和css3的区别
CSS和CSS3都是样式，CSS3是在CSS上新增了样式属性。
CSS3新增特性
CSS3圆角边框：border-radius（解决了原有圆角边框需要截图的问题）
CSS3文本阴影与盒阴影：text-shadow、box-shadow（可以用于实现标签边框或阴影）
CSS3背景尺寸、背景切割和背景原点：background-clip background-origin background-size（移动端用于处理背景图适配问题）
CSS3变形 transform（二维变形以及三维特效）
CSS3动画 animation（实现复杂动画）
CSS3过渡 transition（实现简单动画）
CSS3 Media Query媒体查询（主要用于实现响应式布局）
用CSS3怎么实现盒阴影 box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
值 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
因此可以这样写：
div
{
box-shadow: 10px 10px 5px #888888;
}
