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. JavaScript实现全选选项框的功能和鼠标划入出现下拉框的功能--JavaScript实例集锦（初学）

    有一些论坛,文章后台编辑都会出现选择框的操作. 1.实现选项框全选和取消全选的功能: 代码实现: <!DOCTYPE html> <html> <head> < ...

  2. PageOffice调用本地office实现多人在线同时编辑Word文档

    说明:多人同时在线编辑文件大多数会出现文档相互覆盖的问题,后保存的文档会覆盖先保存的文档.pageoffice的这个功能可以用程序控制不同用户打开文件后,编辑Word文档中属于自己的区域,并且不会互相 ...

  3. 可视化学习：使用极坐标参数方程和SDF绘制有趣的图案

    前言 本文将介绍如何使用极坐标参数方程和上一篇文章提到的距离场SDF来绘制有趣的图案. 说到曲线和几何图形的绘制,我们知道图形系统默认支持的是通过直角坐标绘制,但是有些曲线呢,不太容易使用直角坐标系来 ...

  4. orangepi zero2在linux5.4以上内核使用ili9341

    背景 根据orangepi zero2用户手册说明,linux5.13内核不能使用 modprobe fbtft_device 驱动spi lcd 查看linux内核源码提交记录,发现在v5.4-rc ...

  5. 二：nacos 的服务注册

    一:怎么引用依赖 dependencyManagement:spring cloud alibaba 的版本,由于spring cloud alibaba 还未纳入spring cloud 的主版本管 ...

  6. Android 13 - Media框架（9）- NuPlayer::Decoder

    关注公众号免费阅读全文,进入音视频开发技术分享群! 这一节我们将了解 NuPlayer::Decoder,学习如何将 MediaCodec wrap 成一个强大的 Decoder.这一节会提前讲到 M ...

  7. Android 13 - Media框架（2）- Demo App与MediaPlayer Api了解

    关注公众号免费阅读全文,进入音视频开发技术分享群! 尝试用MediaPlayer写了一个播放demo,实现了网络流和本地流的播放.由于本人对app开发一窍不通,所以demo中很多内容是边查资料边写的, ...

  8. .NET6之MiniAPI(九)：基于角色的身份验证和授权

    身份验证是这样一个过程:由用户提供凭据,然后将其与存储在操作系统.数据库.应用或资源中的凭据进行比较. 在授权过程中,如果凭据匹配,则用户身份验证成功,可执行已向其授权的操作. 授权指判断允许用户执行 ...

  9. React 中的 useRef 与 useState

    React 是一个流行的 JavaScript 库,用于构建用户界面.它提供了几个钩子,使开发人员能够管理状态并执行副作用. React 中两个常用的钩子是 useRef 和 useState .虽然 ...

  10. js 实现密码框的查看和隐藏

    大江东去,浪淘尽,千古风流人物.故垒西边,人道是,三国周郎赤壁.乱石穿空,惊涛拍岸,卷起千堆雪.江山如画,一时多少豪杰.遥想公瑾当年,小乔初嫁了,雄姿英发.羽扇纶巾,谈笑间,樯橹灰飞烟灭.故国神游,多 ...