iphone CSS动画失效

最新推荐文章于 2024-03-15 07:30:00 发布
原创 最新推荐文章于 2024-03-15 07:30:00 发布 · 3.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#减弱动态效果 #动画不起作用 #CSS #prefers-reduced-motion

本文介绍如何解决iOS设备上因减弱动态效果设置导致的弹窗广告动画失效问题，通过媒体查询区分处理，确保动画正常展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

         在项目中需要在支付结果页面加入弹窗广告，并提供动画效果。在参考了animate.css后，将其中的bounceInDown和bounceOutUp提取出来，提取部分如下：

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}

.bounceInDown {
  animation-name: bounceInDown;
}

@keyframes bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  animation-name: bounceOutUp;
}

  使用方式：在需要动画的地方加上animate和相应的动画类即可，例如：

// 添加动画效果
$(".pop_ad_container").addClass("animated bounceInDown");

原始animate.css中的动画，并没有加入兼容性支持。所以针对不同的浏览器要做下兼容性支持：加上厂商前缀，然后将from,to更改为0%，100%：

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;

    -moz-animation-duration: 1s;
    -moz-animation-fill-mode: both;

    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;

    -o-animation-duration: 1s;
    -o-animation-fill-mode: both;
}

@keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);

        -webkit-transform: translate3d(0, -3000px, 0);
        -moz-transform: translate3d(0, -3000px, 0);
        -ms-transform: translate3d(0, -3000px, 0);
        -o-transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);

        -webkit-transform: translate3d(0, 25px, 0);
        -moz-transform: translate3d(0, 25px, 0);
        -ms-transform: translate3d(0, 25px, 0);
        -o-transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);

        -webkit-transform: translate3d(0, -10px, 0);
        -moz-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        -o-transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);

        -webkit-transform: translate3d(0, 5px, 0);
        -moz-transform: translate3d(0, 5px, 0);
        -ms-transform: translate3d(0, 5px, 0);
        -o-transform: translate3d(0, 5px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);

        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);

        -webkit-transform: translate3d(0, -3000px, 0);
        -moz-transform: translate3d(0, -3000px, 0);
        -ms-transform: translate3d(0, -3000px, 0);
        -o-transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);

        -webkit-transform: translate3d(0, 25px, 0);
        -moz-transform: translate3d(0, 25px, 0);
        -ms-transform: translate3d(0, 25px, 0);
        -o-transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);

        -webkit-transform: translate3d(0, -10px, 0);
        -moz-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        -o-transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);

        -webkit-transform: translate3d(0, 5px, 0);
        -moz-transform: translate3d(0, 5px, 0);
        -ms-transform: translate3d(0, 5px, 0);
        -o-transform: translate3d(0, 5px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);

        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
    }
}

@-moz-keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);

        -webkit-transform: translate3d(0, -3000px, 0);
        -moz-transform: translate3d(0, -3000px, 0);
        -ms-transform: translate3d(0, -3000px, 0);
        -o-transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);

        -webkit-transform: translate3d(0, 25px, 0);
        -moz-transform: translate3d(0, 25px, 0);
        -ms-transform: translate3d(0, 25px, 0);
        -o-transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);

        -webkit-transform: translate3d(0, -10px, 0);
        -moz-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        -o-transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);

        -webkit-transform: translate3d(0, 5px, 0);
        -moz-transform: translate3d(0, 5px, 0);
        -ms-transform: translate3d(0, 5px, 0);
        -o-transform: translate3d(0, 5px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);

        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
    }
}

@-o-keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);

        -webkit-transform: translate3d(0, -3000px, 0);
        -moz-transform: translate3d(0, -3000px, 0);
        -ms-transform: translate3d(0, -3000px, 0);
        -o-transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);

        -webkit-transform: translate3d(0, 25px, 0);
        -moz-transform: translate3d(0, 25px, 0);
        -ms-transform: translate3d(0, 25px, 0);
        -o-transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);

        -webkit-transform: translate3d(0, -10px, 0);
        -moz-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        -o-transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);

        -webkit-transform: translate3d(0, 5px, 0);
        -moz-transform: translate3d(0, 5px, 0);
        -ms-transform: translate3d(0, 5px, 0);
        -o-transform: translate3d(0, 5px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);

        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
    }
}

.bounceInDown {
    animation-name: bounceInDown;

    -webkit-animation-name: bounceInDown;
    -moz-animation-name: bounceInDown;
    -o-animation-name: bounceInDown;
}

@keyframes bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0);

        -webkit-transform: translate3d(0, -10px, 0);
        -moz-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        -o-transform: translate3d(0, -10px, 0);
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0);

        -webkit-transform: translate3d(0, 20px, 0);
        -moz-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        -o-transform: translate3d(0, 20px, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);

        -webkit-transform: translate3d(0, -2000px, 0);
        -moz-transform: translate3d(0, -2000px, 0);
        -ms-transform: translate3d(0, -2000px, 0);
        -o-transform: translate3d(0, -2000px, 0);
    }
}

@-webkit-keyframes bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0);

        -webkit-transform: translate3d(0, -10px, 0);
        -moz-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        -o-transform: translate3d(0, -10px, 0);
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0);

        -webkit-transform: translate3d(0, 20px, 0);
        -moz-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        -o-transform: translate3d(0, 20px, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);

        -webkit-transform: translate3d(0, -2000px, 0);
        -moz-transform: translate3d(0, -2000px, 0);
        -ms-transform: translate3d(0, -2000px, 0);
        -o-transform: translate3d(0, -2000px, 0);
    }
}

@-moz-keyframes bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0);

        -webkit-transform: translate3d(0, -10px, 0);
        -moz-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        -o-transform: translate3d(0, -10px, 0);
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0);

        -webkit-transform: translate3d(0, 20px, 0);
        -moz-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        -o-transform: translate3d(0, 20px, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);

        -webkit-transform: translate3d(0, -2000px, 0);
        -moz-transform: translate3d(0, -2000px, 0);
        -ms-transform: translate3d(0, -2000px, 0);
        -o-transform: translate3d(0, -2000px, 0);
    }
}

@-o-keyframes bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0);

        -webkit-transform: translate3d(0, -10px, 0);
        -moz-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        -o-transform: translate3d(0, -10px, 0);
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0);

        -webkit-transform: translate3d(0, 20px, 0);
        -moz-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        -o-transform: translate3d(0, 20px, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);

        -webkit-transform: translate3d(0, -2000px, 0);
        -moz-transform: translate3d(0, -2000px, 0);
        -ms-transform: translate3d(0, -2000px, 0);
        -o-transform: translate3d(0, -2000px, 0);
    }
}

.bounceOutUp {
    animation-name: bounceOutUp;

    -moz-animation-name: bounceOutUp;
    -webkit-animation-name: bounceOutUp;
    -o-animation-name: bounceOutUp;

}

       经过兼容性支持后，大部分手机里的弹窗广告动画都是正常的。但是有个iphone 6弹窗广告始终X不掉，而且是广告是直接显示出来，没有动画效果。猜测应该是动画的问题，联想到就他的一部手机是这样，查看IOS系统设置，发现开启了"减弱动态效果"。开启这个效果后，所有的动画都不会展示。

        针对这个问题需要利用@Media媒体查询区分处理，开启"减弱动态效果"的手机，直接展示最终画面，去掉动画，其余的仍按照原来的方式处理。

/**针对设置了减弱效果的CSS设置 start*/
@media screen and (prefers-reduced-motion: reduce) {
    .animated {
        animation: unset !important;
        transition: none !important;
    }

    .bounceInDown {
        opacity: 1;
        transform: translate3d(0, 0, 0);

        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
    }

    .bounceOutUp {
        display: none;
    }

    .pop_ad_background_hide{
        display: none;
    }
}

@media screen and (prefers-reduced-motion) {
    .animated {
        animation: unset !important;
        transition: none !important;
    }

    .bounceInDown {
        opacity: 1;
        transform: translate3d(0, 0, 0);

        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
    }

    .bounceOutUp {
        display: none;
    }

    .pop_ad_background_hide{
        display: none;
    }
}
/**针对设置了减弱效果的CSS设置 end*/

没有设置减弱动态效果的，就还是原来的写法：

/**针对没有设置的减弱效果的CSS设置*/
@media screen and (prefers-reduced-motion: no-preference) {
    .animated {
        animation-duration: 1s;
        animation-fill-mode: both;

        -moz-animation-duration: 1s;
        -moz-animation-fill-mode: both;

        -webkit-animation-duration: 1s;
        -webkit-animation-fill-mode: both;

        -o-animation-duration: 1s;
        -o-animation-fill-mode: both;
    }

    @keyframes bounceInDown {
        0%,
        60%,
        75%,
        90%,
        100% {
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }

        0% {
            opacity: 0;
            transform: translate3d(0, -3000px, 0);

            -webkit-transform: translate3d(0, -3000px, 0);
            -moz-transform: translate3d(0, -3000px, 0);
            -ms-transform: translate3d(0, -3000px, 0);
            -o-transform: translate3d(0, -3000px, 0);
        }

        60% {
            opacity: 1;
            transform: translate3d(0, 25px, 0);

            -webkit-transform: translate3d(0, 25px, 0);
            -moz-transform: translate3d(0, 25px, 0);
            -ms-transform: translate3d(0, 25px, 0);
            -o-transform: translate3d(0, 25px, 0);
        }

        75% {
            transform: translate3d(0, -10px, 0);

            -webkit-transform: translate3d(0, -10px, 0);
            -moz-transform: translate3d(0, -10px, 0);
            -ms-transform: translate3d(0, -10px, 0);
            -o-transform: translate3d(0, -10px, 0);
        }

        90% {
            transform: translate3d(0, 5px, 0);

            -webkit-transform: translate3d(0, 5px, 0);
            -moz-transform: translate3d(0, 5px, 0);
            -ms-transform: translate3d(0, 5px, 0);
            -o-transform: translate3d(0, 5px, 0);
        }

        100% {
            transform: translate3d(0, 0, 0);

            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
        }
    }

    @-webkit-keyframes bounceInDown {
        0%,
        60%,
        75%,
        90%,
        100% {
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }

        0% {
            opacity: 0;
            transform: translate3d(0, -3000px, 0);

            -webkit-transform: translate3d(0, -3000px, 0);
            -moz-transform: translate3d(0, -3000px, 0);
            -ms-transform: translate3d(0, -3000px, 0);
            -o-transform: translate3d(0, -3000px, 0);
        }

        60% {
            opacity: 1;
            transform: translate3d(0, 25px, 0);

            -webkit-transform: translate3d(0, 25px, 0);
            -moz-transform: translate3d(0, 25px, 0);
            -ms-transform: translate3d(0, 25px, 0);
            -o-transform: translate3d(0, 25px, 0);
        }

        75% {
            transform: translate3d(0, -10px, 0);

            -webkit-transform: translate3d(0, -10px, 0);
            -moz-transform: translate3d(0, -10px, 0);
            -ms-transform: translate3d(0, -10px, 0);
            -o-transform: translate3d(0, -10px, 0);
        }

        90% {
            transform: translate3d(0, 5px, 0);

            -webkit-transform: translate3d(0, 5px, 0);
            -moz-transform: translate3d(0, 5px, 0);
            -ms-transform: translate3d(0, 5px, 0);
            -o-transform: translate3d(0, 5px, 0);
        }

        100% {
            transform: translate3d(0, 0, 0);

            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
        }
    }

    @-moz-keyframes bounceInDown {
        0%,
        60%,
        75%,
        90%,
        100% {
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }

        0% {
            opacity: 0;
            transform: translate3d(0, -3000px, 0);

            -webkit-transform: translate3d(0, -3000px, 0);
            -moz-transform: translate3d(0, -3000px, 0);
            -ms-transform: translate3d(0, -3000px, 0);
            -o-transform: translate3d(0, -3000px, 0);
        }

        60% {
            opacity: 1;
            transform: translate3d(0, 25px, 0);

            -webkit-transform: translate3d(0, 25px, 0);
            -moz-transform: translate3d(0, 25px, 0);
            -ms-transform: translate3d(0, 25px, 0);
            -o-transform: translate3d(0, 25px, 0);
        }

        75% {
            transform: translate3d(0, -10px, 0);

            -webkit-transform: translate3d(0, -10px, 0);
            -moz-transform: translate3d(0, -10px, 0);
            -ms-transform: translate3d(0, -10px, 0);
            -o-transform: translate3d(0, -10px, 0);
        }

        90% {
            transform: translate3d(0, 5px, 0);

            -webkit-transform: translate3d(0, 5px, 0);
            -moz-transform: translate3d(0, 5px, 0);
            -ms-transform: translate3d(0, 5px, 0);
            -o-transform: translate3d(0, 5px, 0);
        }

        100% {
            transform: translate3d(0, 0, 0);

            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
        }
    }

    @-o-keyframes bounceInDown {
        0%,
        60%,
        75%,
        90%,
        100% {
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }

        0% {
            opacity: 0;
            transform: translate3d(0, -3000px, 0);

            -webkit-transform: translate3d(0, -3000px, 0);
            -moz-transform: translate3d(0, -3000px, 0);
            -ms-transform: translate3d(0, -3000px, 0);
            -o-transform: translate3d(0, -3000px, 0);
        }

        60% {
            opacity: 1;
            transform: translate3d(0, 25px, 0);

            -webkit-transform: translate3d(0, 25px, 0);
            -moz-transform: translate3d(0, 25px, 0);
            -ms-transform: translate3d(0, 25px, 0);
            -o-transform: translate3d(0, 25px, 0);
        }

        75% {
            transform: translate3d(0, -10px, 0);

            -webkit-transform: translate3d(0, -10px, 0);
            -moz-transform: translate3d(0, -10px, 0);
            -ms-transform: translate3d(0, -10px, 0);
            -o-transform: translate3d(0, -10px, 0);
        }

        90% {
            transform: translate3d(0, 5px, 0);

            -webkit-transform: translate3d(0, 5px, 0);
            -moz-transform: translate3d(0, 5px, 0);
            -ms-transform: translate3d(0, 5px, 0);
            -o-transform: translate3d(0, 5px, 0);
        }

        100% {
            transform: translate3d(0, 0, 0);

            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
        }
    }

    .bounceInDown {
        animation-name: bounceInDown;

        -webkit-animation-name: bounceInDown;
        -moz-animation-name: bounceInDown;
        -o-animation-name: bounceInDown;
    }

    @keyframes bounceOutUp {
        20% {
            transform: translate3d(0, -10px, 0);

            -webkit-transform: translate3d(0, -10px, 0);
            -moz-transform: translate3d(0, -10px, 0);
            -ms-transform: translate3d(0, -10px, 0);
            -o-transform: translate3d(0, -10px, 0);
        }

        40%,
        45% {
            opacity: 1;
            transform: translate3d(0, 20px, 0);

            -webkit-transform: translate3d(0, 20px, 0);
            -moz-transform: translate3d(0, 20px, 0);
            -ms-transform: translate3d(0, 20px, 0);
            -o-transform: translate3d(0, 20px, 0);
        }

        100% {
            opacity: 0;
            transform: translate3d(0, -2000px, 0);

            -webkit-transform: translate3d(0, -2000px, 0);
            -moz-transform: translate3d(0, -2000px, 0);
            -ms-transform: translate3d(0, -2000px, 0);
            -o-transform: translate3d(0, -2000px, 0);
        }
    }

    @-webkit-keyframes bounceOutUp {
        20% {
            transform: translate3d(0, -10px, 0);

            -webkit-transform: translate3d(0, -10px, 0);
            -moz-transform: translate3d(0, -10px, 0);
            -ms-transform: translate3d(0, -10px, 0);
            -o-transform: translate3d(0, -10px, 0);
        }

        40%,
        45% {
            opacity: 1;
            transform: translate3d(0, 20px, 0);

            -webkit-transform: translate3d(0, 20px, 0);
            -moz-transform: translate3d(0, 20px, 0);
            -ms-transform: translate3d(0, 20px, 0);
            -o-transform: translate3d(0, 20px, 0);
        }

        100% {
            opacity: 0;
            transform: translate3d(0, -2000px, 0);

            -webkit-transform: translate3d(0, -2000px, 0);
            -moz-transform: translate3d(0, -2000px, 0);
            -ms-transform: translate3d(0, -2000px, 0);
            -o-transform: translate3d(0, -2000px, 0);
        }
    }

    @-moz-keyframes bounceOutUp {
        20% {
            transform: translate3d(0, -10px, 0);

            -webkit-transform: translate3d(0, -10px, 0);
            -moz-transform: translate3d(0, -10px, 0);
            -ms-transform: translate3d(0, -10px, 0);
            -o-transform: translate3d(0, -10px, 0);
        }

        40%,
        45% {
            opacity: 1;
            transform: translate3d(0, 20px, 0);

            -webkit-transform: translate3d(0, 20px, 0);
            -moz-transform: translate3d(0, 20px, 0);
            -ms-transform: translate3d(0, 20px, 0);
            -o-transform: translate3d(0, 20px, 0);
        }

        100% {
            opacity: 0;
            transform: translate3d(0, -2000px, 0);

            -webkit-transform: translate3d(0, -2000px, 0);
            -moz-transform: translate3d(0, -2000px, 0);
            -ms-transform: translate3d(0, -2000px, 0);
            -o-transform: translate3d(0, -2000px, 0);
        }
    }

    @-o-keyframes bounceOutUp {
        20% {
            transform: translate3d(0, -10px, 0);

            -webkit-transform: translate3d(0, -10px, 0);
            -moz-transform: translate3d(0, -10px, 0);
            -ms-transform: translate3d(0, -10px, 0);
            -o-transform: translate3d(0, -10px, 0);
        }

        40%,
        45% {
            opacity: 1;
            transform: translate3d(0, 20px, 0);

            -webkit-transform: translate3d(0, 20px, 0);
            -moz-transform: translate3d(0, 20px, 0);
            -ms-transform: translate3d(0, 20px, 0);
            -o-transform: translate3d(0, 20px, 0);
        }

        100% {
            opacity: 0;
            transform: translate3d(0, -2000px, 0);

            -webkit-transform: translate3d(0, -2000px, 0);
            -moz-transform: translate3d(0, -2000px, 0);
            -ms-transform: translate3d(0, -2000px, 0);
            -o-transform: translate3d(0, -2000px, 0);
        }
    }

    .bounceOutUp {
        animation-name: bounceOutUp;

        -moz-animation-name: bounceOutUp;
        -webkit-animation-name: bounceOutUp;
        -o-animation-name: bounceOutUp;

    }
}

/**针对iphone ios10 上面媒体查询失效的问题，单独拿出来再写一遍 start*/
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;

    -moz-animation-duration: 1s;
    -moz-animation-fill-mode: both;

    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;

    -o-animation-duration: 1s;
    -o-animation-fill-mode: both;
}

@keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);

        -webkit-transform: translate3d(0, -3000px, 0);
        -moz-transform: translate3d(0, -3000px, 0);
        -ms-transform: translate3d(0, -3000px, 0);
        -o-transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);

        -webkit-transform: translate3d(0, 25px, 0);
        -moz-transform: translate3d(0, 25px, 0);
        -ms-transform: translate3d(0, 25px, 0);
        -o-transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);

        -webkit-transform: translate3d(0, -10px, 0);
        -moz-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        -o-transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);

        -webkit-transform: translate3d(0, 5px, 0);
        -moz-transform: translate3d(0, 5px, 0);
        -ms-transform: translate3d(0, 5px, 0);
        -o-transform: translate3d(0, 5px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);

        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);

        -webkit-transform: translate3d(0, -3000px, 0);
        -moz-transform: translate3d(0, -3000px, 0);
        -ms-transform: translate3d(0, -3000px, 0);
        -o-transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);

        -webkit-transform: translate3d(0, 25px, 0);
        -moz-transform: translate3d(0, 25px, 0);
        -ms-transform: translate3d(0, 25px, 0);
        -o-transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);

        -webkit-transform: translate3d(0, -10px, 0);
        -moz-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        -o-transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);

        -webkit-transform: translate3d(0, 5px, 0);
        -moz-transform: translate3d(0, 5px, 0);
        -ms-transform: translate3d(0, 5px, 0);
        -o-transform: translate3d(0, 5px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);

        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
    }
}

@-moz-keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);

        -webkit-transform: translate3d(0, -3000px, 0);
        -moz-transform: translate3d(0, -3000px, 0);
        -ms-transform: translate3d(0, -3000px, 0);
        -o-transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);

        -webkit-transform: translate3d(0, 25px, 0);
        -moz-transform: translate3d(0, 25px, 0);
        -ms-transform: translate3d(0, 25px, 0);
        -o-transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);

        -webkit-transform: translate3d(0, -10px, 0);
        -moz-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        -o-transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);

        -webkit-transform: translate3d(0, 5px, 0);
        -moz-transform: translate3d(0, 5px, 0);
        -ms-transform: translate3d(0, 5px, 0);
        -o-transform: translate3d(0, 5px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);

        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
    }
}

@-o-keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);

        -webkit-transform: translate3d(0, -3000px, 0);
        -moz-transform: translate3d(0, -3000px, 0);
        -ms-transform: translate3d(0, -3000px, 0);
        -o-transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);

        -webkit-transform: translate3d(0, 25px, 0);
        -moz-transform: translate3d(0, 25px, 0);
        -ms-transform: translate3d(0, 25px, 0);
        -o-transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);

        -webkit-transform: translate3d(0, -10px, 0);
        -moz-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        -o-transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);

        -webkit-transform: translate3d(0, 5px, 0);
        -moz-transform: translate3d(0, 5px, 0);
        -ms-transform: translate3d(0, 5px, 0);
        -o-transform: translate3d(0, 5px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);

        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
    }
}

.bounceInDown {
    animation-name: bounceInDown;

    -webkit-animation-name: bounceInDown;
    -moz-animation-name: bounceInDown;
    -o-animation-name: bounceInDown;
}

@keyframes bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0);

        -webkit-transform: translate3d(0, -10px, 0);
        -moz-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        -o-transform: translate3d(0, -10px, 0);
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0);

        -webkit-transform: translate3d(0, 20px, 0);
        -moz-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        -o-transform: translate3d(0, 20px, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);

        -webkit-transform: translate3d(0, -2000px, 0);
        -moz-transform: translate3d(0, -2000px, 0);
        -ms-transform: translate3d(0, -2000px, 0);
        -o-transform: translate3d(0, -2000px, 0);
    }
}

@-webkit-keyframes bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0);

        -webkit-transform: translate3d(0, -10px, 0);
        -moz-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        -o-transform: translate3d(0, -10px, 0);
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0);

        -webkit-transform: translate3d(0, 20px, 0);
        -moz-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        -o-transform: translate3d(0, 20px, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);

        -webkit-transform: translate3d(0, -2000px, 0);
        -moz-transform: translate3d(0, -2000px, 0);
        -ms-transform: translate3d(0, -2000px, 0);
        -o-transform: translate3d(0, -2000px, 0);
    }
}

@-moz-keyframes bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0);

        -webkit-transform: translate3d(0, -10px, 0);
        -moz-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        -o-transform: translate3d(0, -10px, 0);
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0);

        -webkit-transform: translate3d(0, 20px, 0);
        -moz-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        -o-transform: translate3d(0, 20px, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);

        -webkit-transform: translate3d(0, -2000px, 0);
        -moz-transform: translate3d(0, -2000px, 0);
        -ms-transform: translate3d(0, -2000px, 0);
        -o-transform: translate3d(0, -2000px, 0);
    }
}

@-o-keyframes bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0);

        -webkit-transform: translate3d(0, -10px, 0);
        -moz-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        -o-transform: translate3d(0, -10px, 0);
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0);

        -webkit-transform: translate3d(0, 20px, 0);
        -moz-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        -o-transform: translate3d(0, 20px, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);

        -webkit-transform: translate3d(0, -2000px, 0);
        -moz-transform: translate3d(0, -2000px, 0);
        -ms-transform: translate3d(0, -2000px, 0);
        -o-transform: translate3d(0, -2000px, 0);
    }
}

.bounceOutUp {
    animation-name: bounceOutUp;

    -moz-animation-name: bounceOutUp;
    -webkit-animation-name: bounceOutUp;
    -o-animation-name: bounceOutUp;

}
/**针对iphone ios10 上面媒体查询失效的问题，单独拿出来再写一遍 end*/

 这个问题比较坑，希望能帮到遇到同样问题的人。

常见CSS3动画错误及解决方法
DgboSql的博客
09-17 368
常见的填充模式包括"none"（动画播放前和播放后不改变样式），“forwards”（保持动画结束时的样式），“backwards”（使用动画的第一个关键帧的样式作为动画播放前的样式）和"both"（同时应用"forwards"和"backwards"的效果）。通过避免以上列举的常见错误，并正确设置CSS3动画的关键帧、属性、持续时间、填充模式、延迟时间和速度曲线，我们可以确保动画能够正常运行并产生预期的效果。常见的错误是未正确设置动画属性，比如忽略了关键帧或动画属性的声明。错误：未正确设置动画属性。
CSS3 动画中使用scale，在个别 iOS机型上不生效
sinat_37170738的博客
10-20 1824
CSS3 动画中使用scale，在个别 iOS机型上不生效。
部分iphone机型无法实现css的animation动画效果(无效, 失效)
qq_37146616的博客
01-25 3050
部分iphone动效无效, 字体逐显样式, 字体向上移动样式
css3动画旋转不兼容ios
YingUser的博客
05-17 964
1、定义动画，不仅写上前缀，还要加上初始状态 @keyframes rotateLeft{ 0%{ transform: translateY(-100%) rotateZ(0deg); -moz-transform: translateY(-100%) rotateZ(0deg); -o-transform: translateY(-100%) rotateZ(0deg); -webkit-transform: translateY(-100%) rotateZ(0deg) } 1
IOS手机系统 transition css3动画不执行
qq_43383334的博客
10-19 1605
注：要加上translateX translateZ。ios 动画transition不执行。
使用animate.css时，flipInX，flipInY，之类的动画不兼容ios
z____Index的博客
05-28 963
给父元素加上 transform: perspective(400px); -webkit-transform: perspective(400px); //400px是因为animate.css中设置的400px
css3，animate动画在iphone7上的问题...很迷...
Kepler_的博客
01-22 2247
元旦前给公司做了一个类似支付宝账单一样的参会历程，经过设计和文案方的各种奇思妙想，要求了一堆的特效。 比如：春天要体现出叶子生长，所以我就做了一个由下而上的叶子渐出的效果，并使用animate-delay来提现“生长”的一个感觉。 因为上面分成7团叶子出来，一个一个写css不免有些麻烦 我就写了个js给他算延迟时间，赋值给animate-delay,还有-webkit-animate-d...
html和css基础整理
weixin_68658847的博客
09-03 756
html和css基础整理
104道 CSS 面试题
无心玩编程的博客
11-13 1550
104道 CSS 面试题 （给前端大全加星标，提升前端技能） 作者：CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md 本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！ 目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？[1] 2.CSS 选择符有哪些？[2] 3.::before
金三银四css必知知识点总结
为了WLB努力
03-15 1122
伪元素作用于元素的一部分，一个段落的第一行或第一个字母，伪元素相当于创造了一个元素，相当于创造了一个新的元素，然后添加了响应的效果。减少DOM元素的添加、删除和修改，使用文档片段（DocumentFragment）来一次性插入多个DOM元素，减少DOM操作的次数。将多个CSS文件合并成一个文件可以减少HTTP请求的次数，提高页面加载速度。压缩CSS文件可以减小文件大小，加快下载速度，通常会去除不必要的空格、注释和换行等。使用CSS动画而不是JavaScript动画，以利用硬件加速，提高动画的性能。
ios css动画残影,CSS 过渡动画在IOS中表现异常
weixin_28882149的博客
08-04 1436
设置了一个隐藏的圆环，在页面开始时旋转露出。发现在IOS(safari)中过渡动画展示不完整，只展示了起始部分，后面直接跳转到结束状态了。demo.wrap {width: 200px;height: 100px;margin: 50px auto;position: relative;overflow: hidden;}.circular {height: 160px;width: 160px;...
css3 动画android兼容,用css3的animation keyframe写动画的时候，在pc和安卓正常，在ios上有问题，求解答...
weixin_35794835的博客
05-25 622
加个 -webkit.arrow{position:absolute;width:0.92rem;height:0.3rem;bottom: 0.8rem;left:35%;animation: updown 1.5s ease infinite alternate;-webkit-animation: updown 1.5s ease infinite alternate;}@-webkit-k...
IOS系统iphone6系列机型，CSS滚动穿透失效问题
Jensonhui's Blog
11-09 838
IOS，iphone6，滚动穿透失效问题及解决方案！！！
为什么css效果在本地测试没问题,上传到服务器后却显示位置乱动,css下拉菜单本地正常，上传后360浏览器中显示错位，火狐、IE8显示正常...
weixin_32467749的博客
08-06 679
匿名用户1级2014-04-15 回答首先你使用 #header .row-2 ul li:hover 这样ie6就不支持了。ie6支持的hover目前我知道的只有a标签。要单纯用css实现下拉，在ie下是兼容不了的。我给你改成js版，喜欢就用吧。1，style.css修改的部分：原码：#header .row-2 ul li ul {display: none;}#header .row-2 u...
css 苹果 安卓兼容,css3动画写了兼容 但是一些安卓手机还是没作用。
weixin_34985445的博客
08-04 598
@keyframes down {0% {height: 75px}100% {height: 225px}}.moveDown {-webkit-animation-name: down;-webkit-animation-duration: .5s;-webkit-animation-iteration-count: 1;-webkit-animation-timing-function: e...
iOS核心动画
SCDNBB的博客
06-30 1022
iOS核心动画：显式动画、隐式动画
移动端h5页面常见问题
FireBird_one的博客
07-29 855
4：）美化表单元素 //一、使用appearance改变webkit浏览器的默认外观 input,select { -webkit-appearance:none; appearance: none; } //二、winphone下，使用伪元素改变表单元素默认外观 //1.禁用select默认箭头，::-ms-expand修改表单控件下拉箭头，设置隐藏并使用背景图片来修饰 select::-m...
animation动画不生效_关于CSS3的animation使用的一些坑，需要注意下！
weixin_31881651的博客
12-23 3431
CSS3的animation实在是让人爱不释手，越用越觉得离不开了。较高的性能以及和js的逻辑无关性，可以专注于动画效果本身，真的很不错，尤其在手机上，只需主要考虑webkit内核的，更是爽，但随着使用，也发现一些坑，就分享给大家吧。1. 对于一个要显示动画的元素，一定要先show，然后在执行动画语句。在iPhone设备上如果先执行动画语句再显示元素，则动画可能无效，android则没问题。2. ...
ios下使用动画 transform: translate(xx%) 无效问题
Vincentyun
08-06 2855
<div class="wg-marquee-up"></div> .wg-marquee-up { height:300px; -webkit-animation: marquee-up 5s linear infinite; -ms-animation: marquee-up 5s linear infinite; -o-animation: marquee-up 5s linear infinite; animation: marq
用idea编写手机卖场主题html网页实现页面交互功能
最新发布
04-02
<think>好的，我现在要帮助用户解决如何在IntelliJ IDEA中创建一个带有交互功能的手机卖场主题HTML页面的问题。首先，我需要整理用户的需求，明确他们需要哪些步骤和功能。用户提到了页面交互，所以可能包括JavaScript的使用，比如点击事件、动态内容加载等。 首先，我应该考虑项目结构的搭建。在IntelliJ IDEA中新建项目，选择静态Web类型，这样会自动生成基本的目录结构，比如HTML、CSS和JavaScript文件夹。用户可能需要知道如何组织这些文件，所以需要详细说明创建步骤。 接下来是HTML结构的编写。需要包含基本的元素，比如导航栏、商品展示区、购物车等。这里可能需要使用HTML5的语义化标签，如<header>、<section>、<article>等。同时，商品信息可能需要动态生成，这时候就需要JavaScript来操作DOM，比如使用document.createElement或者模板字符串来插入内容。 然后是CSS样式的设计。为了让页面美观，需要使用Flexbox或Grid布局来排列商品卡片。响应式设计也是必须考虑的，可能需要使用媒体查询来适应不同屏幕尺寸。颜色搭配和字体选择也会影响用户体验，这部分需要给出一些建议，比如使用柔和的背景色和清晰的字体。 交互功能的实现是关键。用户可能需要添加商品到购物车、搜索功能、排序选项等。JavaScript的事件监听器，比如click事件，可以用来处理用户的点击操作。购物车的功能可能需要一个数组来存储选中的商品，并实时更新显示的数量。此外，动态搜索可以通过input事件监听，根据用户输入过滤商品。 数据存储方面，简单的demo可以使用数组来模拟商品数据，每个商品对象包含名称、价格、图片等信息。如果用户需要持久化存储，可能需要提到localStorage，但基础教程可能暂时不需要这一步。 测试和调试部分需要指导用户如何使用IntelliJ IDEA的内置浏览器预览功能，以及如何利用开发者工具（如Chrome DevTools）来检查元素和调试JavaScript代码。断点设置和console.log的使用对于排查问题非常重要。 最后，可能需要提供优化建议，比如代码压缩、图片优化、使用第三方库（如jQuery）来简化DOM操作，或者引入框架如Vue.js或React来增强交互性。不过对于初学者，保持简单可能更好，逐步引入复杂概念。 现在，我需要确保每个步骤都清晰易懂，并且代码示例正确无误。例如，在展示商品时，使用JavaScript动态生成HTML元素，避免硬编码。购物车数量的更新需要事件委托，以免为每个按钮单独绑定事件。搜索功能可能需要使用filter方法对商品数组进行筛选，并重新渲染商品列表。 可能遇到的问题包括路径错误导致的图片无法显示，JavaScript语法错误导致功能失效，或者CSS样式冲突。需要提醒用户检查控制台报错，使用正确的相对路径，并验证代码语法。 总结下来，步骤大致分为：项目创建、HTML结构、CSS样式、JavaScript交互、测试调试、优化扩展。每个部分都需要详细说明，并给出示例代码，确保用户能够跟随操作。</think>### 分步骤指导：用 IntelliJ IDEA 创建手机卖场交互式网页 #### 一、项目初始化 1. **创建静态 Web 项目** - 打开 IntelliJ IDEA → 新建项目 → 选择「Static Web」模板 - 设置项目名称（如 `PhoneMart`）和存储路径 - 系统自动生成目录结构： ``` PhoneMart/ ├── css/ ├── images/ └── js/ ``` 2. **新建 HTML 文件** - 右键项目根目录 → New → HTML File → 命名 `index.html` - 生成基础 HTML5 文档结构： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>手机卖场</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src="js/main.js"></script> </body> </html> ``` #### 二、页面结构设计 ```html <!-- 导航栏 --> <header class="navbar"> <h1>PhoneMart 旗舰店</h1> <div class="search-box"> <input type="text" id="searchInput" placeholder="搜索手机型号"> <button onclick="searchProducts()">搜索</button> </div> <div class="cart">购物车 (<span id="cartCount">0</span>)</div> </header> <!-- 商品展示区 --> <section class="product-list"> <article class="product-card" data-brand="华为" data-price="3999"> <img src="images/p40.jpg" alt="华为 P40"> <h3>华为 P40</h3> <p class="price">¥3999</p> <button class="add-to-cart">加入购物车</button> </article> <!-- 更多商品通过 JavaScript 动态加载 --> </section> <!-- 价格筛选 --> <div class="filters"> <select id="priceFilter" onchange="filterProducts()"> <option value="all">全部</option> <option value="3000">3000元以下</option> <option value="5000">3000-5000元</option> </select> </div> ``` #### 三、样式设计 (`css/style.css`) ```css /* 响应式布局 */ .product-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding: 20px; } .product-card { border: 1px solid #ddd; padding: 15px; transition: transform 0.3s; } .product-card:hover { transform: translateY(-5px); } /* 购物车动态效果 */ .navbar .cart { background: #ff9000; padding: 8px 15px; border-radius: 20px; cursor: pointer; transition: background 0.3s; } .navbar .cart:hover { background: #ff6600; } @media (max-width: 768px) { .product-list { grid-template-columns: 1fr; } } ``` #### 四、交互功能实现 (`js/main.js`) ```javascript // 商品数据 const products = [ { id: 1, name: '华为 P40', price: 3999, image: 'images/p40.jpg' }, { id: 2, name: 'iPhone 13', price: 5999, image: 'images/iphone13.jpg' }, // 更多商品数据... ]; // 购物车状态 let cartItems = []; // 动态渲染商品 function renderProducts(filteredProducts = products) { const container = document.querySelector('.product-list'); container.innerHTML = filteredProducts.map(product => ` <article class="product-card"> <img src="${product.image}" alt="${product.name}"> <h3>${product.name}</h3> <p class="price">¥${product.price}</p> <button class="add-to-cart" onclick="addToCart(${product.id})"> 加入购物车 </button> </article> `).join(''); } // 加入购物车功能 function addToCart(productId) { const product = products.find(p => p.id === productId); cartItems.push(product); updateCartCount(); // 添加动画效果 const cartIcon = document.querySelector('.cart'); cartIcon.classList.add('bounce'); setTimeout(() => cartIcon.classList.remove('bounce'), 500); } // 价格筛选功能 function filterProducts() { const maxPrice = document.getElementById('priceFilter').value; const filtered = products.filter(p => maxPrice === 'all' ? true : maxPrice === '3000' ? p.price < 3000 : p.price >= 3000 && p.price <= 5000 ); renderProducts(filtered); } // 初始化页面 document.addEventListener('DOMContentLoaded', () => { renderProducts(); // 实现实时搜索 document.getElementById('searchInput').addEventListener('input', function() { const keyword = this.value.toLowerCase(); const results = products.filter(p => p.name.toLowerCase().includes(keyword) ); renderProducts(results); }); }); ``` #### 五、调试技巧 1. **实时预览**： 使用 IDEA 内置浏览器右键 → Open in → Browser 实时查看效果 2. **断点调试**： 在 JavaScript 代码行号旁点击设置断点 → 右键选择 Debug 'index.html' 3. **控制台检查**： Chrome 中按 F12 → Console 面板查看错误信息 #### 六、扩展功能建议 1. **数据持久化**： 使用 `localStorage` 保存购物车状态： ```javascript function saveCart() { localStorage.setItem('cart', JSON.stringify(cartItems)); } ``` 2. **支付模拟**： 添加第三方支付 SDK（如支付宝沙箱环境） 3. **动画增强**： 引入 Anime.js 库实现更流畅的过渡效果 §§ 相关问题 §§ 1. 如何用 JavaScript 实现购物车的持久化存储？ 2. 在 IntelliJ IDEA 中如何调试 JavaScript 代码？ 3. 移动端网页适配需要注意哪些问题？ 4. 如何优化网页加载速度？ > 注意：实际开发时建议使用 Vue/React 等框架提升开发效率，本文示例采用原生 JavaScript 便于理解基础原理[^1]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值