CSS3 transform变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见

举例：（翻面效果）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>翻面</title>

    <style type="text/css">

        .box{

            width:300px;

            height:272px;

            margin:50px auto 0;

            transform-style:preserve-3d;

            position:relative;

        }

        .box .pic{

            width:300px;

            height:272px;

            position:absolute;

            background-color:cyan;

            left:;

            top:;

            transform:perspective(800px) rotateY(0deg);

            backface-visibility:hidden;

            transition:all 500ms ease;

        }

        .box .back_info{

            width:300px;

            height:272px;

            text-align:center;

            line-height:272px;

            background-color:gold;

            position:absolute;

            left:;

            top:;

            transform:rotateY(180deg);

            backface-visibility:hidden;

            transition:all 500ms ease;

        }

        .box:hover .pic{

            transform:perspective(800px) rotateY(180deg);

        }

        .box:hover .back_info{

            transform:perspective(800px) rotateY(0deg);

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="pic"><img src="data:images/location_bg.jpg"></div>

        <div class="back_info">背面文字说明</div>

    </div>

</body>

</html>

CSS3 animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线

  • linear 匀速
  • ease 开始和结束慢速
  • ease-in 开始是慢速
  • ease-out 结束时慢速
  • ease-in-out 开始和结束时慢速
  • steps 动画步数

5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction

  • normal 默认动画结束不返回
  • Alternate 动画结束后返回

8、animation-play-state 动画状态

  • paused 停止
  • running 运动

9、animation-fill-mode 动画前后的状态

  • none 不改变默认行为
  • forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
  • backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
  • both 向前和向后填充模式都被应用

10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

举例：（人物走路动画）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>走路动画</title>

    <style type="text/css">

        .box{

            width:120px;

            height:180px;

            border:1px solid #ccc;

            margin:50px auto 0;

            position:relative;

            overflow:hidden;

        }

        .box img{

            display:block;

            width:960px;

            height:182px;

            position: absolute;

            left:;

            top:;

            animation:walking 1.0s steps(8) infinite;

        }

        @keyframes walking{

            from{

                left:0px;

            }

            to{

                left:-960px;

            }

        }

    </style>

</head>

<body>

    <div class="box"><img src="data:images/walking.png"></div>

</body>

</html>

CSS（八）的更多相关文章

  1. CSS八种让人眼前一亮的HOVER效果

    一.发送效果 HTML <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> & ...

  2. 手机站CSS

    手机web——自适应网页设计(html/css控制) 内核: -ms- /* IE 9 */ -moz- /* Firefox */ -webkit- /* Safari and Chrome */ ...

  3. gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全

    gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...

  4. 自动化前端构建工具--gulp

    Gulp是一个基于任务的javascript工程命令行流式构建工具.为什么要用Gulp呢?前端开发进入到工程化阶段,我们需要压缩合并文件,加MD5戳:如果使用 CoffeeScript/ES6 去代替 ...

  5. SpringMvc_快速入门,深入分析

    目录  一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...

  6. Spring MVC 教程,快速入门,深入分析

    http://elf8848.iteye.com/blog/875830/ Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门  资源下载: ...

  7. Spring_MVC_教程_快速入门_深入分析

    Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门  资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...

  8. Spring MVC 教程

    目录  一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...

  9. （转）Spring MVC

    资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf SpringMVC核心配置文件示例.rar 作者:赵磊 博客:http://elf8848.iteye.com 目录 一.前 ...

  10. Spring MVC 教程,快速入门,深入分析(转载)

    作者:赵磊 博客:http://elf8848.iteye.com 下载: Spring的官方下载网址是:http://www.springsource.org/download    (本文使用是的 ...

随机推荐

  1. selenium技术博客

    1.java+selenium+详细的api说明和seleniumGrid使用,缺点是代码不够好看. http://www.cnblogs.com/yytesting/p/5714175.html

  2. EF CodeFirst系列（1)---CodeFirst简单入门

    1.什么是CodeFirst 从EF4.1开始,EF可以支持CodeFirst开发模式,这种开发模式特别适用于领域驱动设计(Domain Driven Design,大名鼎鼎的DDD).在CodeFi ...

  3. React 记录(4)

    React文档:https://www.reactjscn.com/docs/components-and-props.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https:/ ...

  4. 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性)

    一. 简介 上一个章节中,也介绍了立即加载和延迟加载,但上一个章节是针对单表而言的,不含外键,立即也好,延迟也好,都是指单表中的数据.但本章节重点介绍的三种加载方式均是针对含(导航属性.外键)的情况下 ...

  5. Richard Sabey于2004年给出了由123456789各出现一次的e的估计

  6. 五十一、进程间通信——System V IPC 之进程信号量

    51.1 进程信号量 51.1.1 信号量 本质上就是共享资源的数目,用来控制对共享资源的访问 用于进程间的互斥和同步 每种共享资源对应一个信号量,为了便于大量共享资源的操作引入了信号量集,可对所有信 ...

  7. Pandas时间处理的一些小方法

    一.以下有两种方式可以创建一个Timestamp对象: 1. Timestamp()的构造方法 import pandas as pd from datetime import datetime as ...

  8. [面试] mysql 面试题

    最近在准备面试,mysql 实在是不熟悉,就先摘录一些网上的面试题来看一下. 1. MyISAM 和 InnoDB 区别? InnoDB 支持事务处理,支持更大的并发update 和 insert 操 ...

  9. 爬虫工程师JD归纳

    核心能力归纳 负责:多平台信息的抓取,清洗和分析工作 要求: 熟悉常用开源爬虫框架,如 scrapy / pyspider
 了解基于Cookie的登录原理,熟悉常用的信息抽取技术,如正则表达式.XP ...

  10. python Flask web框架

    目录: --> Flask --> 配置文件 --> 配置文件解析 --> 配置文件导入 --> 路由 --> 路由参数 --> 常用路由匹配 --> ...