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. 20175209 《Java程序设计》第六周学习总结

    20175209 <Java程序设计>第六周学习总结 一.教材知识点总结 第七章 内部类与异常类 1.内部类 定义:在一个类中定义的另一个类称作内部类,包含内部类的类成为内部类的外嵌类. ...

  2. springBoot多数据源(不同类型数据库)项目

    一个基于springboot的多数据源(mysql.sqlserver)项目,先看看项目结构,注意dao层 多数据源mysql配置代码: package com.douzi.robotcenter.c ...

  3. IP地址转为二进制,去掉0b补齐八位拼接,再转为十进制

    #!/usr/bin/env python# -*- coding:utf-8 -*- ip = '192.168.0.1' # 转为二进制:# 方法一'''eve = ip.split('.')s ...

  4. css文件引人的三种方式

    前言 1995年,W3C发布了CSS草案 1996年,W3C正式推出CSS1 1998年,推出CSS2 2001年从CSS3开始,CSS这门语言分割成多个独立的模块,每个模块独立分级,且只包含一小部分 ...

  5. LINQ to SQL 的常见异常及解决办法

    Ø  简介 本文主要介绍 LINQ to SQL 中常见的异常,以及对应的解决办法.包括以下内容: 1.   左连接情况下,右表非空类型字段可能抛出异常 1.   左连接情况下,右表非空类型字段可能抛 ...

  6. angularjs指令中的compile与link函数详解补充

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...

  7. 【先验知识归纳】Flask快速入门

    本文参考:快速入门 - Flask 0.10.1 文档 路由 Flask使用route修饰器来关联URL与程序函数: @app.route('/') def hello_world(): return ...

  8. webpack学习记录

    webpack 中文网站  https://webpack.docschina.org/ webpack1 有编译打包 模块热更新 代码分割 文件处理功能 webpack2 tree Shaking( ...

  9. jQuery ajaxForm和 ajaxSubmit注意

    http://jquery.malsup.com/form/#file-upload 在使用jQuery异步上传时,需要注意在存在文件上传时,要将返回数据的contentType设置为text/htm ...

  10. 【原创】大数据基础之Oozie（1）简介、源代码解析

    Oozie4.3 一 简介 1 官网 http://oozie.apache.org/ Apache Oozie Workflow Scheduler for Hadoop Hadoop生态的工作流调 ...