js+css3简单图标浮动动画效果

最新推荐文章于 2024-03-28 20:53:48 发布

_cnjm

最新推荐文章于 2024-03-28 20:53:48 发布

阅读量607

点赞数

分类专栏： css 文章标签：网页动画 CSS3 JavaScript 交互设计过渡效果

本文链接：https://blog.csdn.net/weixin_42998707/article/details/119826077

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

纯属尝试一下

(⊙o⊙)… 本人目前就只能想到这样做还有点感觉（但肯定是很菜的做法的。。。）

看下效果图，感觉细调一些参数，应该会更适合一点

效果图

一开始想到直接 animation，不过不知道切换动画时如何平滑些，就加了些 js。

以下是代码，过程注释都在里面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #000;
        }

        .con {
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 2;
            transform: translateX(-50%) translateY(-50%);
            height: 80px;
            width: 740px;
            display: flex;
            justify-content: space-between;
        }

        .con .card_item {
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            cursor: pointer;
        }

        .con .card_item img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="con">
        <div class="card_item item_1" style="opacity: 0.35;transform: scale(0.8) translateY(0px);">
            <img src="./static/images/chweb_home.png" title="主页">
        </div>
        <div class="card_item item_2" style="opacity: 0.35;transform: scale(0.8) translateY(0px);">
            <a href="" target="_blank"><img src="./static/images/chweb_github.png" title="github"></a>
        </div>
        <div class="card_item item_3" style="opacity: 0.35;transform: scale(0.8) translateY(0px);">
            <a href="" target="_blank"><img src="./static/images/chweb_gitee.png" title="gitee"></a>
        </div>
        <div class="card_item item_4" style="opacity: 0.35;transform: scale(0.8) translateY(0px);">
            <a href="" target="_blank"><img src="./static/images/chweb_blog.png" title="文档"></a>
        </div>
        <div class="card_item item_5" style="opacity: 0.35;transform: scale(0.8) translateY(0px);">
            <a href="" target="_blank"><img src="./static/images/chweb_csdn.png" title="csdn"></a>
        </div>
        <div class="card_item item_6" style="opacity: 0.35;transform: scale(0.8) translateY(0px);">
            <img src="./static/images/chweb_email.png" title="邮箱">
        </div>
        <div class="card_item item_7" style="opacity: 0.35;transform: scale(0.8) translateY(0px);">
            <img src="./static/images/chweb_more.png" title="更多">
        </div>
    </div>

    <script>
        // 一些边界量 每次变动的量 感觉调一下可以顺畅点
        const conLength = 7;
        const opacityS = 0.35;
        const opacityO = 0.51;
        const opacityE = 0.85;
        const scaleS = 0.8;
        const scaleO = 0.88;
        const scaleE = 1;
        const topS = 0;
        const topO = -8;
        const topE = -20;

        const TIME = 32; //间隔 
        // const regS = /scale\((.*?=)\)/;
        const regS = /(?<=scale\().*?(?=\))/;
        const regT = /(?<=translateY\().*?(?=px\))/;

        let oCardItem = document.querySelectorAll(".card_item");
        let contentNum = null;

        listenerCon();

        // requestAnimationFrame应该也可以吧
        setInterval(() => {
            // 动画效果
            animation();
        }, TIME)

        // 得到当前鼠标移入的是哪个
        function listenerCon() {
            oCardItem.forEach((item, index) => {
                item.onmouseenter = function(e) {
                    contentNum = index;
                }
                item.onmouseleave = function(e) {
                    contentNum = null;
                }
            })
        }

        function animation() {
            oCardItem.forEach((item, index) => {

                // 获取一些需要的值
                // 其实就是定时每次改动 opacity scale translateY 只不过每次改动都是在原基础
                let styleText = item.style.transform || item.style.webkitTransform;
                let opacity = Number(item.style.opacity);

                let scale = Number(styleText.match(regS)[0]);
                let newScale = scaleS;
                let trans = Number(styleText.match(regT)[0]);
                let newtrans = topS;

                if (contentNum !== null) {
                    // 当前的动画
                    if (contentNum === index) {
                        if (opacity < opacityE) {
                            item.style.opacity = (opacity + 0.025) >= opacityE ? opacityE : (opacity + 0.025);
                        }
                        if (scale < scaleE || trans > topE) {
                            newScale = (scale + 0.01) >= scaleE ? scaleE : (scale + 0.01);
                            newtrans = (trans - 1) <= topE ? topE : (trans - 1);
                            item.style.transform = `scale(${newScale}) translateY(${newtrans}px)`;
                        }
                        return;
                    }
                    // 左右两边的
                    if (((contentNum >= 1) && (contentNum - 1) === index) || ((contentNum <= (conLength - 2)) && (contentNum + 1) === index)) {
                        if (opacity > opacityO) {
                            item.style.opacity = (opacity - 0.025) <= opacityO ? opacityO : (opacity - 0.025);
                        } else if (opacity < opacityO) {
                            item.style.opacity = (opacity + 0.025) >= opacityO ? opacityO : (opacity + 0.025);
                        }
                        if (scale < scaleO || trans > topO) {
                            newScale = (scale + 0.01) >= scaleO ? scaleO : (scale + 0.01);
                            newtrans = (trans - 0.5) <= topO ? topO : (trans - 0.5);
                            item.style.transform = `scale(${newScale}) translateY(${newtrans}px)`;
                        } else if (scale > scaleO || trans < topO) {
                            newScale = (scale - 0.01) <= scaleO ? scaleO : (scale - 0.01);
                            newtrans = (trans + 0.5) >= topO ? topO : (trans + 0.5);
                            item.style.transform = `scale(${newScale}) translateY(${newtrans}px)`;
                        }
                        return;
                    }
                }
                // 非核心或者鼠标全部不在时
                if (opacity > opacityS) {
                    item.style.opacity = (opacity - 0.025) <= opacityS ? opacityS : (opacity - 0.025);
                }
                if (scale > scaleS || trans < topS) {
                    newScale = (scale - 0.01) <= scaleS ? scaleS : (scale - 0.01);
                    newtrans = (trans + 1) >= topS ? topS : (trans + 1);
                    item.style.transform = `scale(${newScale}) translateY(${newtrans}px)`;
                }
            })
        }
    </script>
</body>

</html>
</html>

代码从项目中搬出来之后居然感觉卡了一些

_cnjm

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js+css3简单图标浮动动画效果

纯属尝试一下(⊙o⊙)… 本人目前就只能想到这样做还有点感觉（但肯定是很菜的做法的。。。）看下效果图一开始想到直接 animation，不过不知道切换动画时如何平滑些，就加了些 js。以下是代码，过程注释都在里面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I
复制链接

扫一扫

专栏目录