HTML动画

最新推荐文章于 2024-02-15 09:15:57 发布

云殇

最新推荐文章于 2024-02-15 09:15:57 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/m0_58811578/article/details/117753417

版权

首先所有动画都应该与容器元素关联

样式：

应该通过 style = "position: relative" 创建容器元素。

应该通过 style = "position: absolute" 创建动画元素。

JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。

这种变化通过一个计数器来调用。当计数器间隔很小时，动画看上去就是连贯的。

基础代码是：

var id = setInterval(frame, 5);

function frame() {
    if (/* 测试是否完成 */) {
        clearInterval(id);
    } else {
         /* 改变元素样式的代码 */
    }
}

使用 JavaScript 创建动画

function myMove() {
    var elem =  document.getElementById("animate"); 
    var pos = 0;
    var id = setInterval(frame, 5);
     function frame() {
        if (pos ==  350) {
             clearInterval(id);
        } else {
             pos++; 
             elem.style.top = pos + 'px'; 
             elem.style.left = pos + 'px'; 
        }
     }
}

1、HTML5 SVG 3D空间模型可拖拽缩放

这是一个基于HTML和SVG的3D空间模型，这个3D模型提供了x、y、z三个坐标轴以及一个平面网格。我们可以对这个HTML5 3D模型进行缩放、拖拽、翻转等操作，这些操作可以通过鼠标，也可以通过快捷键，非常方便。

列如实现一个3D立体旋转动画

有一种视觉，看上去就很舒服，你还阔以把女朋友照片放上去，旋转观赏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>照片</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
    /*背景设置为黑色*/
        body{
            background-image: url("./美好.jpg");
            background-size: cover;
        }
    /*设置相册盒子大小、位置、外边框、旋转参数*/
        #photo_box{
            width: 280px;
            height: 400px;
            position: fixed;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
            margin: 200px auto;
            display: none;
            transform-style: preserve-3d;/*表示所有子元素在3D空间中呈现*/
            transform: rotateX(-5deg) rotateY(0deg);
            animation: run 15s linear infinite;/*循环  匀速执行run动画，每30秒执行一次*/
        }
    
    /*设置图像大小、边框、圆角、位置*/
        #photo_box img{
            width: 200px;
            height: 300px;
            border: 1px solid #ccc;
            border-radius: 10px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 90%;
        }
    
    #photo_box img:nth-child(1){
            transform: rotateY(0deg) translateZ(500px);
        }
        #photo_box img:nth-child(2){
            transform: rotateY(30deg) translateZ(500px);
        }
        #photo_box img:nth-child(3){
            transform: rotateY(60deg) translateZ(500px);
        }
        #photo_box img:nth-child(4){
            transform: rotateY(90deg) translateZ(500px);
        }
        #photo_box img:nth-child(5){
            transform: rotateY(120deg) translateZ(500px);
        }
        #photo_box img:nth-child(6){
            transform: rotateY(150deg) translateZ(500px);
        }
        #photo_box img:nth-child(7){
            transform: rotateY(180deg) translateZ(500px);
        }
        #photo_box img:nth-child(8){
            transform: rotateY(210deg) translateZ(500px);
        }
        #photo_box img:nth-child(9){
            transform: rotateY(240deg) translateZ(500px);
        }
        #photo_box img:nth-child(10){
            transform: rotateY(270deg) translateZ(500px);
        }
        #photo_box img:nth-child(11){
            transform: rotateY(300deg) translateZ(500px);
        }
        #photo_box img:nth-child(12){
            transform: rotateY(330deg) translateZ(500px);
        }
    
    
        @keyframes run {
            0%{
                transform: rotateX(0deg) rotateY(0deg);
            }
            25%{
                transform: rotateX(10deg) rotateY(90deg);
            }
            50%{
                transform: rotateX(0deg) rotateY(180deg);
            }
            75%{
                transform: rotateX(-10deg) rotateY(270deg);
            }
            100%{
                transform: rotateX(0deg) rotateY(360deg);
            }   
        }
        </style>
</head>
<body>
    <div id="photo_box">
        <img src="./01.jpg">
        <img src="./2.jpg">
        <img src="./03.jpg">
        <img src="./4.jpg">
        <img src="./05.jpg">
        <img src="./6.jpg">
        <img src="./7.jpg">
        <img src="./8.jpg">
        <img src="./9.jpg">
        <img src="./10.jpg">
        <img src="./11.jpg">
        <img src="./12.jpg"
    </div>
    </body>
    <script>
        function ShowLayer(){         //延迟出现，不然会出现加载空白情况
            document.getElementById("photo_box").style.display="block";
        }
        setTimeout("ShowLayer()",500);  
    </script>
</html>