教你用css做好看的轮播图

插一点另外的小知识 酷炫的html跑马灯效果

<MARQUEE LOOP="TRUE" DIRECTION=left BEHAVIOR=SCROLL SCROLLAMOUNT=60 SCROLLDELAY=400 bgcolor="#12bbe6" height="30" style="color: #ae12ec;" onMouseOut="this.start()" onMouseOver="this.stop()">
    欢迎来到这里,我将带你走向这繁荣的世界,看遍这世间美好的景物,领略不一样的风采.
</MARQUEE>

属性：

direction：滚动方向
up: 上
down:下
left: 左
right: 右

behavior：滚动方式
scroll：循环滚动，默认效果
slide：只滚动一次就停止
alternate：来回交替进行滚动

scrollamount：滚动速度(单位px)

scrolldelay:滚动的时间间隔，单位毫秒

loop：循环的次数
默认值是-1，滚动会不断的循环下去

width、height：
设定滚动字幕的宽度、高度

bgcolor：设定滚动字幕的背景颜色(rgb或rgba都可以)

hspace、vspace：

hspace：字幕所在的位置距离水平边框距离

vspace：字幕所在的位置距离垂直边框距离

align：对齐方式
absbottom：绝对底部对齐
absmiddle：绝对中央对齐
baseline：底线对齐
bottom：底部对齐（默认）
left：左对齐
middle：中间对齐
right：右对齐
texttop：顶线对齐
top：顶部对齐

face：文字字体

color：文字颜色

size：文字大小

STRONG：文字加粗

onMouseOut=“this.start()” 鼠标移出继续滚动

onMouseOver=“this.stop()” 鼠标悬浮停止滚动

好了具体的属性就介绍到这里,当然这样的效果配合轮播图是一个什么样子的效果呢?

我们来说轮播图

HTML部分
我们使用一个div盒子把无序列表嵌套在里面,需要用到几张图片进行操作,我们就需要几个

• 在这里我用到的是五张图片,但是考虑到无缝连接,使其看起来效果更佳,我们在最后一张图片放的是第一份图片

  <div id="lun-bo">
          <ul>
              <li>
                  <img src="./images/lun-bo/001.jpg">
              </li>
              <li>
                  <img src="./images/lun-bo/4.jpg">
              </li>
              <li>
                  <img src="./images/lun-bo/005.jpg">
              </li>
              <li>
                  <img src="./images/lun-bo/11.jpg">
              </li>
              <li>
                  <img src="./images/lun-bo/013.jpg">
              </li>
              <li>
                  <img src="./images/lun-bo/001.jpg">
              </li>
              </li>
          </ul>
      </div>
  

  这里是css部分代码

  #lun-bo {
      width: 1400px;
      /*单张图片的宽度*/
      height: 600px;
      /*单张图片所占据的高度*/
      margin: auto;
      /*让其居中显示*/
      overflow: hidden;
      /*由于每张图片的长度超出浏览器的单个窗口 而我们的这个效果就需要用到隐藏的属性,只留下一张图片放在开始就好了*/
      position: absolute;
      /*让其位置固定,不会由于后面的操作导致出现文本流错乱的效果*/
      top: 140px;
      /*定位中使用到的位置移动的距离
  有top left right bottom
  当然我这里只是使用了两个就好了
  	*/
      left: 250px;
      z-index: -2;
      /*这是层级 由于使用了定位 会导致一定的效果 这里的数据根据实际情况自行可以进行修改*/
  }
  
  #lun-bo>ul {
      width: 11520px;
      /*x张图片总共的宽度*/
      position: relative;
      /*让这里承担了一个父级定位*/
      animation: idea 48s linear infinite;
      /*最后让其动起来的指令
  	idea是名称 当然有什么好听的名字都可以使用  48s是总共一次播放的时间 linear 是匀速播放  infinite这里是无限循环播放
  	*/
  }
  
  #lun-bo>ul li {
      float: left;
      /*让其所有的图片在一条水平线上显示*/
      list-style: none;
      /*隐藏或消除列表的图标*/
      background-size: contain;
      /*设置图片的大小*/
  }
  
  @keyframes idea {
  /*重点啦  
  idea是我们在上面引用的名称 这里是要调用的
  */
      0% {
          transform: translateX(0);
          /*让其初始时不移动*/
      }
      100% {
          transform: translateX(-9600px);
          /*最后移动的时候是五张图片的宽度*/
      }
  }
  
  

  详细知识,让你也能做到这么优秀的操作

  css变形动画

  函数:
  平移 translate
  缩放 scale
  倾斜 skew
  旋转 rotate

  transform: [ transform-function ]
  大括号内部是设置变形函数,可以是一个也可以是多个,中间用空格相隔开

  功能:
  能够重新定义元素的坐标,实现平移的效果
  语法:
  transform:translate(x-value, y-value);
  x-value是指水平方向上移动的距离,
  y-value是指元素在垂直方向上移动的距离
  若省略第二个参数,则取默认值0
  当值是负数时,表示反方向移动元素
  当变形函数平移只是取得一个值得时候,可以使用另外的函数来表示

  scale()缩放函数

  功能:
  用于缩放元素的大小
  transform:scale(x-axis, y-axis);
  x-axis和y-axis的参数取值>1时表示放大,取值在0~1之间时表示缩小
  scale()函数可以只是接受一个值,也可以接受两个值,当只有一个值时,第二个值默认和第一个值相等
  scaleX(se): 表示只是设置X轴的缩放
  scaleY(se):表示只是设置Y轴的缩放

  skew()倾斜函数
  功能:
  能够让元素倾斜显示
  transform:skew(X-angle, Y-angle);
  参数X-angle和Y-angle表示角度值,第一个参数表示X轴,第二个表示Y轴,若是省略第二个,取得默认值0
  单位deg

  rotate旋转函数
  功能:
  能够旋转指定的元素对象,只要在二维空间内进行操作
  transform:rotate(angle)
  参数angle表示要旋转的角度值 正顺,负逆

  css3过度动画

  transition过度,是一个元素的属性样式从一种状态转变成另外一种状态的过程

  属性:

  transition-property:过度效果的css属性的名称
  ps:transition-property:color;

  transition-duration:过度效果使用的时间
  ps:transition-duration:0.5s;

  transition-timing-function:过度效果的速度曲线
  ps:transition-timing-function:linear;

  transition-delay:过度效果什么时间开始
  ps:transition-delay:1s
  间隔1s之后开始

  transition:综合属性
  ps:transition: all ease 1s 0.5s;

  transition-property属性:
  定义转换动画的css属性名称
  property: 定义应用过度效果的css属性名称(width height background-color 等属性)多个属性之间用逗号间隔
  all 所有属性都将获得过度效果

  transition-duration:
  用于定义过度效果花费的时间,即从设置旧的属性到换新属性所花费的时间,默认值是0,常用单位是秒或毫秒
  transition-duration:time;

  transition-timing-function属性
  指定过度效果的速度曲线以及过度期间的操作进展情况,通过给过度添加一个函数来指定动画的快慢方式
  ease
  速度由快到慢(默认)
  linear
  匀速
  ease-in
  越来越快(渐显效果)
  ease-out
  越来越慢(渐隐效果)
  ease-in-out
  先加速后减速(渐显渐隐效果)

  transition-delay属性
  指定一个动画开始执行的时间,当改变元素属性值后多长时间去执行过度效果
  正值:
  元素过度效果不会立即触发,当过了设置的时间值后才会触发
  负值
  元素过度效果不会立即触发,当过了设置的时间值后才会被触发
  0
  默认值 立即执行

  transition综合写法
  transition:property (所规定的的css属性名称) duration(需要的时间) timing-function(速度) delay(执行时间)
  注意:
  顺序的执行过程当中不能错误

  animation动画

  通过flash动画的关键帧来声明一个动画,实现多个场景的转变

  @keyframes 规则用于创建动画
  语法:
  @keyframes animationname{
  keyframes-selector{声明};
  }
  animationname:动画的名称,不能为空
  keyframes-selector:
  动画时间的百分比,from,to
  from和to和0%的效果相同,表示动画的开始,to和100%的效果相同,表示动画的结束
  声明中css-style:动画状态,用一个或多个合法的css样式属性进行定义,不能为空

  语法格式:
  animation:animation-name(由@keyframes创建的动画名称)
  animation-duration
  动画需要的时间
  animation-timing-function:
  动画速度曲线
  animation-delay:
  延迟时间
  animation-iteration-count:
  动画播放次数
  值通常为整数,默认是1,特殊值infinite 无限循环播放
  animation-direction
  动画的播放方向朝一个方向还是两个方向循环往复
  normal 按照顺序播放
  alternate 往返播放
  animation-play-state:
  动画的播放状态
  running 将暂停的动画重新播放(默认)
  paused 将正在播放的元素动画停下来
  animation-fill-mode
  动画开始之前和结束之后发生的操作
  forwards 动画结束继续应用最后关键帧的位置
  backwards 表示会在元素应用动画样式时迅速应用动画的初始帧
  both表示元素同时具有前两个的效果