1.奔跑小熊
奔跑小熊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
background-color: #000;
}
div{
position: absolute;
width: 200px;
height: 100px;
background: url(img/bear.png) no-repeat;
/* 多个动画之间用逗号隔开 */
animation: bear 1s steps(8) infinite,move 5s forwards;
}
@keyframes bear{
0%{
background-position: 0 0;
}
100%{
background-position: -1600px 0;
}
}
@keyframes move{
0%{
left:0;
}
100%{
left:50%;
margin-left: -100px;
}
}
</style>
<body>
<div></div>
</body>
</html>
2.旋转木马
【旋转木马】萧炎后宫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
/* 近小远大 */
perspective:1400px;
}
section{
/* 保持3D效果 */
transform-style: preserve-3d;
position: relative;
width: 400px;
height: 170px;
margin: 150px auto;
/* 添加动画 */
animation:rotate 13s linear infinite;
background: url(img/中间.png ) no-repeat;
/* Background-size属性：改变背景图片大小 */
}
/* 鼠标放上去动画停止 */
section:hover{
animation-play-state: paused;
}
@keyframes rotate{
0%{
transform: rotateY(0deg);
}
100%{
transform: rotateY(360deg);
}
}
section div{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
section div:nth-child(1){
background:url(img/1662791246215.png) no-repeat;
/* 第一个旋转0°,剩下的每张旋转60° */
transform: rotateY(0deg)translateZ(400px);
}
section div:nth-child(2){
background:url(img/1662878143384.png) no-repeat;
transform: rotateY(60deg) translateZ(400px);
}
section div:nth-child(3){
background:url(img/1667109864158.png) no-repeat;
transform: rotateY(120deg) translateZ(400px);
}
section div:nth-child(4){
background:url(img/IMG_20221023_141701.jpg) no-repeat;
transform: rotateY(180deg) translateZ(400px);
}
section div:nth-child(5){
background:url(img/IMG_20221106_221334.png) no-repeat;
transform: rotateY(240deg) translateZ(400px);
}
section div:nth-child(6){
background:url(img/IMG_20221204_215521.jpg) no-repeat;
transform: rotateY(300deg) translateZ(400px);
}
</style>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
素材：
3.翻转卡
翻转卡
.photo-container {
perspective: 1200px; /* 透视视图 */
float:left;
width:45%;
}
.rotate-box {
position:relative;
transform-style: preserve-3d; /* 3D 转换 */
transition:1s ease; /* 转换效果持续 1秒 */
margin:10%;
}
/* 背面文本样式，透明背景，并设置默认为反转180度，
其次要将图像置于图像的背面，所以这里我们利用z轴来控制，CSS代码如下： */
.text {
position:absolute;top:0;
width: 400px;
height: 510px;;
transform: rotateY(180deg) translateZ(1px); /* 反转180度 并设置z轴让其置于图片背面 */
color:#666;
text-align:center;
opacity:.06;
background:rgba(255,255,255,.9);
transition: 1s opacity;
}
/* 使用Hover来触发动画 */
.photo-container:hover .rotate-box{
transform: rotateY(-180deg);
}
.photo-container:hover .text{opacity:1}
/* 通过伪元素（:after）给图像添加一个透视阴影，使整体更有3D立体感觉。 */
.rotate-box:after {
content:' ';
display:block;
width:100%;
height:7vw;/* vw是移动设计备窗体单位 */
transform:rotateX(90deg);
background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%); /* radial-gradient 是径向渐变 */
}
.rotate-box img{
width:400px ;height: 510px;
}
4.3D动态导航
动态导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
ul{
margin: 100px; auto;
list-style: none;
}
a{
text-decoration: none;
color:#fff;
}
ul li{
float: left;
margin: 0 10px;
width: 120px;
height: 35px;
/* box旋转也需要透视效果,因此给父级加上： */
perspective: 1300px;
}
.box{
transform-style: preserve-3d;
position: relative;
width: 100%;
height: 100%;
transition: all .8s;
}
.box:hover{
transform:rotateX(90deg) ;
}
.front,.bottom{
position: absolute;
left:0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 35px;
}
.front{
background-color: pink;
transform: translateZ(1px);
z-index: 1;
/* 向前移动,把中心点放在中心 ，z轴向前为正*/
transform: translateZ(17.5px);
}
.bottom{
background-color: rgb(7, 78, 233);
/* 如果是多种样式,移动必须写在最前面 */
transform: translateY(17.5px) rotateX(-90deg);
}
</style>
<body>
<ul>
<li>
<div class="box">
<div class="front"><a href="#">食品</a></div>
<div class="bottom"><a href="#">点击</a></div>
</div>
</li>
<li>
<div class="box">
<div class="front"><a href="#">食品</a></div>
<div class="bottom"><a href="#">点击</a></div>
</div>
</li>
<li>
<div class="box">
<div class="front"><a href="#">食品</a></div>
<div class="bottom"><a href="#">点击</a></div>
</div>
</li>
<li>
<div class="box">
<div class="front"><a href="#">食品</a></div>
<div class="bottom"><a href="#">点击</a></div>
</div>
</li>
</ul>
</body>
</html>