css过滤动画图片变大后闪不停

html-css018

css过滤动画图片变大后闪不停,第1张

css过滤动画图片变大后闪不停，将三个图片整合为一张图片可以改善。这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术。

animation 属性是一个简写属性，用于设置六个动画属性：

如需修改在页面中的位置

将 .point 设为 position:absoulute ,修改其 left , top 位置即可

.point-flicker 是相对 .point 来定位的

修改大小时要将它的 margin-left: -40px margin-top: -40px改为对应大小的一半

用css做一个呼吸效果，然后让想闪烁的元素调用：

比如，我的div想呼吸

div.breatheDiv{

    height:500px

    width:500px

    background-color: #FF94A6

    border-radius: 100%

    webkit-animation: breathe 2000ms ease infinite

    -moz-animation: breathe 2000ms ease infinite

    -o-animation: breathe 2000ms ease infinite

    animation: breathe 2000ms ease infinite

}

@-webkit-keyframes breathe{

    0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}

    100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}

    50%{opacity:1box-shadow:0 1px 80px #ff6b84}

}

@-moz-keyframes breathe{

    0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}

    100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}

    50%{opacity:1box-shadow:0 1px 80px #ff6b84}

}

@-o-keyframes breathe{

    0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}

    100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}

    50%{opacity:1box-shadow:0 1px 80px #ff6b84}

}

@keyframes breathe{

    0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}

    100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}

    50%{opacity:1box-shadow:0 1px 80px #ff6b84}

}