前端学习html+css完结篇第十二天

css3中 3d变形transform

先介绍这个之前引入一个新知识;由于这个参数是css3的样式，必然存在老版本浏览器不支持的情况。因此为了保证兼容之前的浏览器,于是就有了浏览器的前缀。

rotate(旋转) 、translate(移动)、scale(缩放)

这个和2d的差不多,无非就是在2d的维数增加Z轴。关于2d的样式设置,请看我之前的博客。

3d旋转:四个函数。

deg为输入的参数的单位"度"。* 表示需要输入的数值。

             transform: rotate3d(x,y,z,* deg) ; //定义3d旋转
             transform: rotateX( * deg);   //关于x轴旋转
             transform: rotateY(* deg) ; //关于y轴旋转
             transform: rotateY(* deg) ; //关于z轴旋转

3d平移:两个函数。

 transform: translate3d(x,y,z);  //3d平面上进行x、y、z轴移动。
 transform: translateZ();   //在z轴移动

3d缩放:两个函数.

transform: scale3d(x,y,z) ; //定义3d缩放
transform: scaleZ();  //定义z轴的缩放

注意:skew() 倾斜属性没有3d的。还有这些变形的效果可以叠加的。demo如下。

  -webkit-transform:  translate(15px,-20px)  rotate(30deg) ;  //平移和旋转一起叠加使用,同时引入浏览器前缀.

css3中动画

demo：

-webkit-animation:  fly   2s  linear  0s   infinite   normal;

  @-webkit-keyframes fly  {
            0%{
                transform: rotate(0deg);   //初始状态
            }
            50%{
                transform: rotate(180deg); //中间状态
            }
            100%{
                transform: rotate(360deg);  //最后状态
            }

        }
    //第二种写法。
		  @-webkit-keyframes rive  {
            from{
                top: 0;
                left: 0;
                background-color: #999999;
            }
            to{
                top: 200px;
                left: 200px;
                background-color: gold;
            }
        }

上面有6个参数。依次是：

animation-name: 动画名称,方便用于调用动画 ; //不可以省略。

animation-duration: 动画完成时间,单位可以是 s 也可以是 ms ; //一定要书写的不可以省略。

animation-timing-function: 动画时间函数 默认是 ease,其中常用的还有linear 匀速。;

animation-delay: 动画延迟时间 默认是0s;

animation-iteration-count: 动画迭代次数默认是 1,其中无限次数为 infinite;

扫描二维码关注公众号，回复： 6785280 查看本文章

animation-direction: 属性定义是否应该轮流反向播放动画 默认是normal 就是不轮流方向播放; 常用轮流反向播放为 alternate;

声明动画：
@-webkit-keyframes fly{} //其中fly 被声明为动画名称。中间的-webkit-为浏览器前缀.。
还可以有 @-moz-keyframes fly{} 表示兼容火狐的书写方式，如需要兼容其他浏览器,则需要加上相应的前缀就可以。
form,to写法比较粗糙,若需要更细腻的动画效果,采用多帧百分比 %来进行动画实现。

注意,在animation前面别忘了浏览器前缀。

css3伸缩布局

demo：

html:

<!--伸缩布局-->
<div class="width">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

css:
		 .width{
            height: 200px;
            width: 60%;
            margin: 50px auto;
            display: flex;
            min-width: 150px;
        }

        .width div:nth-child(1) {
            background-color: pink;
            width: 200px;

        }
        .width div:nth-child(2) {
            background-color: purple;
            margin: 0 10px;
            flex: 2;
        }
        .width div:nth-child(3) {
            background-color: blue;
            flex: 1;
        }

效果如下：
在这里插入图片描述这里面父盒子使用 display:flex; 来进行伸缩布局。默认是根据行来划分。就是一行切成多列。
子元素div 中通过份数 flex: 1;,flex:2 ;来进行宽度的划分。其中还可以对子元素进行宽度设置,不参与宽度的份数划分。
补充：如需将按列进行划成多行则加上： flex-direction: column;

背景缩放、背景渐变、多背景

缩放：

  -webkit-background-size: 200px auto;   /*以200px 宽度比例进行缩放。其中auto可以省略*/
            background-size: 200px auto;
            background-size:cover;
            background-size:contain;
                            /* cover  全覆盖,  contain   按比例进行缩放,最快的一边进行扩展至指定大小则不在变化,这个图片一般比指定的盒子大小要小 */

渐变:

		  background: -webkit-linear-gradient(left top ,green 0%,yellow 50%,red 100%);
		  /*background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色 位置....)*/

效果图如下：
在这里插入图片描述
多背景:

			  background: url("../img/jd-2.jpg") no-repeat top left , url("../img/jd-3.jpg") no-repeat bottom right;
            background-color: #999999;  //这个一定要书写在下面。以防止覆盖。

练习

实现一下效果：
在这里插入图片描述