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. git 提交解决本地与远程冲突

    首先介绍一下背景. 如果有一个工程A,开始时test.txt 的内容如下 chenfool hello world 作者通过 git clone 的方式,将这个项目download 到本地. 此时,作 ...

  2. spark sql metastore 配置 mysql

    本文主要介绍如何为 spark sql 的 metastore 配置成 mysql . spark 的版本 2.4.0 版本 hive script 版本为 hive 1.2.2 mysql 为 5. ...

  3. NYOJ247 虚拟城市之旅 （spfa）

    题目链接:点击打开链接 虚拟的城市之旅 时间限制: ms  |  内存限制: KB 难度: 描述 展馆是未来城市的缩影,个人体验和互动是不变的主题.在A国展馆通过多维模式和高科技手段,引领参观者在展示 ...

  4. php微信公众号开发简单记录

    开发前准备:1.服务器 2.微信公众号测试号(有真实的账号更好) 测试号申请地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/lo ...

  5. Draw a Mess (并查集)

    It's graduated season, every students should leave something on the wall, so....they draw a lot of g ...

  6. 瓷砖覆盖（状压DP)

    题目描述 Description 用1*2的瓷砖去铺N*M的地面,问有多少种铺法 输入描述 Input Description 第一行有两数n,m.表示地面的大小 输出描述 Output Descri ...

  7. python模块之calendar方法详细介绍

    calendar,是与日历相关的模块.calendar模块文件里定义了很多类型,主要有Calendar,TextCalendar以及HTMLCalendar类型.其中,Calendar是TextCal ...

  8. sql For update

    for update 的作用和目的:select for update 是为了在查询时,对这条数据进行加锁,避免其他用户以该表进行插入,修改或删除等操作,造成表的不一致性. 几个类似的场景: sele ...

  9. leetcode 91. 解码方法

    题目描述: 一条包含字母 A-Z 的消息通过以下方式进行了编码: 'A' -> 1 'B' -> 2 ... 'Z' -> 26 给定一个只包含数字的非空字符串,请计算解码方法的总数 ...

  10. HDU 5763 Another Meaning dp+字符串hash || DP+KMP

    题意:给定一个句子str,和一个单词sub,这个单词sub可以翻译成两种不同的意思,问这个句子一共能翻译成多少种不能的意思 例如:str:hehehe   sub:hehe 那么,有**he.he** ...