前端：CSS3

最新推荐文章于 2024-07-25 16:45:46 发布

w_viola

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量199

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wanngxue/article/details/78595819

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一、2D转换

新的转换属性:
	transform 向元素应用 2D 或 3D 转换
	transform-origin 设置旋转元素的基点位置。

div
{
transform: rotate(45deg);
transform-origin:20% 40%;
}

1、移动：translate()
    用法:(1)transform:translate(x,y)/*x,y分别为水平及竖直方向移动距离*/
		(2)transform:translateX(x);
		   transform:translateY(y);/*不能同时用*/
2、旋转：rotate()
	用法：transform:rotate(角度);
	*角度的单位为deg
	若为负值，则逆时针旋转；若为正值，则顺时针旋转；
3、缩放：scale()
    用法：(1)transform:scale(x,y);
	     (2)transform:scaleX(x);
		    transform:scaleY(y);
	 /*x,y分别为水平、竖直方向的放大倍数，无单位。0-1为缩小，大于1为放大*/
4、倾斜：skew()
元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

二、过渡

transition:过渡对象 过渡时间 频率 延时时间
过渡对象：all/属性标签
过渡时间：time
频率：linear规定以相同速度开始至结束的过渡效果。
	 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
	 ease-in 规定以慢速开始的过渡效果
	 ease-out规定以慢速结束的过渡效果
	 ease-in-out 规定以慢速开始和结束的过渡效果

div
{
transition: width 1s linear 2s;
}

三、CSS3动画

动画的调用：animation
animation：动画名称 时间 频率 播放次数 alternate
播放次数：n或infinite（循环）
alternate动画应该轮流反向播放。
创建动画:@keyframes
用法1：

@keyframes myfirst/*定义动画的名称*/
{
from {background: red;}
to {background: yellow;}
}/*from(1) to(2)表示从效果1到效果2*/

div
{
animation: myfirst 5s;
}/*动画的调用*/

用法2：百分比形式

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

div
{
animation: myfirst 5s linear 2s infinite alternate;
}/*动画的调用*/

四、多媒体查询

@media允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。
    768px 移动
    768px-992px ipad
    992px-1200px pc
    1200px pc 宽屏

使用方法：(1)在link中通过页面尺寸检测链接不同的css
		(2)在<head>中定义不同的属性

@media all and (max-width:768px){
   body{
       background: pink;       
   } 
}/*页面尺寸小于768px时，屏幕显示为粉色*/
@media all and (min-width:769px) and (max-width:992px){
    body{
        background: green;
    }
}/*页面尺寸大于769px，小于992px时，屏幕显示为绿色*/

五、弹性盒子

flex-direction 顺序指定了弹性子元素在父容器中的位置。
	flex-direction: row | row-reverse | column | column-reverse
    row：横向从左到右排列（左对齐），默认的排列方式。
    row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
    column：纵向排列。
    column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
align-content:设置各个行的对齐
    flex-start各行向弹性盒容器的起始位置堆叠。
    flex-end各行向弹性盒容器的结束位置堆叠。
    center各行向弹性盒容器的中间位置堆叠。
    space-between各行在弹性盒容器中平均分布。
    space-around各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
order:排序
	order:value;值越小越靠前

<style>
        .flex-container {
            display: -webkit-flex;
            display: flex;
            width: 400px;
            height: 250px;
            background-color: lightgrey;
        }

        .flex-item {
            background-color: cornflowerblue;
            margin: 10px;
        }

        .item1 {
            flex:1;
        }
		.item2 {
            flex: 2;
        }
		 .item3 {
            flex: 1;
        }
    </style>

<div class="flex-container">
    <div class="flex-item item1">flex item 1</div>
    <div class="flex-item item2">flex item 2</div>
    <div class="flex-item item3">flex item 3</div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rgNszbJJ-1571653067268)(https://img-blog.csdn.net/20171121190757920?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2Fubmd4dWU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)]