前端css+jquery记一个特效动画

本文介绍: 屏幕录制 2023-05-06 233406。

效果 录制

点击链接可以在线看效果

屏幕录制 2023-05-07 123330

基于以下工具 实现

css（主要代码）

jquery（一点点代码）

animate.css（一点点代码）

代码

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <style>
        html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            background-color: #000;
            /* perspective: 800px; */
        }
        *{
            font-family: "楷体";
        }
        .box-main{
            position: absolute;
            top: 100px;
            left: calc(50% - 100px);
            width: 100px;
            height: 100px;
            padding: 50px;
            cursor: pointer;
        }
        .box{
            width: 100px;
            height: 100px;
            transform-style: preserve-3d;
            transform: rotateX(20deg) rotateY(20deg) rotateZ(0deg);
            animation: rot 1000s linear;
            pointer-events: none;
        }
        @keyframes rot{
            0% {
                /* transform: rotateX(20deg) rotateY(20deg) rotateZ(0deg); */
            }
            100% {
                transform: rotateX(0) rotateY(60000deg) rotateZ(160000deg);
            }
        }
        .box-item{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            opacity: .8;
            transition: .3s;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            box-sizing: border-box;
        }
        .b1{
            transform: translateX(-50px) rotateY(90deg);
            background: #f1707d;
        }
        .box.hover .b1{
            transform: translateX(-50px) rotateY(90deg) translateZ(-60px);
            background: #f1707d;
        }
        .b2{
            transform: translateX(50px) rotateY(90deg);
            background: #f1ccb8;
        }
        .box.hover .b2{
            transform: translateX(50px) rotateY(90deg) translateZ(60px);
            background: #f1ccb8;
        }
        .b3{
            transform: translateZ(50px);
            background: #c490a0;
        }
        .box.hover .b3{
            transform: translateZ(50px) translateZ(60px);
            background: #c490a0;
        }
        .b4{
            transform: translateZ(-50px);
            background: #cb8e85;
        }
        .box.hover .b4{
            transform: translateZ(-50px) translateZ(-60px);
            background: #cb8e85;
        }
        .b5{
            transform: translateY(-50px) rotateX(90deg);
            background: #ddff95;
        }
        .box.hover .b5{
            transform: translateY(-50px) rotateX(90deg) translateZ(60px);
            background: #ddff95;
        }
        .b6{
            transform: translateY(50px) rotateX(90deg);
            background: #b8f1ed;
        }
        .box.hover .b6{
            transform: translateY(50px) rotateX(90deg) translateZ(-60px);
            background: #b8f1ed;
        }
        .mini-item{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background: transparent;
        }
        .box.hover .mini-item{
            width: 50px;
            height: 50px;
            transform: translateZ(0);
            background: #ff4040;
        }
        .box.hover .mini-item.b1{
            transform: translateZ(10px);
        }
        .box.hover .mini-item.b2{
            transform: translateZ(20px);
        }
        .box.hover .mini-item.b3{
            transform: translateZ(30px);
        }
        .box.hover .mini-item.b4{
            transform: translateZ(0px);
        }
        .box.hover .mini-item.b5{
            transform: translateZ(-10px);
        }
        .box.hover .mini-item.b6{
            transform: translateZ(-20px);
        }
        /* 字符弹幕 */
        .bottom-key{
            position: fixed;
            bottom: 10px;
            font-size: 18px;
            font-weight: bold;
            color: cyan;
            transition: 1s;
        }
        .button-control{
            padding: 10px;
        }
        .button-control>input[type="button"]{
            border: 2px solid #ffff97;
            color: #ffff97;
            background: transparent;
            cursor: pointer;
            opacity: .2;
            transition: 1s;
        }
        .button-control>input[type="button"]:hover{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="button-control">
        <input type="button" value="自动/手动弹幕" class="toggle-run">
        <input type="button" value="边框显隐" class="toggle-border">
    </div>
    <!-- 容器 -->
    <div class="box-main">
        <div class="box">
            <!-- 正方体6面 -->
            <div class="box-item b1">
            </div>
            <div class="box-item b2">
            </div>
            <div class="box-item b3">
            </div>
            <div class="box-item b4">
            </div>
            <div class="box-item b5">
            </div>
            <div class="box-item b6">
            </div>
    
            <!-- hover时，正方体内部浮现元素 -->
            <div class="box-item b1 mini-item"></div>
            <div class="box-item b2 mini-item"></div>
            <div class="box-item b3 mini-item"></div>
            <div class="box-item b4 mini-item"></div>
            <div class="box-item b5 mini-item"></div>
            <div class="box-item b6 mini-item"></div>
        </div>
    </div>
</body>
<script>
    const strs = 'qwertyuioplkjhgfdsazxcvbnm1234567890'//字符提取库
    const doWidth = $(document).width()//屏幕宽度
    const doHeight = $(document).height()//屏幕高度
    const colorlist = ['#ff4040', '#fffdc9', '#04efff', '#000']
    let isBorder = true//魔方边框 6个面
    let isAuto = true//true:自动运行弹幕 false:手动运行弹幕
    let autoTimer = null//自动弹幕定时器

    setInterval(()=>{
        // 魔方展开/闭合
        $('.box').toggleClass('hover')

        $('.box-item').css({
            // 随机边框颜色
            border: `${isBorder?4:0}px solid ${
                colorlist[parseInt(Math.random()*colorlist.length)]
            }`
        })
    }, 2000)
    
    /** 魔方拖拽 */
    $('.box-main').on('mousedown',(e)=>{
        const offX = e.offsetX
        const offY = e.offsetY
        $(document).on('mousemove',(e)=>{
            $('.box-main').css({
                left: e.pageX-offX,
                top: e.pageY-offY,
            
            })
        })
        $(document).on('mouseup',()=>{
            $(document).off('mousemove mouseup')
        })
    })
    
    /** 按钮-边框显隐 */
    $('.toggle-border').on('click', ()=>{
        isBorder = !isBorder
        console.log(`当前魔方边框显示状态：${isBorder?'显示':'隐藏'}`)
    })
    /** 按钮-切换弹幕方式 */
    $('.toggle-run').on('click', ()=>{
        isAuto = !isAuto
        buttonClick()
    })
    buttonClick()

    /** 切换弹幕方式 */
    function buttonClick(){
        console.log(`当前弹幕模式：${isAuto?'自动弹幕':'手动弹幕(键盘键入)'}`)
        if(isAuto){
            auto()
        }else{
            autoNo()
        }
    }
    /** 启用自动 */
    function auto(){
        $(document).off('keydown')

        autoTimer = setInterval(()=>{
            run(strs[parseInt(Math.random()*strs.length)])
        }, 100)
    }
    /** 启用手动 */
    function autoNo(){
        clearInterval(autoTimer)

        $(document).on('keydown', (e)=>{
            run(e.key)
        })
    }
    // 触发弹幕
    function run(key){
        let bottomBall = $('<div class="bottom-key"></div>')
            .html(key)
            .css({
                bottom: Math.random()*300,
                left: Math.random()*doWidth
            })
            .appendTo('body')
            .addClass('animate__animated animate__bounceInDown')//弹入
            
        setTimeout(()=>{
            $(bottomBall)
                .addClass('animate__animated animate__fadeOutDown')//变淡弹出
                // .addClass('animate__zoomOutDown')//变小弹出
                
        }, 2000)
        
        setTimeout(()=>{
            $(bottomBall).remove()
        }, 3000)
    }
    
</script>
</html>