问答详情
源自：7-8 切换背景图像综合练习题

请问这一段的设置是基于什么意思

  /*设置背景图像不显示动画效果*/

            @-webkit-keyframes 'notTarget' {

            0% { z-index: 75; }

            100% { z-index: 75; }

            }

            @-moz-keyframes 'notTarget' {

            0% { z-index: 75; }

            100% { z-index: 75; }

            }

            @-ms-keyframes 'notTarget' {

            0% { z-index: 75; }

            100% { z-index: 75; }

            }

            @-o-keyframes 'notTarget' {

            0% { z-index: 75; }

            100% { z-index: 75; }

            }

            @keyframes 'notTarget' {

            0% { z-index: 75; }

            100% { z-index: 75; }

            }


提问者：全天候前端网络 2017-04-30 22:01

个回答

  • 慕桂英2574724
    2017-05-02 23:30:42
    已采纳

    前面的前缀-webkit-,-moz-,是适应不同浏览器的作用。

    @keyframes：被称为关键帧，其类似于Flash中的关键帧。在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，而0%-100%就是开始到结束。中间可以创建多个关键帧。

    “notTarget”：这个是关键帧的名字，后面调用时用到。

    “z-index” 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。就是说数值越大就越靠前，跟电脑窗口一样，会覆盖数值小的，该属性也可以是负值。

    0% { z-index: 75; } 100% { z-index: 75; }

    就是说从该动画开始到结束，值都不变。一直处在75这个位置。这样就一直在这个画面，没有变化，也就没有动画效果了。

    2