怦然心动画轴

最新推荐文章于 2023-02-07 15:46:11 发布

冰原狼

最新推荐文章于 2023-02-07 15:46:11 发布

阅读量343

点赞数 3

分类专栏： js 文章标签： js css 动画

本文链接：https://blog.csdn.net/qq_38025939/article/details/89365800

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

怦然心动

效果实例：https://kankan.fun/assets/love/
代码下载：https://github.com/kankanol1/huajuan.git

引入jQuery库

Staticfile CDN:

<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>

百度 CDN:

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

    <script src="./js/jquery-1.12.4.js"></script>

也可不引入，自己编写动画函数.

绘制移动svg图片

    heartL = [];
    for (let i=0;i<10;i++){
        let oImg = document.createElement('img');
        oImg.src = imgL[i%ingL.length];
        oImg.calssName = 'fImg';
        oImg.style.left = Math.random() * cW + "px";
        oImg.style.top = Math.random() * cH + "px";
        oImg.style.position = 'fixed';
        oImg.style.width = 50+ 'px';
        oImg.style.width = 50 + 'px';
        oImg.style.zIndex = 10;
        oImg.setAttribute('dataX',(0.5-Math.random()) * speed );
        oImg.setAttribute('dataY',(0.5-Math.random()) * speed );

        heartL.push(oImg);
        document.querySelector('body').appendChild(oImg);
    }

然后设置动画函数

  setInterval(function(){
        for(let i=0;i<heartL.length;i++){
            // console.log(parseFloat(heartL[i].style.left),parseFloat(heartL[i].getAttribute('dataX')));
            heartL[i].style.left =  parseFloat(heartL[i].style.left) + parseFloat(heartL[i].getAttribute('dataX'))+ 'px';
            heartL[i].style.top =  parseFloat(heartL[i].style.top)+ parseFloat(heartL[i].getAttribute('dataY')) + 'px';
            if(parseFloat(heartL[i].style.left)<0 || parseFloat(heartL[i].style.left)>cW){
                heartL[i].setAttribute('dataX',- parseFloat(heartL[i].getAttribute('dataX')));
            }
            if(parseFloat(heartL[i].style.top)<0 || parseFloat(heartL[i].style.top)>cH){
                heartL[i].setAttribute('dataY',- parseFloat(heartL[i].getAttribute('dataY')));
            }

        }

    },100/6);

怦然心动样式

/*----------------------------------怦然心动-------------------------------*/
@keyframes kankan {
    0% {width: 30px;}
    25% {width: 70px;}
    100% {width: 30px;}
}

@-webkit-keyframes kankan /* Safari 与 Chrome */ {
    0% {width: 30px;}
    25% {width: 70px;}
    100% {width: 30px;}
}
.change {
    animation: kankan 1s;
    -webkit-animation: kankan 1s;
    animation-iteration-count: infinite;

}

代码下载：https://github.com/kankanol1/huajuan.git

明天的你一定会感谢现在拼命的自己。

冰原狼

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
怦然心动画轴

怦然心动效果实例：https://kankan.fun/assets/love/代码下载：https://github.com/kankanol1/huajuan.git引入jQuery库Staticfile CDN:<head><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"&g...
复制链接

扫一扫