css3被拆分成如下的小模块,选择器,盒模型,背景和边框,文字特效,2D/3D转换,动画,多列布局和用户界面

2D转换

使用transform:属性来为元素设置2D转换,兼容浏览器加前缀 –webkit-  -moz-

使用rotate()方法,让元素旋转一定的角度,参数:角度

例如:transform:rotate(30deg); deg是角度的单位

使用translate()方法,让元素位移,参数:x轴 ,y轴

例如:transform:translate(10px,10px);

使用scale()方法,改变元素的比例大小,参数:x轴比例,y轴比例

例如:transform:scale(2,2);

使用skew()方法,拉伸元素,参数:x轴角度,y轴角度

例如:transform:skew(20deg,20deg);

使用matrix()方法,多变换结合,参数:矩阵,我看不懂

3D转换

使用rotateX()和rotateY()方法,对元素进行旋转,浏览器很多都不支持,参数:角度

过渡效果

使用transition:属性为元素设置过渡动画效果,兼容浏览器加前缀 –webkit-  -moz-,必须是样式在被修改的时候才会生效,因此在:hover的时候修改元素的样式,可以看到效果

使用transition:属性,参数:css样式 持续时间

例如:transition:width 2s;

参数中使用逗号分隔多项改变,transition:样式 时间,样式2 时间2,。。。

动画

创建动画@keyframes规则,@keyframes 规则名称{}

内容里面,使用百分比来划分动画的进度,变化样式

0%{  一些样式  }

25%{  一些样式  }

50%{  一些样式  }

75%{         一些样式         }

100%{  一些样式  }

使用animation:属性设置动画规则,参数:规则名称,执行时间,速度曲线,延迟时间,播放次数,循环播放

例如: animation:bitch 2s ease 0s infinite;

@keyframes bitch{
0%{
opacity:;
}
50%{
opacity:;
}
100%{
opacity:;
}
}
#test{
width: 100px;
height: 100px;
background: red;
animation:bitch 2s ease 0s infinite;
}

[css] css3 中的新特性加强记忆的更多相关文章

  1. CSS3中的新特性

    一.CSS3新属性 CSS3还不属于W3C标准,所以不同浏览器的支持程度也不相同,对于不同浏览器,写法也不同,不同内核的浏览器要加不同的前缀,如下: transform:rotate(9deg); - ...

  2. css3中的新特性经典应用

    这篇文章主要分析css3新特性的典型应用,都是干活,没得水分. 1.动画属性:animation. 利用animation可以实现元素的动画效果,他是一个简写属性,用于设置6个动画属性:aminati ...

  3. 02. css3有哪些新特性?

    2.css3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(t ...

  4. HTML 5中的新特性

    HTML 5中的新特性 html5新增了一些语义化更好的标签元素.首先,让我们来了解一下HTML语义化. 1.什么是HTML语义化? 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开 ...

  5. ASP.NET 5与MVC 6中的新特性

    差点忘了提一句,MVC 6中默认的渲染引擎Razor也将得到更新,以支持C# 6中的新语法.而Razor中的新特性还不只这一点. 在某些情况下,直接在Web页面中嵌入某些JSON数据的方式可能比向服务 ...

  6. Webpack 3 中的新特性

    本文简短地分享下最新发布的 Webpack 3 中的新特性,供大家参考. 1. Webpack 3 的新特性 6 月 20 日,Webpack 发布了最新的 3.0 版本,并在 Medium 发布了公 ...

  7. 使用示例带你提前了解 Java 9 中的新特性

    使用示例带你提前了解 Java 9 中的新特性 转载来源:https://juejin.im/post/58c5e402128fe100603cc194 英文出处:https://www.journa ...

  8. (数据科学学习手札73)盘点pandas 1.0.0中的新特性

    本文对应脚本及数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 毫无疑问pandas已经成为基于Pytho ...

  9. 1 PHP 5.3中的新特性

    1 PHP 5.3中的新特性 1.1 支持命名空间 (Namespace) 毫无疑问,命名空间是PHP5.3所带来的最重要的新特性. 在PHP5.3中,则只需要指定不同的命名空间即可,命名空间的分隔符 ...

随机推荐

  1. JavaScript基础视频教程总结(041-050章)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. IPv6技术详解:基本概念、应用现状、技术实践(上篇)

    本文来自微信技术架构部的原创技术分享. 1.前言 普及IPV6喊了多少年了,连苹果的APP上架App Store也早已强制IPV6的支持,然并卵,因为历史遗留问题,即使在IPV4地址如果饥荒的情况下, ...

  3. InnoDB体系架构(二)内存

    InnoDB体系架构(二)内存 上篇文章 InnoDB体系架构(一)后台线程 介绍了MySQL InnoDB存储引擎后台线程:Master Thread.IO Thread.Purge Thread. ...

  4. Using SQLite database in your Windows 10 apps

    MVP可以在channel 9上传视频了,所以准备做个英文视频传上去分享给大家,本文做稿子. Hello everyone, As we all know, SQLite is a great and ...

  5. Xamarin.Android 无法检索到 Resource 问题

    错误提示:当前上下文中不存在名称"Resource" 解决方法: 1.看是否有其他错误,如果有其他错误优先解决.(其他错误导致无法感知到Resource) 2.重新生成解决方案.( ...

  6. 如何开始DDD

    在开始DDD之前,你需要了解DDD的一些基础知识,聚合(AggregateRoot).实体(Entity).值对象(ValueObject),工厂(Factory),仓储(Repository)和领域 ...

  7. Python3自动化运维之Fabric模版详解

    一.概要 Fabric是基于Python(2.7,3.4+以上版本)实现的SSH命令行工具,简化了SSH的应用程序部署及系统管理任务,它提供了系统基础的操作组件,可以实现本地或远程shell命令,包括 ...

  8. Python --代码风格检查 pep8

    pip3 install pycodestyle pycodestyle .. Pep8编码规范 https://blog.csdn.net/ratsniper/article/details/789 ...

  9. mysql 开发进阶篇系列 30 数据库二进制包(安装指定路径,目录介绍)

    一. 指定路径 在上一篇里,二进制包解压后,全部放入在/usr/local/mysql目录下,在安装时指定了基础目录和数据目录, --basedir=/usr/local/mysql --datadi ...

  10. Python必会的单元测试框架 —— unittest

    用Python搭建自动化测试框架,我们需要组织用例以及测试执行,这里博主推荐Python的标准库——unittest. unittest是xUnit系列框架中的一员,如果你了解xUnit的其他成员,那 ...