css3动画特效及新增表单元素

1.css3动画

（1）过渡动画：经常搭配悬停使用

transition:width 1s 3s linear(从左到右分别为 变化的属性 延迟时间  变化时间 匀速变化)

注：变化属性 all 指全部属性

property(属性)  delay(延迟)  duration(变化时间)   timing-function(速度)

（2）平移旋转动画

animation:m 3s 1s linear infinite(从左到右依次   声明动画序列的名称  变化时间 延迟时间   播放方式   循环播放)

animation-delay(延迟时间)

animation-direction(播放方向)

animation-iteration-count(播放次数)

animation-timing-function(播放是否暂停)

声明动画的播放序列有两种方式：

@keyframes mao{

方法1：from{

transform:translatex(0px);

}

to{

transform:translatex(333px);

}

方法二：0%{}

20%{}

......

100%

}

(3)自定义动画

transform:translatex(123px)     (在X轴平移 Y轴  Z 轴同理)

transform:rotate(90deg)     (旋转  注：rotate后边无X或Y 即默认是旋转Z轴)

transform:skew(90deg) (变形)

transform-origin:50% (设置旋转中心)

transform:scale(2 2)(横向扩大  纵向扩大)

2.新增多媒体元素

(autoplay  (自动播放)              controls  （控制器）                   loop    （循环播放）               )(注：视频)

（注：音频）

 audio{
            z-index: 4;
            position: absolute;
            bottom: 0;
            opacity: 0.1;
            transition: all 205s;
        }

（1）新表单元素

   

(安全密钥)

(定义页面侧边栏内容)

(定义页面之外的内容)

(定义网站里面的区段)

(声明网页底部的内容)

(声明网页头部的内容)

(定义网站里面的导航内容)

(声明时间)

(默认进度条   h5 中的)

3.心得体会

做动画效果时，有时候缺乏想象力，而且做的时候并不如自己想像的那样顺畅，偶尔会卡顿，然后几分钟内无从下手。所以在这方面应当多多改进。古人都说熟能生巧，我也是这样想的，哈哈！