css3动画 | 易学教程

[CSS]CSS3新增属性

阅读更多关于 [CSS]CSS3新增属性

1.CSS3边框： border-radius： CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid; box-shadow： CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888; border-image： CSS3边框图片。通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url(border.png) 30 30 round; 2.CSS3背景： **background-size： ** 规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。 background-origin ：规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。 3.CSS3文字效果： text-shadow：在

css3 3D动画 200303

阅读更多关于 css3 3D动画 200303

3D效果 3D位移 3D旋转 3D缩放 3D Transform转换属性旋转基点呈现3D效果透视呈现3D的效果必需这样写定义在父容器上背面是否可见关键帧动画 timing-funcgion 注释错误连写演示代码在容器上定义动画名称通过Keyframes 定义一个动画过程来源： CSDN 作者： ifubing 链接： https://blog.csdn.net/ifubing/article/details/104638179

[css3动画]渐隐渐现

阅读更多关于 [css3动画]渐隐渐现

/*--> */ /*--> */ 测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .anim-opacity2{animation: 2s opacity2 0s infinite; -webkit-animation: 2s opacity2 0s infinite;-moz-animation: 2s opacity2 0s infinite;} @keyframes opacity2{ 0%{opacity:0} 50%{opacity:.8;} 100%{opacity:0;} } @-webkit-keyframes opacity2{ 0%{opacity:0} 50%{opacity:.8;} 100%{opacity:0;} } @-moz-keyframes opacity2{ 0%{opacity:0} 50%{opacity:.8;} 100%{opacity:0;} } </style> </head> <body> <h1 class="anim-opacity2">测试</h1> </body> </html> 来源： https://www.cnblogs.com/iloveyou-sky/p/5944858.html

CSS工具（Autoprefixer、CSScomb、CSS3 Pie、CSS3 Maker）

阅读更多关于 CSS工具（Autoprefixer、CSScomb、CSS3 Pie、CSS3 Maker）

##### Autoprefixer ：一个以最好的方式处理浏览器前缀的后处理程序。安装grunt-autoprefixer插件 npm install grunt-cli grunt-contrib-watch grunt-autoprefixer Gruntfile.js module.exports = function (grunt) { grunt .initConfig ({ autoprefixer : { dist : { files : { 'build/style.css' : 'style.css' } } }, watch : { styles : { files : ['style.css' ], tasks : ['autoprefixer' ] } } }); grunt.loadNpmTasks('grunt-autoprefixer' ); grunt.loadNpmTasks('grunt-contrib-watch' );}; 启用Grunt的Watch功能 ./node_modules/.bin/grunt watch ##### CSScomb ：CSS属性排序工具 ##### CSS3 Pie ：可以让IE6至IE8版本实现大多数的CSS3修饰特性，如圆角、阴影、渐变等。 ##### CSS3 Click Chart :

HTML5和CSS3重点知识汇总

阅读更多关于 HTML5和CSS3重点知识汇总

HTML5 1、什么是H5： HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。设计目的是为了在移动设备上支持多媒体。 2、新增特性：绘画<canvas>；多媒体播放<video><audio>；本地离线存储；特殊内容元素<article><header><nav><footer>；表单控件<calendar><date><email>等 3、最小的HTML5文档 <!DOCTYPE html>  <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> 文档内容...... </body> </html> 4、支持：最新版Safari,Chrome,Firefox,Opera支持，IE9支持 5、自定义标签：首先在html标签通过xmlns:命名空间名来指定；其次可以使用这个标签写内容（通常命名采用-连接方式）；最后，在样式里使用命名空间名\:标签名{}定义 <!DOCTYPE html> <html xmlns:ownhtml> <head> <meta charset="UTF-8"> <title>Document</title> <style> //2、这里如果有多个标签，都是从ownhtml创建的

css3动画属性有哪些

阅读更多关于 css3动画属性有哪些

transition ：平衡过渡 transition是一种css里的一种过渡效果，完成过渡需要多少秒。延迟几秒开始，过渡的速度（一般有 "linear 匀速" 和“ease 先慢后快再慢结束”及“cubic-bezier( n , n , n , n ) 自己定义的值，可能的值是 0 至 1 之间的数值”等）一般transition通过鼠标事件触发，如（hover）产生动画效果 animation：动画 animation 一般通过@keyframes 规则，创建动画。 animation通过关键帧的名称开始的时间动画的速度（和上一致外还有一个step-end逐帧播放）是否重复播放（infinite）进行根据需求进行修改即可 animation一般通过@keframes关键帧的规则来创建动画，可以通过关键字"from"和“to”,或者通过自己定义的百分比进行动画 0%是开始100%是结束一般在关键帧要进行多个动画效果一般使用百分比 0%和100%之间可以根据自己的要求在分成20%，40%，60%或在细分等 transform：改变元素的大小、位置 translate：移动 translate（x,y）定义2D空间 translate（x,y,z）定义3D空间这个的移动值可以使用像素px支持负值 scale：放大 scale（数值）定义图片放几倍大

浅谈css3动画属性

阅读更多关于浅谈css3动画属性

css3动画通过animation来实现，css3动画不需要事件的触发，只需要调用关键帧即可。因此，制定好关键帧是实现动画的关键步骤。制定关键帧方法一：from内一般写入动画的初始状态，to写入动画的结束状态。 @keyframes 关键帧名字{ from{ } to{ } } 方法二：百分比形式表示动画的状态，0%表示动画初始状态，100%表示动画结束状态。 @keyframes 关键帧名字{ 0%{ } 25%{ } 75%{ } 100%{ } } animation动画属性 1.animation-name 关键帧的名字 2.animation-duration 动画的持续时间 3.animation-timing-function 动画的类型（匀速运动加速运动贝塞尔曲线等等） 4.animation-delay 动画延迟 5.animation-iteration-count 动画运动次数（默认为一次，属性值infinite为无限循环） 6.animation-direction 动画运动方向（默认正向运动）属性值：（1）reverse 反向运动（2）alternate 先正向后反向再正向后反向……（一直循环）（3）alternate-reverse 先反向后正向 7.animation-play-state 动画正在运行还是暂停属性值：（1

css3中的动画属性

阅读更多关于 css3中的动画属性

css3中的动画属性----animation 1.运用animation，不需要事件触发，调用关键帧即可； 2.制定关键帧第一种：@keyframes 关键帧名称 { from{ left：px；top：px； } to{ left：px；top：px； } } 这种方法制定的关键帧只能实现从左到右或者从上到下，所以并不能满足所有需求；第二种：@keyframes 关键帧名称 { 0%{ left：px；top：px； } 25%{ left：px；top：px； } 50%{ left：px；top：px； } 75%{ left：px；top：px； } 100%{ left：px；top：px； } } 可以根据自己的需求进行划分，不一定是划分为四等分；所以第二种也较为常用； 3.animation的复合属性 animation-name ：关键帧的名称（与@keyframes配合使用）；例如：animation-name：rotateBox； @keyframes rotateBox{ } animation-duration ：动画持续的时间；例如：animation 1s；（1次动画在1s内完成） animation-timing-function ：动画的运用类型； step-start 逐帧动画（马上跳到每一帧动画结束的状态） linear 匀速 easa

css3的动画效果

阅读更多关于 css3的动画效果

全新的css3加入的动画效果： [ animation-name ]：检索或设置对象所应用的动画名称 [ animation-duration ]：检索或设置对象动画的持续时间 [ animation-timing-function ] ：检索或设置对象动画的过渡类型 [ animation-delay ]：检索或设置对象动画延迟的时间 [ animation-iteration-count ]：检索或设置对象动画的循环次数 [ animation-direction ]：检索或设置对象动画在循环中是否反向运动 [ animation-play-state ]：检索或设置对象动画的状态。来源： https://www.cnblogs.com/wenshengya/p/7074081.html

css3多行省略号

阅读更多关于 css3多行省略号

-webkit-line-clamp 概述： -webkit-line-clamp 是一个不规范的属性（ unsupported WebKit property ），它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。 text-overflow ，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本。语法： -webkit-line-clamp ： <number> 默认值： ? ?表示不清楚；适用于：块元素继承性：无动画性：否计算值：指定的值取值： <number> ：块元素显示的文本的行数。 * CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新兼容性：支持版本 \类型 IE Firefox Safari Chrome Opera 桌面 no no yes yes yes(webkit) 移动端 no no yes yes ? <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title

订阅 css3动画