Question

我是新手制作网页的东西，所以提前抱歉为我的新人......反正

我用css创建了一个SVG动画，

<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 271.25 232.5" style="enable-background:new 0 0 271.25 232.5;"  xml:space="preserve">



<defs>
<style type="text/css">

    .st0{fill:#fff;stroke:#000000;stroke-width:8;stroke-miterlimit:5;}


    .st0 {
        stroke-dasharray: 800;
        stroke-dashoffset: 0;
        -webkit-animation: dash 2s linear forwards;
        -o-animation: dash 2s linear forwards;
        -moz-animation: dash 2s linear forwards;
        animation: dash 2s linear forwards;

    }

    #logo {
    cursor:pointer;
    }

    #logo:hover .st0{
    fill:#000; 

    transition: .8s;

    }

    #logo.clickit .st0 {
        fill: grey;
        stroke: grey;


    }

    @-webkit-keyframes dash {
        from {
            stroke-dashoffset: 800;
        }
        to {
            stroke-dashoffset: 0;
        }
    }

    @-moz-keyframes dash {
        from {
            stroke-dashoffset: 800;
        }
        to {
            stroke-dashoffset: 0;
        }
    }

    @-o-keyframes dash {
        from {
            stroke-dashoffset: 800;
        }
        to {
            stroke-dashoffset: 0;
        }

    }


</style>

    <script type="text/javascript">

    var clicker = document.querySelector('#logo');

    clicker.addEventListener('click', function (){

        this.classList.toggle('clickit');

    });

</script>

</defs>



<path class="st0" d="M14.872,26.016c0.347,1.109,0.539,1.82,0.79,2.511c12.477,34.228,24.958,68.452,37.44,102.679
c10.294,28.223,20.59,56.445,30.883,84.67c0.501,1.373,0.697,2.684,2.854,2.678c30.238-0.082,60.478-0.068,90.716-0.02
c1.515,0.002,2.172-0.516,2.715-1.867c3.9-9.707,7.819-19.406,11.884-29.045c0.846-2.006,0.83-3.67,0.09-5.686
c-18.811-51.182-37.568-102.383-56.285-153.598c-0.636-1.74-1.439-2.373-3.355-  2.369C94.2,26.031,55.798,26.016,17.396,26.016
C16.652,26.016,15.908,26.016,14.872,26.016z M202.77,162.303c18.564-45.643,36.941-90.824,55.349-     136.08
c-35.402,0-70.482,0-105.825,0C169.125,71.6,185.857,116.709,202.77,162.303z"/>
</svg>

我喜欢能够在我的网站加载/刷新时运行这个动画，但是动画播放并停留在页面上而不是重定向到我测试的一些基本的three.js代码......

索引文件看起来像这样......

<!DOCTYPE html>

<html lang="en">

<html>

<head>
<title>TEST</title>
<script src="../build/three.min.js"></script>
<script src="../build/jquery-1.9.0.js"></script>
<meta charset="UTF-8">
<meta name="description" content="coolstuff">
<meta name="keywords" content="Keywords, blah">
<meta name="author" content="My name">
<style>
    body{
        margin: 0;
        overflow: hidden;   
}

</style>
</head>
<body>

<div style="text-align:center;padding:150px 0;">

    <object>
        <embed src="vlogo.svg" width="30%" height="30%">
    </object>

</div>

<div id="WebGL-output">
</div>

<script type="text/javascript">

$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
function() {

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, window.innerWidth /window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();

renderer.setClearColor(0xEEEEEE, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;

sphereGeometry = new THREE.SphereGeometry(10, 20, 20);
sphereMaterial = new THREE.MeshLambertMaterial({wireframe: true, color: 0x000000});
sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;

scene.add(sphere);


camera.position.x = -30;
camera.position.y =  40;
camera.position.z = -30;
camera.lookAt(scene.position);


$("#Webgl-output").append(renderer.domElement);


render();


function render(){

    sphere.rotation.x += 0.02;

    requestAnimationFrame(render);
    renderer.render(scene, camera);

}


});


</script>
</body>
</html>

需要所有帮助 - 提前感谢！

css动画加载到主页

0 个答案: