css3动画
@keyframes 动画名 {
0%
{

}
100%
{

}
}

元素执行动画
animation: 动画名 运动时间 运动曲线

01运动的汽车.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        img {

            animation: move 5s infinite;

        }

        /*定义动画*/

       @keyframes move {

           0% {

                 transform: translate3d(0,0,0);

           }

           50% {

                 transform: translate3d(800px,0,0);

           }

           51% {

                 /*多组变形 空格隔开即可*/

                 transform: translate3d(800px,0,0) rotateY(180deg);

           }

           100% {

                 transform: translate3d(0,0,0) rotateY(180deg);

           }

       }

    </style>

</head>

<body>

    <img src="car.jpg" alt="" width="100" />

</body>

</html>

02-CSS基础与进阶-day13_2018-09-21-20-05-21的更多相关文章

  1. python 学习笔记十二 CSS基础（进阶篇）

    1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与 ...

  2. 02 mysql 基础二 (进阶)

    mysql 基础二 阶段一 表约束 1.not null 非空约束 例子: create table tb1( id int, name varchar(20) not null ); 注意 空字符不 ...

  3. css基础--常用css属性02

    上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...

  4. 2020年12月-第02阶段-前端基础-CSS基础选择器

    CSS选择器(重点) 理解 能说出选择器的作用 id选择器和类选择器的区别 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的 ...

  5. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  6. web开发：css基础

    一.w3c架构分析 二.css三种引入 三.三种引入的优先级 四.基础选择器 五.长度单位与颜色 六.文件样式操作 七.display 一.w3c架构分析 <!DOCTYPE html> ...

  7. css 基础教程学习

    css基础语法 css语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 如果要定义不止一个声明,则 ...

  8. Linux三剑客之awk精讲（基础与进阶）

    第1章 awk基础入门 要弄懂awk程序,必须熟悉了解这个工具的规则.本实战笔记的目的是通过实际案例或面试题带同学们熟练掌握awk在企业中的用法,而不是awk程序的帮助手册. 1.1 awk简介 一种 ...

  9. 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏

    [图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...

  10. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

随机推荐

  1. ICP备案接入商

    1. 什么是ICP备案中的接入商 ICP备案系统中所说的接入商:是指为您提供虚拟主机.服务器托管或者专线接入的公司. 现在ICP备案的原则是“谁接入谁负责”,接入商一般都有自己的电子平台和工信部对接, ...

  2. SAP 权限层次

    此文可是没有维护过权限的人对权限有一个整体的认知,转来加以记忆. 一是系统权限 主要是对模块为单位的权限划分,具体就是用户对该模块可见不可见,能不能对该模块进行再授权的操作.表现在用户界面就是用户登录 ...

  3. Objective-C的Runtime System

    [0] Outline --  [1] 版本和平台 --  [2] 与Runtime System交互 --  [3] 方法的动态决议 --  [4] 消息转发 --  [5] 类型编码 --  [6 ...

  4. 检测工具lynis

    wget https://gitee.com/zzhlinux911218/software/raw/master/linux-inspect2.sh;bash linux-inspect2.sh检测 ...

  5. git教程5-webhook

    运维需求 许多存储系统(如:MySQL)提供慢查询日志帮助开发与运维人员定位系统存在的慢操作.所谓慢查询日志就是系统在命令执行前后计算每条命令的执行时间,当超过预设阈值,就将这条命令的相关信息(例如: ...

  6. linux下生成随机密码

    常见的简单的两种方法 1.openssl rand -base64 32 2.date | md5sum

  7. Observer模式（观察者设计模式）

    Observer 设计模式? 在Observer模式中,当观察对象的状态发生变化时,会通知给观察者.Observer模式适用于根据对象状态进行相应处理的场景. Observer 并非主动观察,而是被动 ...

  8. codeforces round 472(DIV2)D Riverside Curio题解（思维题）

    题目传送门:http://codeforces.com/contest/957/problem/D 题意大致是这样的:有一个水池,每天都有一个水位(一个整数).每天都会在这一天的水位上划线(如果这个水 ...

  9. Domain Model

    VO(View Object):视图对象,用于展示层,它的作用是把某个指定页面(或组件)的所有数据封装起来. DTO(Data Transfer Object):数据传输对象,这个概念来源于J2EE的 ...

  10. HDU - 5920 Ugly Problem 求解第一个小于n的回文数

    http://acm.hdu.edu.cn/showproblem.php?pid=5920 http://www.cnblogs.com/xudong-bupt/p/4015226.html 把前半 ...