在CSS3中，出现了很多出彩的效果，例如2D、3D以及过度、动画和多列等。这些效果为页面设计添加了很多的可选设计。

1、2D、3D转换

转换，是使元素改变尺寸、形状、位置的一种效果；通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉伸或拉长；可以通过2D、3D元素来转换；

2D转换方法：

translate()、rotate()、scale()、skew()、matrix()

3D转换方法：

rotateX()

rotateY()

 <!doctype html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title></title>
     <link rel="stylesheet" type="text/css" href="1.css">
 </head>
 <body>
     <div>这是一个初始效果</div>
     <br/>
     <div class="div2">这是一个改变后的效果</div>
     <div class="div3">这是一个改变后的效果</div>
     <div class="div4">这是一个改变后的效果</div>
     <div class="div5">这是一个改变后的效果</div>
     <div class="div6">这是一个改变后的效果</div>

     <div class="div7">这是一个改变后的效果</div>
 </body>
 </html>

对应的CSS文件：

 div{
     width:200px;
     height: 200px;
     color: blue;
 }
 .div2{
     /*这条语句不支持特定浏览器，因此运行可能无效；后面的语句是针对特定浏览器的*/
     transform: translate(200px, 100px);

     /*这是让safari和chrome支持的语句*/
     -webkit-transform:translate(100px,100px);

     /*这是让Ie支持的语句*/
     -ms-transform：translate(100px,100px);

     /*这是让Opera支持的语句*/
     -o-transform: translate(100px,100px);

     /*这是让firefox支持的语句*/
     -moz-transform: translate(100px,100px);
 }
 .div3{
     transform: rotate(100deg);
 }
 .div4{
     margin-top: 200px;
     transform: scale(1,2);
 }
 .div5{
     transform: skew(20deg,20deg);
 }
 .div6{
     transform: matrix(1, 0, 0, 1, 30, 30);
 }
 .div7{
     font-size: 50px;
     transform: rotateX(120deg) rotateY(120deg);
 } 

2、动画过渡

CSS3过渡是元素从一种样式转换成另一种样式，包括动画执行效果的CSS，动画执行的时间

属性：

transition：设置以下4个过渡属性

也可以分别设置这四个属性：

transition-property:过渡的名称

transition-duration：过渡花费的时间

transition-timing-function:过渡效果的时间曲线

transition-delay：过渡效果开始时间

 <body>
     <div>效果展示</div>
 </body>

对应的CSS文件：

 div{
     width:100px;
     height: 100px;
     background-color: blue;
     transition: width 2s, height 2s,transform 2s;
     transition-delay:2s;
 }
 div:hover{
     width: 200px;
     height: 200px;
     transform: rotate(360deg);
 }

3、动画

通过CSS3，可以进行动画创作，CSS3的动画需要遵循@keynames规则，另外需要规定动画的时长和名称

 <body>
 <div>动画效果</div>
 </body>

对应的CSS文件：

 div{
     width: 200px;
     height: 200px;
     background-color: red;
     position: relative;
     /*animation:anim 5s;*/

     /*重复反方向执行动画效果*/
     animation: anim 5s infinite alternate;
 }
 /*若需浏览器适配，则：*/
 /*“@keyframe”改为“@-webkit-keyframes”  */
 @keyframes  anim{
 ;}
 }
     50%{background: gold;left: 200px;top:200px}
 ;top:200px}
 ;}
 }

4、多列

CSS3中，可以创建多列来对文本或区域进行布局

属性：

column-count:分列的数量

column-gap:每列中间间隔的距离

column-rule:每列之间间隔的线，包括线的颜色

 <body>
     <div class="div1">
         大家好，欢迎进入CSS的世界
         大家好，欢迎进入CSS的世界
         大家好，欢迎进入CSS的世界
         大家好，欢迎进入CSS的世界
         大家好，欢迎进入CSS的世界
         大家好，欢迎进入CSS的世界
         大家好，欢迎进入CSS的世界
         大家好，欢迎进入CSS的世界
         大家好，欢迎进入CSS的世界
         大家好，欢迎进入CSS的世界
         大家好，欢迎进入CSS的世界
         大家好，欢迎进入CSS的世界
         大家好，欢迎进入CSS的世界
         大家好，欢迎进入CSS的世界
         大家好，欢迎进入CSS的世界
     </div>
 </body>

对应的CSS文件：

 .div1{
 ;
     -webkit-column-gap: 50px;
     -webkit-column-rule: 5px outset red;
 }

5、CSS瀑布流效果

 <body>
     <div class="container">
         <div><img src="1.jpg" width="200px" height="auto"><p>这里添加标签</p></div>
         <div><img src="2.jpg" width="auto" height="150px"></div>
         <div><img src="3.jpg" width="200px" height="auto"></div>
         <div><img src="4.jpg" width="300px" height="auto"></div>
         <div><img src="5.jpg" width="auto" height="150px"></div>
         <div><img src="6.jpg" width="200px" height="auto"><p>这里添加标签</p></div>
         <div><img src="7.jpg" width="auto" height="150px"></div>
         <div><img src="8.jpg" width="200px" height="auto"></div>
         <div><img src="9.jpg" width="auto" height="150px"><p>这里添加标签</p></div>
     </div>
 </body>

对应的CSS文件 ：

 .container{
     -webkit-column-width: 250px;
     -webkit-column-gap:5px;
 }
 .container div{
     width: 250px;
     margin: 5px 0;
 }
 .container p{
     text-align: center;
 }

[CSS3] 学习笔记-CSS动画特效的更多相关文章

  1. [CSS3] 学习笔记-CSS选择器

    CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...

  2. [CSS3] 学习笔记-CSS定位

    页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在 ...

  3. CSS3 学习笔记（动画 多媒体查询）

    动画 1.@keyframes规则用于创建动画.在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果 2.使用animation进行动画捆绑.两个值:动画名称.时长 ...

  4. [CSS3] 学习笔记--CSS盒子模型

    1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...

  5. [CSS3]学习笔记-CSS基本样式讲解

    1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en ...

  6. [CSS3] 学习笔记-CSS入门基本知识

    1.CSS概述 CSS指层叠样式表 CSS样式表极大的提高了工作效率 1)CSS基础语法: selector{ propery:value } 例1:h1{color:red;font-size:14 ...

  7. amazeui学习笔记--css（常用组件15）--CSS动画Animation

    amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...

  8. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  9. amazeui学习笔记--css（常用组件6）--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

随机推荐

  1. Apache2 三种MPM对比分析

    就最新版本的Web服务器Apache(版本是Apache 2.4.10,发布于2014年7月21日)来说,一共有三种稳定的MPM(Multi-Processing Module,多进程处理模块)模式. ...

  2. URL与String转换

    NSString *str = @"www.baidu.com"; NSURL *URL = [NSURL URLWithString:str];  //string>url ...

  3. Laravel 安装

    其实,laravel的安装网上给了很多方法,但是你可以直接根据laravel中国官网http://www.golaravel.com/docs/4.1/installation/给出的三种方法,选择其 ...

  4. LPC1768的usb使用--硬件篇

    LPC1768芯片带有USB设备控制器,前面写的文章都是在说比较简单的设备驱动,今天来说复杂一点的 首先是硬件层的配置 #ifndef __USBHW_H__ #define __USBHW_H__ ...

  5. HUST 1602 Substring

    水题. #include<cstdio> #include<cstring> #include<cmath> #include<string> #inc ...

  6. Java ThreadFactory接口用法

    根据需要创建新线程的对象.使用线程工厂就无需再手工编写对 new Thread 的调用了,从而允许应用程序使用特殊的线程子类.属性等等.   JDK中的介绍: An object that creat ...

  7. C# GridView Edit & Delete, 点击Delete的时候弹出确认框

    1. 使用GridView自带属性ShowEditButton和ShowDeleteButton,均设为True  <Columns> ... <asp:CommandField S ...

  8. ARM的启动代码(1):介绍（转）

    源:ARM的启动代码(1):介绍 很多朋友搞嵌入式,写起代码来一点问题没有,到最后上板子调试的时候,挂了.究其原因,还是对芯片的启动地址.启动方式.bootloader和操作系统的衔接出了问题.今天就 ...

  9. web 前端routine

    HTML:check CSS : check Javascript: struggling 框架:—— SQL:—— http://www.cnblogs.com/kzang/tag/SQL/ web ...

  10. 统计学常用概念：T检验、F检验、卡方检验、P值、自由度

    1,T检验和F检验的由来 一般而言,为了确定从样本(sample)统计结果推论至总体时所犯错的概率,我们会利用统计学家所开发的一些统计方法,进行统计检定. 通过把所得到的统计检定值,与统计学家建立了一 ...