HTML新增的功能,html5中新增功能有哪些

html5中新增功能有哪些

发布时间：2021-05-23 08:42:46

来源：亿速云

阅读：87

作者：小新

这篇文章主要介绍了html5中新增功能有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

html>

audio

您的浏览器太low了

您的浏览器太low

1. 邮箱:
2. 网址:
3. 日期:
4. 数量:
5. 日期:
6. 手机号:
7. 搜索:
8. 颜色:
9. 不能为空:
10. 提示为本:
11. 自动获得鼠标焦点:

---

html>

css3

ul li:nth-child(odd) {

background-color: cornflowerblue;

}

ul {

display: inline-grid;

width: 200px;

margin-left: -39px;

list-style: none;

text-align: center;

}

div::before {

display: inline-block;

content: "我想";

width: 100px;

height: 100px;

background-color: pink;

}

div::after {

display: inline-block;

content: "飞的更高";

width: 100px;

height: 100px;

background-color: pink;

}

• 1
• 4
• 4
• 4
• 4

html>

动画

/*from 和 to 等价于 0% 和 100%*/

/*@keyframes move {*/

/*0%{*/

/*transform:translateX(0px);*/

/*}*/

/*100%{*/

/*transform:translateX(1000px);*/

/*}*/

/*}*/

.bowen {

position: fixed;

top: 50%;

left: 50%;

width: 200px;

height: 200px;

transform: translate(-50%, -50%);

background-color: pink;

}

.bowen div[class^="dotted"] {

position: absolute;

top: 50%;

left: 50%;

width: 8px;

height: 8px;

transform: translate(-50%, -50%);

background-color: deepskyblue;

border-radius: 50%;

}

@keyframes pulse {

0% {

}

70% {

width: 100px;

height: 100px;

opacity: 1;

}

100% {

width: 100px;

height: 100px;

opacity: 0;

}

}

.bowen div.dotted2,

.bowen div.dotted3,

.bowen div.dotted4 {

background-color: transparent;

box-shadow: 0 0 8px deepskyblue;

animation: pulse 1.2s linear infinite forwards;

}

.bowen div.dotted2 {

animation-delay: 0.4s;

}

.bowen div.dotted3 {

animation-delay: 0.8s;

}

html>

3D

body {

perspective: 500px;

}

.box {

position: relative;

width: 200px;

height: 200px;

margin: 0 auto;

transform-style: preserve-3d;

transition: all .3s;

}

.box div {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: cornflowerblue;

}

.box div:last-child {

background-color: aliceblue;

transform: rotateX(60deg);

}

.box:hover {

transform: rotate3D(0, 1, 0, 60deg);

}

html>

导航栏

li {

float: left;

padding: 0 10px;

list-style: none;

perspective: 500px;

}

.box {

position: relative;

width: 200px;

height: 50px;

transform-style: preserve-3d;

transition: all .5s;

}

.box div {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: pink;

text-align: center;

line-height: 50px;

}

.box div:nth-child(1) {

transform: translateZ(25px);

}

.box div:nth-child(2) {

background-color: purple;

/*必须先移动后旋转*/

transform: translateY(25px) rotateX(-90deg);

}

.box:hover {

transform: rotateX(90deg);

}

• 好好学习

  天天向上
• 好好学习

  天天向上
• 好好学习

  天天向上
• 好好学习

  天天向上

html>

旋转木马

section {

position: fixed;

top: 50%;

left: 50%;

width: 300px;

height: 200px;

transform: translate(-50%, -50%);

perspective: 2500px;

}

section div.box {

position: relative;

transform-style: preserve-3d;

animation: move 15s linear infinite;

background: url("img/4.jpg") no-repeat;

background-size: 300px 200px;

}

div {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

div:nth-child(1) {

background: url("img/3.jpg") no-repeat;

background-size: 300px 200px;

transform: rotateY(0) translateZ(400px);

}

div:nth-child(2) {

background: url("img/9.jpg") no-repeat;

background-size: 300px 200px;

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

}

div:nth-child(3) {

background: url("img/5.jpg") no-repeat;

background-size: 300px 200px;

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

}

div:nth-child(4) {

background: url("img/6.jpg") no-repeat;

background-size: 300px 200px;

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

}

div:nth-child(5) {

background: url("img/7.jpg") no-repeat;

background-size: 300px 200px;

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

}

div:nth-child(6) {

background: url("img/8.jpg") no-repeat;

background-size: 300px 200px;

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

}

@keyframes move {

0% {

transform: rotateY(0);

}

100% {

transform: rotateY(360deg);

}

}

.box:hover{

animation-play-state: paused;

}

感谢你能够认真阅读完这篇文章，希望小编分享的“html5中新增功能有哪些”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!