博客

CSS3动画

CSS3动画分类：2d动画 3d动画 2d转3d 过渡动画 帧动画

transform translate(平移x,y,z) rotate(旋转x,y,z) skew(变形 deg) scale(伸缩 w,h)

translate 默认x

rotate 默认旋转z 旋转中心

举例：

        .b{
        margin: auto;
        width: 200px;
        height: 200px;
        border: 1px solid red;
       /!* transform:translatez(100px);*!/
       /!* transform: rotatey(45deg);*!/
        /!*transform-origin:0 50%;*!//!* 设置旋转中心的*!/
        /!*transform: skew(-45deg);*!/
        transform: scale(1.5,0.5);
        }

   
       .b{
        width: 100px;
        height: 100px;
        background: red;
        margin-left: 0;
        transition-delay 动画的延迟
        transition-delay:1s;
        transition-duration 动画的执行时间
        transition-duration: 1s;
        transition-timing-function动画的执行方式  linear 匀速 ease-in  慢开   ease-in-out 慢开慢关
        transition-timing-function: linear;
        transition-property  过渡什么属性  margin-left  如果要过渡多个属性 分开  all 过渡所有属性
        transition-property:margin-left;
        transition: margin-left 1s 1s linear;
    }

html5标签

特点：语义化明确.

举例：

1.定义独立内容：

<<article>
    我是article
</article>

2.定义侧边栏：

<aside>
    定义侧边栏
</aside>

3.定义文本 脱离父元素的设置方向：

<bdi>
    脱离元素的设置方向
</bdi>
<command>
 6969
</command>

4.弹框：

<dialog open>
    我是弹框
</dialog>

5.上下标题：

<header>
    我是上标题
</header>
<footer>
    我是下标题
</footer>

6.定义内容区块：

<section>
我这里是一块内容
</section>

声明时间：

<time>
    2019-05-08
</time>

7.类似折行 在网页伸缩的时候按照单词来排行：

<<p>home<wbr>home<wbr>homehome<wbr>home<wbr>home home<wbr>home<wbr>home home<wbr>home<wbr>home</p>>

8.HTML5网站布局元素：

<article>
<aside>
<header>
<footer>
<nav>
<section>

9.表单元素标签：

<input type="color"/>
<input type="date"/>
<input type="datetime"/>
<input type="datetime-local"/>
<input type="email"/>
<input type="file"/>
<input type="month"/>
<input type="number"/>
<input type="range"/>
<input type="search"/>
<input type="tel"/>
<input type="time"/>
<input type="week"/>
<input type="url"/>

帧动画

动画名称

animation-name:animate ;

动画执行时间

animation-duration: 5s;

动画执行方式

animation-timing-function: linear;

动画的延迟

animation-delay: 1s;

动画播放多少次 infinite循环播放

animation-iteration-count: 1;

播放方式 alternate 奇偶播放

animation-direction: alternate;

动画是否播放 paused

animation-play-state: running;*/

animation:animate 1s 2s linear infinite alternate;

动画停止到完成位置

animation-fill-mode: forwards;

}

@keyframes animate {

        动画的执行过程：
        两种： from  to    百分比 0% 100%
         from{
            transform: translatex(0);
        }
        to{
            transform: translatex(200px);
        }

css3弹性布局

1.布局分类：固定模式布局 流动布局 弹性布局flex.

 display:flex;  把容器转化为弹性布局
         flex-direction: column;  规定里面的元素按照什么方式来布局  row  column  翻转
         align-items  子元素在y 轴上对其的方式  center 居中  flex-end  底边  flex-start  上边  stretch 垂直拉伸
         justify-content x轴对齐   center 居中  flex-end 右边对齐  flex-start  左边对齐  space-between 左右两边对齐 中间平分pace-around  均分所有空白
         flex-wrap: wrap;  控制行里面  进行换行
         align-content: space-between;  在行里面使用 行留白的时候有效果
         flex: 1; 行里面的元素进行分配空间  按等份分配
         align-items  子元素在y 轴上对其的方式  center 居中  flex-end  底边  flex-start  上边  stretch 垂直拉伸
          align-items:stretch;
          justify-content x轴对齐   center 居中  flex-end 右边对齐  flex-start  左边对齐  space-between 左右两边对齐 中间平分
            space-around  均分所有空白
            justify-content: center;
            align-items: center;