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. PyCharm专业版安装（2018年Windows版）

    友情提示: 本教程仅供学习交流使用,如需商业用途,强烈建议使用官方正式版.(官网正式链接为:https://www.jetbrains.com/pycharm/) 当然网上有很多其他激活教程,我看到的 ...

  2. K8S上的ELK和应用日志上报实战

    来源:DevOps ID:Idevops168 本次实战的基础结构如下图所示: 一共有两个Pod:ELK和web应用: ELK的Pod会暴露两个服务,一个暴露logstash的5044端口,给file ...

  3. Docker Flie

    七.Docker File .dockeringore:打包忽略的文件列表,每行写一个文件的路径,可使用通配符 FROM指令:指定基础镜像 FROM <repository>[:<t ...

  4. 转 怎样用grep命令去掉空格行和以#开头的行

    怎样用grep命令去掉空格行和以#开头的行 https://jingyan.baidu.com/article/359911f544c36b57fe030637.html

  5. IDEA/Eclipse安装 Alibaba Java Coding Guidelines 插件

    为了让开发者更加方便.并且达到快速规范代码格式的目的并实行起来,阿里巴巴基于<阿里巴巴Java开发规约>手册内容,研发了一套自动化的IDE检测插件(IDEA.Eclipse).它就是Ali ...

  6. asp.net5开发中DNX SDK版本的影响

    某次asp.net5开发中遇到了一个很奇怪的问题,引用部分的nuget包没有显示任何错误,如下图: 但是编译时出现了几百个错误: 错误基本都是形如“CS0246 The type or namespa ...

  7. .net 向新页面跳转的语句

    1. href='##' onclick=\"window.open('../DataSplit/DrugInfo_ManualVersionViewNew.aspx?id=" + ...

  8. Django之model基础（查询补充）

    学习完简单的单表查询外,是远远不够的,今天我们对查询表记录做一个补充,接下来来看看基于对象的跨表查询.基于双下划线的跨表查询,聚合查询和分组查询,F查询与Q查询. 比如我们有如下一张表,在model中 ...

  9. cf1040E. Network Safety(并查集)

    题意 题目链接 一张图,n个点,m条边,每个点有个权值x,x<=1e18.如果一条边的两个端点不一样,那么这条边是安全的,开始时所有边都是安全的. 现在有一个病毒y,病毒可以入侵任意的点,入侵一 ...

  10. AGC015 C Nuske vs Phantom Thnook(前缀和)

    题意 题目链接 给出一张$n \times m$的网格,其中$1$为蓝点,$2$为白点. $Q$次询问,每次询问一个子矩阵内蓝点形成的联通块的数量 保证任意联通块内的任意蓝点之间均只有一条路径可达 S ...