首先，需要准备一个HTML动画文件，这个文件应该包含HTML、CSS和JavaScript代码，并使用相应的标记、样式和脚本来创建动画效果
然后，将这个HTML动画文件保存到你的手机或电脑上
接下来，使用微信的“文件传输助手”功能将这个HTML动画文件发送给自己或者其他人
收到文件后，点击文件名打开HTML动画。微信会自动使用内置浏览器打开这个HTML文件，并在浏览器中显示动画效果
分享几个HTML动画代码
摇摆动画
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8"/>
<title>摇摆动画示例-流星小屋</title>
<meta charset="utf-8" />
<style>
.tank{
width:200px;
height:100px;
margin:100px auto;
border:2px solid blue;
border-radius:0 0 20px 20px;
/*矩形圆角*/
}
.battery{
width:100px;
height:50px;
margin:0px auto;
background-color:cornflowerblue;
border-radius:0 0 50px 50px;
}
.spiale{
width:20px;
height:20px;
border-radius:10px;
background-color:white;
margin:auto;
animation:go 3s infinite linear,gol 300ms infinite linear;
}
.gun{
width:4px;
height:25px;
margin:-2px auto 0px;
background-color:#fff;
transform-origin:top;
animation:go 3s infinite linear;/* 引用 go infinite 无限循环 linear 匀速*/
}
@keyframes gol{
/*4个点*/
0%{box-shadow:0px 50px 0px -7px red,
0px 75px 0px -7px red,
0px 100px 0px -7px red,
0px 125px 0px -7px red;
}
100%{box-shadow:0px 75px 0px -7px red,
0px 100px 0px -7px red,
0px 125px 0px -7px red,
0px 150px 0px -7px red;
}
}
@keyframes go{
0%{transform:rotate(-45deg)}/*-45deg 为-45度*/
50%{transform:rotate(45deg)}
100%{transform:rotate(-45deg)}
}
</style>
</head>
<body>
<div class="tank">
<div class="battery">
<div class="spiale"></div>
<div class="gun"></div>
</div>
</div>
</body>
</html>大风车
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大风车示例-流星小屋</title>
<style>
.mill, .near, .landscape, body {
display: flex;
flex-flow: row wrap;
}
.mill {
justify-content: flex-end;
}
.near, body {
justify-content: center;
}
.mill, body {
align-items: center;
}
.mill-shell {
display: flex;
justify-content: center;
align-items: center;
}
.star:nth-of-type(1) {
left: calc( 50 * 1px);
animation-duration: 1 1s;
}
.star:nth-of-type(2) {
left: calc( 50 * 2px);
animation-duration: 1 2s;
}
.star:nth-of-type(3) {
left: calc( 50 * 3px);
animation-duration: 1 3s;
}
.star:nth-of-type(4) {
left: calc( 50 * 4px);
animation-duration: 1 4s;
}
.star:nth-of-type(5) {
left: calc( 50 * 5px);
animation-duration: 1 5s;
}
.star:nth-of-type(6) {
left: calc( 50 * 6px);
animation-duration: 1 6s;
}
.star:nth-of-type(7) {
left: calc( 50 * 7px);
animation-duration: 1 7s;
}
.star:nth-of-type(8) {
left: calc( 50 * 8px);
animation-duration: 1 8s;
}
.star:nth-of-type(9) {
left: calc( 50 * 9px);
animation-duration: 1 9s;
}
.star:nth-of-type(10) {
left: calc( 50 * 10px);
animation-duration: 1 10s;
}
body {
background: #2a3e4b;
height: 100vh;
}
.landscape {
position: relative;
background: #00adcc;
width: 600px;
height: 400px;
min-width: 600px;
}
.near {
position: relative;
z-index: 20;
border-radius: 50%/100% 100% 0 0;
align-self: flex-end;
background-color: #036e81;
width: 600px;
height: 100px;
}
.far {
position: relative;
bottom: -100px;
z-index: 10;
border-radius: 0% 100% 0% 0%;
align-self: flex-end;
background-color: #068099;
width: 500px;
height: 130px;
}
.mountains {
position: absolute;
width: 150px;
height: 150px;
top: 150px;
bottom: auto;
left: auto;
right: 100px;
background: linear-gradient(135deg, white 10%, transparent 40%);
transform: rotate(45deg);
}
.mountains::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
top: -60px;
bottom: auto;
left: 100px;
right: auto;
background: linear-gradient(135deg, white 10%, transparent 40%);
}
.sky {
position: relative;
background: radial-gradient(white 2%, transparent 0) repeat center/100px 100px, radial-gradient(white 2%, transparent 0) repeat top left/100px 100px;
width: 100%;
height: 150px;
}
.star {
position: absolute;
width: 5px;
height: 5px;
top: 0;
bottom: auto;
left: 100px;
right: auto;
border-radius: 50%;
background: white;
animation: starFall 3s linear infinite;
box-shadow: 0px 0px 5px white;
}
.mill {
width: 60px;
height: 150px;
position: relative;
flex-direction: column;
margin-top: -145px;
}
.mill > div {
z-index: 10;
}
.mill__roof {
width: 60px;
height: 60px;
background: linear-gradient(45deg, #036e81 50%, transparent 0) no-repeat right bottom/50% 60%, linear-gradient(-45deg, #036e81 50%, transparent 0) no-repeat left bottom/50% 60%;
}
.mill-shell {
width: 40px;
height: 90px;
background: #036e81;
}
.mill-shell__window {
position: relative;
width: 15px;
height: 15px;
background: #88eafc;
}
.mill-shell__window::after, .mill-shell__window::before {
content: "";
position: absolute;
width: 2px;
height: 100%;
top: auto;
bottom: auto;
left: calc(50% - 1px);
right: auto;
background: #036e81;
}
.mill-shell__window::before {
position: absolute;
width: 100%;
height: 2px;
top: calc(50% - 1px);
bottom: auto;
left: 0;
right: auto;
}
.mill::after, .mill::before {
content: "";
position: absolute;
width: 110px;
height: 20px;
top: 50px;
bottom: auto;
left: auto;
right: auto;
background: #0490a9;
z-index: 5;
animation: millRun 2s linear infinite;
}
.mill::before {
position: absolute;
width: 20px;
height: 110px;
top: 5px;
bottom: auto;
left: auto;
right: auto;
}
.house {
position: absolute;
width: 35px;
height: 40px;
top: -37px;
bottom: auto;
left: 50px;
right: auto;
background: linear-gradient(55deg, #068099 50%, transparent 0) no-repeat top right/50% 50%, linear-gradient(-55deg, #068099 50%, transparent 0) no-repeat top left/50% 50%, linear-gradient(#068099, #068099) no-repeat bottom center/50% 50%;
transform: rotate(2deg);
}
.three {
position: absolute;
width: 40px;
height: 120px;
top: -100px;
bottom: auto;
left: auto;
right: 150px;
transform: rotate(5deg);
background: linear-gradient(80deg, #036e81 50%, transparent 0) no-repeat top right/50% 60%, linear-gradient(-80deg, #068099 50%, transparent 0) no-repeat top left/50% 60%, linear-gradient(80deg, #036e81 50%, transparent 0) no-repeat center right/50% 70%, linear-gradient(-80deg, #068099 50%, transparent 0) no-repeat center left/50% 70%, linear-gradient(#036e81, #036e81) no-repeat bottom center/20% 70%;
}
.three:nth-of-type(3) {
position: absolute;
width: 40px;
height: 120px;
top: -80px;
bottom: auto;
left: auto;
right: 50px;
transform: rotate(15deg);
}
.three:nth-of-type(1) {
background: linear-gradient(80deg, #068099 50%, transparent 0) no-repeat center right/50% 70%, linear-gradient(-80deg, #068099 50%, transparent 0) no-repeat center left/50% 70%, linear-gradient(#068099, #068099) no-repeat bottom center/20% 70%;
position: absolute;
width: 20px;
height: 50px;
top: -40px;
bottom: auto;
left: 170px;
right: auto;
transform: rotate(5deg);
}
.moon {
position: absolute;
width: 100px;
height: 80px;
top: 20px;
bottom: auto;
left: 50px;
right: auto;
border-radius: 50%;
border-bottom: 15px solid white;
transform: rotate(60deg);
background: rgba(255, 255, 255, 0.3);
}
.moon::after {
content: "";
position: absolute;
width: 120px;
height: 120px;
top: -10px;
bottom: auto;
left: -10px;
right: auto;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
}
.moon::before {
content: "";
position: absolute;
width: 140px;
height: 140px;
top: -20px;
bottom: auto;
left: -20px;
right: auto;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
}
@keyframes millRun {
to {
transform: rotate(90deg);
}
}
@keyframes starFall {
100% {
top: 400px;
opacity: 0;
}
}
</style>
</head>
<body >
<div class="landscape">
<div class="sky">
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="moon"></div>
</div>
<div class="mountains"> </div>
<div class="far">
<div class="three"></div>
<div class="house"></div>
</div>
<div class="near">
<div class="mill">
<div class="mill__roof"></div>
<div class="mill-shell">
<div class="mill-shell__window"></div>
</div>
</div>
<div class="three"> </div>
<div class="three"></div>
</div>
</div>
</body>
</html> 