今天完成的事情：完成任务15，并用css3写了个轮播图
明天计划的事情：学习js
遇到的问题：暂无
收获：

如何利用css3动画效果写一个轮播图

注：

此种写法是点击式的轮播，非自动循环的轮播图

需要用到的动画属性有transtion和transform两个

Html代码分四大块

轮播图主体、轮播图按钮、轮播图指示器

因为写的是按钮式的所以还需要一组单选按钮input

具体代码如下所示

    <div class="carousel-container">       

        <ul class="carousel my-carousel">

            <input class="carousel__activator" type="radio" id="A" name="activator" checked="checked" />

            <div class="carousel__controls">

                <label class="carousel__control carousel__control--backward" for="E"></label>

                <label class="carousel__control carousel__control--forward" for="B"></label>

            </div>

            <li class="carousel__slide">

                <h1>A</h1>

            </li>

            <div class="carousel__indicators">

                <label class="carousel__indicator" for="A"></label>

            </div>

        </ul>

    </div>

核心的思想是：

图片采用background的属性将其放在背景中，并赋予其background-size：cover和background-position：center

对所有的

<li class="carousel__slide">

                <h1>A</h1>

            </li>

设置成绝对定位，让其位置重叠在一起，然后加 opacity: 0;让其不可见

在采用label和input：radio的伪类checked，来更改元素的opacity的值为1，

注意：为了防止元素溢出，一定要给相框<div class="carousel-container">加上一个overflow：hidden；

指示器部分采用label标签和input进行绑定，并设置相应的transition属性便可以形成一个淡入淡出的轮播图效果

二．做一个从右边往左移动的轮播图

这个主要是利用

TransformX这个属性

设定每个轮播的的transformx的值让所有的图片排成一列，就行浮动贴靠的一样，

然后，

最关键的部分是在轮播图的外面加一个容器，给容器设置一个相应的负transformx的值

此时容器会像左边移动

我理解的是将容器将排成一行的图片整个向左拉动，拉动时屏幕上的图片也就跟着切换了，所以需要根据每个input来设置容器相应的移动距离

所以一定要将相框设置成overflow：hidden；

三．做一个可以缩放效果的轮播图

采用transform: scale（x，y）;

Scale是缩放

scale并不支持百分比值和normal关键字，只能是数值。而且，还能是负数（zoom只能是正数）。

默认以元素中心位置来缩放

如果要改变缩放的样式

可以采用transform-origin来改变元素基点的位置

注意和zoom的区别：

1.zoom的缩放是相对于左上角的；而scale默认是居中缩放；

2.Zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；

3.对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸。