小球跟随鼠标移动效果


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        #list li {
            /*width: 30px;*/
            /*height: 30px;*/
            list-style: none;
            /*border-radius: 50%;*/
            /*background: deeppink;*/
            position: absolute;
        }
        div{
            width: 50px;
            height: 50px;
            border-radius: 60%;
            text-align: center;
            /*padding-top: 6px;*/


        }
        .xin{
            /*margin-top:200px;*/
            /*margin-left: 300px;*/
            /*background: url("aa.jpg") -200px -300px no-repeat;*/
            /*position: relative;*/
            /*z-index: 200;*/
            transform: scale(0.1);
            border: 1px solid red;
        }


        span{
            display: block;
            padding-top: 15px;
        }
        .hua{
            background: #ff1493;
            height: 80px;
            position: absolute;
            transition: all 2s ease;
            /*opacity: 0;*/
            z-index: -1;
        }
        .hua1{
            /*background: url("bb.jpg") -500px -500px no-repeat;*/
        }
        .hua1 img{
            width: 60px;
            height: 60px;
            display: block;
            border-radius: 50%;


        }
        .hua2{
            top: -70px;
        }
        .hua3{
            top: -50px;
            right: -40px;
            transform: rotate(50deg);
        }
        .hua4{
            top: -50px;
            left: -40px;
            transform: rotate(-50deg);
        }
        .hua5{
            top: 10px;
            left: -40px;
            transform: rotate(50deg);
        }
        .hua6{
            top: 10px;
            right: -40px;
            transform: rotate(-50deg);
        }
        .hua7{


            top: 30px;
        }
        .jing{
            height: 300px;
            width: 20px;
            background: #39f409;
            left: 15px;
            position: relative;
            z-index: -2;
            /*opacity: 0;*/
        }
        .ye1{
            width: 30px;
            height: 150px;
            background: green;
            position: relative;
            top: -280px;
            left: -50px;
            transform: rotate(-50deg);
            z-index: -4;
            /*opacity: 0;*/
        }
        .ye2{
            width: 30px;
            height: 150px;
            background: green;
            position: relative;
            top: -380px;
            right: -70px;
            transform: rotate(50deg);
            z-index: -4;
            /*opacity: 0;*/
        }
    style>
head>
<body>
<ul id="list">
    <li>
        <div class="xin">
            <div class="hua1"><img src="bb.jpg" alt=""/>div>
            <div class="hua2 hua">div>
            <div class="hua3 hua">div>
            <div class="hua4 hua">div>
            <div class="hua5 hua">div>
            <div class="hua6 hua">div>
            <div class="hua7 hua">div>
            <div class="jing">div>
            <div class="ye1">div>
            <div class="ye2">div>
        div>
    li>
    <li>
        <div class="xin">
            <div class="hua1"><img src="bb.jpg" alt=""/>div>
            <div class="hua2 hua">div>
            <div class="hua3 hua">div>
            <div class="hua4 hua">div>
            <div class="hua5 hua">div>
            <div class="hua6 hua">div>
            <div class="hua7 hua">div>
            <div class="jing">div>
            <div class="ye1">div>
            <div class="ye2">div>
        div>
    li>
    <li>
        <div class="xin">
            <div class="hua1"><img src="bb.jpg" alt=""/>div>
            <div class="hua2 hua">div>
            <div class="hua3 hua">div>
            <div class="hua4 hua">div>
            <div class="hua5 hua">div>
            <div class="hua6 hua">div>
            <div class="hua7 hua">div>
            <div class="jing">div>
            <div class="ye1">div>
            <div class="ye2">div>
        div>
    li>
    <li>
        <div class="xin">
            <div class="hua1"><img src="bb.jpg" alt=""/>div>
            <div class="hua2 hua">div>
            <div class="hua3 hua">div>
            <div class="hua4 hua">div>
            <div class="hua5 hua">div>
            <div class="hua6 hua">div>
            <div class="hua7 hua">div>
            <div class="jing">div>
            <div class="ye1">div>
            <div class="ye2">div>
        div>
    li>
    <li>
        <div class="xin">
            <div class="hua1"><img src="bb.jpg" alt=""/>div>
            <div class="hua2 hua">div>
            <div class="hua3 hua">div>
            <div class="hua4 hua">div>
            <div class="hua5 hua">div>
            <div class="hua6 hua">div>
            <div class="hua7 hua">div>
            <div class="jing">div>
            <div class="ye1">div>
            <div class="ye2">div>
        div>
    li>


ul>
<script>
    var list = document.getElementById('list');
    var lis = list.getElementsByTagName('li');
    document.documentElement.onmousemove = function (event) {
        var e = event || window.event;
        var x = e.clientX;
        var y = e.clientY;
        var m = 0;
        var timer = setInterval(function () {
                lis[m].style.left = x + 'px';
                lis[m].style.top = y + 'px';
                m = m+1;
                if(m>=lis.length){
                    clearTimeout(timer);
                    m = 0;
                }
            }, 50);
    }


script>
body>
html>

你可能感兴趣的:(javaScript,css,鼠标,移动)