vscode的使用

什么是HTML5？

HTML5新增语义化标签

多媒体标签

<audio>音频标签

谷歌浏览器 把autoplay属性给我们禁用。

两种音频格式的播放

视频标签<video>

HTML5表单属性

新增表单属性

内容不能为空

css3

css3属性选择器

css3结构伪类选择器

css3伪元素选择器

css3伪元素选择器

css3 2D转换

二维坐标系

translate 移动

2D 转换之旋转

过渡写到本身上，谁做动画给谁加

transform：all 0.3;

案例（三角）

设置转换的中心点

旋转案例

2D转换之缩放scale

 

案例（图片放大）

案例 分页按钮

css3 2D转换终和写法

动画

from 和 to 等价与 0%  100%

动画常用属性

动画简写属性

案例 热点图

动画速度和曲线步长

案例2 奔跑的熊大

3D转换

3D转换学习内容

3D透视

3D旋转rotate3d

X轴

 y轴

 Z轴

 自定义轴旋转

3D呈现

3D转换 2面翻转的盒子 

3D导航（案例）

综合案例 旋转木马

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body {

            perspective: 1000px;

        }

        section {

            position: relative;

            width: 300px;

            height: 200px;

            margin: 150px auto;

            /* 开启立体空间 */

            transform-style: preserve-3d;

            /* 添加动画 */

            animation: rotate 10s linear infinite;

            background: url(111.png) no-repeat;

        }

        section:hover {

            /* 鼠标放入停止 */

            animation-play-state: paused ;

        }

        @keyframes rotate {

            0% {

                transform: rotateY(0);

            }

            100% {

                transform: rotateY(360deg);

            }

        }

        section div {

            position: absolute;

            width: 100%;

            height: 100%;

            background: url(111.png) no-repeat;

        }

        section div:nth-child(1) {

            transform: translateZ(300px);

        }

        section div:nth-child(2) {

            /* 先旋转后移动 */

            transform: rotateY(60deg)  translateZ(300px);   

        }

        section div:nth-child(3) {

            /* 先旋转后移动 */

            transform: rotateY(120deg)  translateZ(300px);

        }

        section div:nth-child(4) {

            /* 先旋转后移动 */

            transform: rotateY(180deg)  translateZ(300px);

        }

        section div:nth-child(5) {

            /* 先旋转后移动 */

            transform: rotateY(240deg)  translateZ(300px);

        }

        section div:nth-child(6) {

            /* 先旋转后移动 */

            transform: rotateY(300deg)  translateZ(300px);

        }

    </style>

</head>

<body>

    <section>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </section>

</body>

</html>

浏览器私有前缀

css3 html5的更多相关文章

  1. CSS3+HTML5特效8 - 顶部和右侧固定，左侧随窗口变化的布局

    原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏 ...

  2. CSS3+HTML5特效9 - 简单的时钟

    原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍)         实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...

  3. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  4. 超酷 CSS3/HTML5 3D 飘带菜单实现教程

    今天我们来介绍一款很有创意的CSS3/HTML5菜单,首先菜单是飘带形状的,看起来很优雅,这种菜单在个人博客中用的比较多,不仅干净利落,而且很具有个性化.另外,这款菜单在鼠标滑过菜单项时,将会出现3D ...

  5. 学习笔记 第十二章 CSS3+HTML5网页排版

    第12章   CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1  使用结构标签 在制作网页时,不仅需要使用< ...

  6. 8款强大的CSS3/HTML5动画及应用源码

    1.CSS3 jQuery UI控制滑杆插件 今天我们要来分享一款基于CSS3和jQuery UI的控制滑杆插件,这款控制滑杆是在HTML5滑杆元素的基础上进行自定义CSS3渲染,所以外观更加漂亮.另 ...

  7. [CSS3 + HTML5] Modernizr

    Modernizr is a library for detecting whether the user's browsers have certain features and based on ...

  8. CSS3/HTML5实现漂亮的分步骤注册登录表单

    分步骤的登录注册表单现在也比较多,主要是能提高用户体验,用户可以有选择性的填写相应的表单信息,不至于让用户看到一堆表单望而却步.今天和大家分享的就是一款基于HTML5和CSS3的分步骤注册登录表单,外 ...

  9. CSS3&HTML5各浏览器支持情况一览表

    http://fmbip.com/ CSS3性质(CSS3 Properties) 平台 MAC WIN 浏览器 CHROME FIREFOX OPERA SAFARI CHROME FIREFOX ...

  10. CSS3+HTML5实现块阴影与文字阴影

    CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...

随机推荐

  1. CompletableFuture学习总结

    CompletableFuture 简介 在Java8中,CompletableFuture提供了非常强大的Future的扩展功能,可以帮助我们简化异步编程的复杂性,并且提供了函数式编程的能力,可以通 ...

  2. [4]自定义Lua解析器管理器-------演化脚本V0.7

    [4]自定义Lua解析器管理器-------演化脚本V0.7 使用自定义委托来调用lua脚本中的多返回值函数和长参数类型的函数. 先看代码,依旧是上篇文章中所贴的脚本.新增调用两个函数testFunc ...

  3. leaflet 使用turfjs实现前端自定义插值

    Turf.js官网地址:http://turfjs.org/ Turf.js中的几何数据组织规范以WKT格式为标准.其官网中包含了详细的接口介绍和样例讲解.这里我给出我们需要用的接口: 参考地址: h ...

  4. kettle使用2-增量插入

    1.新建转换 2.在DB连接中,新建2个数据库连接 3.在输入中,新建:表输入 4.在输入中,新建:表输入 5.在输出中,新建:表输出

  5. 网络安全—IPSec安全策略

    文章目录 网络拓扑 添加策略 ESP 添加筛选器 添加筛选器的操作 另一台主机设置 AH 使用Windows Server 2003系统 网络拓扑 client1 IP = 192.168.17.10 ...

  6. 密码学—Vigenere破解Python程序

    文章目录 概要 预备知识点学习 整体流程 技术名词解释 技术细节 小结 代码 概要 破解Vigenere需要Kasiski测试法与重合指数法的理论基础 具体知识点细节看下面这两篇文章 预备知识点学习 ...

  7. 服务器电源管理（Power Management States）

    目录 文章目录 目录 EIST(智能降频技术) 硬件 固件 操作系统 EIST(智能降频技术) EIST 能够根据不同的 OS(操作系统)工作量自动调节 CPU 的电压和频率,以减少耗电量和发热量.它 ...

  8. 4G EPS 中的各种唯一标识

    目录 文章目录 目录 电信运营商的唯一标识:PLMN.MCC 与 MNC 移动用户的唯一标识:IMSI.MSIN 与 MSISDN/MDN 移动用户的唯一临时标识:TMSI.GUTI 与 GUMMEI ...

  9. 国产linux系统（银河麒麟，统信uos）使用 PageOffice 国产版在线动态填充 word 文件

    PageOffice 国产版 :支持信创系统,支持银河麒麟V10和统信UOS,支持X86(intel.兆芯.海光等).ARM(飞腾.鲲鹏.麒麟等)芯片架构. 在实际的Word文档开发中,经常需要自动填 ...

  10. FFmpeg开发笔记（二十一）Windows环境给FFmpeg集成AVS3解码器

    ​AVS3是中国AVS工作组制定的第三代音视频编解码技术标准,也是全球首个已推出的面向8K及5G产业应用的视频编码标准.AVS工作组于2019年3月9日完成第三代AVS视频标准(AVS3)基准档次的制 ...