美文网首页
css3动画背景图变换

css3动画背景图变换

作者: 霁雨轩阁 | 来源:发表于2018-09-12 21:11 被阅读0次

.header{
-webkit-animation:background 10s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
height: 100vh;
width: 100%;
}
@-webkit-keyframes background
{
from{ background:url(../img/one.jpg) no-repeat center;
background-size: cover}
to{ background:url(../img/two.jpg) no-repeat center ;
background-size: cover}
}
.header-back{
display: block;
height: 100vh;
width: 100%;
background-color: rgba(85, 85, 85, 0.5);

} 10E3A8F22F84B3AEACCAE303C36FABF4.png

相关文章

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • css3动画背景图变换

    .header{-webkit-animation:background 10s;-webkit-animatio...

  • CSS3 背景

    知识点: CSS3 背景图像区域CSS3 背景图像定位CSS3 背景图像大小CSS3 多重背景图像CSS3 背景属...

  • CSS3 动画

    需求:背景色变换 html: css: 参考文献:CSS3 动画

  • CSS3动画

    CSS3之2D/3D动画 2D的变换3D的变换动画 2D动画的变换 基本说明 注意:一般要写不同浏览器的适配 移动...

  • CSS3 3D翻转动画

    CSS3动画属性:transform(变换):大小、位置、颜色、变形等状态的变化transition(过渡):初始...

  • CSS3中的过渡动画以及添加动画规则

    之前的网页实现动画效果必须依赖Flash或js,CSS3动画效果属性主要分为三类:过渡、变换、动画。但是这些CSS...

  • CSS3动画属性的区别(Transitions, Transfo

    CSS3动画相关的几个属性是:transition,transform,animation;我分别理解为过渡,变换...

  • CSS-背景5-多张背景图

    1、多张背景图 CSS3可以选择多张背景图,每张背景图都可以独立设置尺寸、定位。下面我们使用CSS3的多张背景图,...

  • 2019-06-11

    CSS3 2d变换 3d变换 css3 2d变换 111111 222222

网友评论

      本文标题:css3动画背景图变换

      本文链接:https://www.haomeiwen.com/subject/zagbgftx.html