html5新增、css3动画、导航条、文字轮播和旋转木马
程序员文章站
2022-06-18 19:15:51
html5新增1新增header — 头部标签nav — 导航标签article — 内容标签section — 块级标签aside — 侧边栏标签footer — 尾部标签音频 – audio视频 – videoaudio的使用格式audio的参数新增input标签新增表单属性css3动画导航条
html5新增
1新增
header — 头部标签
nav — 导航标签
article — 内容标签
section — 块级标签
aside — 侧边栏标签
footer — 尾部标签
音频 – audio
视频 – video
audio的使用格式
audio的参数
新增input标签
新增表单属性
css3动画
导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航条</title>
<style>
* {
margin: 0;
padding: 0;
}
.fight {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
}
.box {
position: absolute;
width: 20px;
height: 3px;
border: 1px solid red;
bottom: 0px;
}
.child {
width: 5px;
height: 3px;
background-color: red;
}
.box:hover {
animation: moves 1s ;
}
.box:hover .child {
height: 100%;
animation: mouse 1s ;
}
@keyframes moves {
0% {
height: 3px;
}
100% {
height: 5px;
}
}
@keyframes mouse {
0% {
width: 5px;
}
100% {
width: 20px;
}
}
</style>
</head>
<body>
<div class="fight">
<div class="box">
<div class="child"></div>
</div>
</div>
</body>
</html>
文字轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字滚动</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 100px;
min-width: 1500px;
background-color: red;
margin: 100px auto;
overflow: hidden;
}
.child {
text-align: center;
position: relative;
width: 200%;
animation: move 15s linear infinite;
}
p {
font-size: 20px;
color: wheat;
position: absolute;
top: 0;
width: 50%;
}
p:first-child {
left: 10%;
}
p:last-child {
left: 60%;
}
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div class="box">
<div class="child">
<p>
csdn服务于应用型学习院校,致力于打造优质教育服务平台,依托互联网构建高品质学习社区。csdn目前面向社会开放单招培训课程,趣味编程,编程基础等基础性课程。
</p>
<p>
csdn服务于应用型学习院校,致力于打造优质教育服务平台,依托互联网构建高品质学习社区。csdn目前面向社会开放单招培训课程,趣味编程,编程基础等基础性课程。
</p>
</div>
</div>
</body>
</html>
旋转木马
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转木马</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
perspective: 1200px;
}
.box {
position: relative;
width: 360px;
height: 480px;
/* background-color: red; */
margin: 300px auto;
animation: rotate 10s linear infinite;
transform-style: preserve-3d;
}
.box div {
position: absolute;
left: 0;
top: 0;
width: 360px;
height: 480px;
/* border: 1px solid red; */
background-size: contain;
}
.box div:nth-child(1) {
background-image: url(./imgs/1.jpg);
z-index: 6;
transform: rotateY(0) translateZ(350px);
}
.box div:nth-child(2) {
background-image: url(./imgs/2.jpg);
z-index: 5;
transform: rotateY(60deg) translateZ(350px);
}
.box div:nth-child(3) {
background-image: url(./imgs/3.jpg);
z-index: 4;
transform: rotateY(120deg) translateZ(350px);
}
.box div:nth-child(4) {
background-image: url(./imgs/4.jpg);
z-index: 3;
transform: rotateY(180deg) translateZ(350px);
}
.box div:nth-child(5) {
background-image: url(./imgs/5.jpg);
z-index: 2;
transform: rotateY(240deg) translateZ(350px);
}
.box div:nth-child(6) {
background-image: url(./imgs/6.jpg);
transform: rotateY(300deg) translateZ(350px);
z-index: 1;
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
本文地址：https://blog.csdn.net/fackyoufack/article/details/112281573