美文网首页
前端学习笔记----Day11_h5新增标签和Animation

前端学习笔记----Day11_h5新增标签和Animation

作者: Pamela_Liu | 来源:发表于2018-03-24 19:06 被阅读0次

h5新增标签

video

  • autoplay webm格式

  • controls 控制按钮 比如播放按钮

  • 宽高只设置一个时,按比例缩放

  • preload 页面显示的时候进行预加载, 并预播放. 与autoplay互相冲突

  • loop 视频默认播放次数

video兼容性问题
<video controls="controls">
    <source src="video/sb1.webm" type="video/webm">
    <source src="video/sb1.mp4" type="video/mp4">
    <source src="video/sb1.ogg" type="video/ogg">
    对不起,你的浏览器版本太旧,请升级...
    sorry, your browser does not support this video tag...
</video>

audio音频

  • 属性同视频

details 详情和概要标签

  • 节省空间 collapse

marquee 跑马灯

  • behavier : slide表示到边界暂停 alternate返回最初的位置

  • direction

  • scrollamout

  • loop:-1 和loop效果相同

  • 弹幕


/*分隔线 不推荐使用*/

<hr>

transition 过渡 (需要人为触发)

过渡是css3新增的属性
过渡的三要素
1.有属性发生改变
2.告诉系统那个属性发生改变
transition-property 规定应用过渡的 CSS 属性的名称
3.过渡时间

1.transition-timing-function 属性规定过渡效果的速度曲线。
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))

2.简写
transition: property duration timing-function delay;
transition: 过渡属性的名称 过渡时长 过渡速度曲线 延迟
简写可以省略 只有时间是不能省略的 其他的属性都可以省略 如果省略就用默认值,自己设置了就用你设置的值</pre>

  • 默认 all 0 ease 0

transform 形变

  • 位移transform: translate(水平距离, 垂直距离)

  • 拉伸缩放transform: scale(水平比例, 垂直比例)--- 如果放大比例相同可以简写为一个值

  • 旋转transform: rotate(45deg)------ 正数为顺时针

  • 只要旋转就会发生坐标系改变(除了360*n deg)

  • transform-origin改变形变的中心点 默认为图片的中心center

1. transform-origin: left top;

2. px

3. 百分比

perspective:300px;

透视效果. 要想实现效果,给父元素添加

training手风琴效果; 照片墙
opacity透明度
  • 父元素透明.子元素继承
翻转菜单
  • 设置鼠标离开的动画: 将这个元素的:hover去掉就可以设置属性了

  • 后面的元素会盖住之前写的翻转菜单, 为了将菜单显示在最上面,将其设置为position: relative; 若有其他定位元素重叠时时再设置其z-index

Animation 动画 不需要人为触发

  • 动画三要素

1. 规定动画名称

2. 实现动画

3. 时长

  • @keyframe描述动画路径, 后接 animation-name

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 100px;
        height: 50px;
        background-color: yellow;

        /*
        告诉系统要做那个动画
        动画的名称自己起
        */
        animation-name: move;
        /*动画的时长*/
        animation-duration: 1s;
        /*动画的延迟时间*/
        /*animation-delay: 2s;*/
        /*规定动画执行的次数
        infinite 动画执行无限次
        */
        /*animation-iteration-count: 2;*/
        /*animation-iteration-count: infinite;*/
        animation-iteration-count: 3;

        /*规定动画是否反转
        normal 默认值。动画应该正常播放。  测试
        alternate  动画轮流反向播放
        */
        animation-direction: alternate;
    }
    @keyframes move {
        /*在这里面描述动画执行的路径*/
        from{
            /*margin-left: 0;*/
            margin-top: 0;
        }
        to{
            /*margin-left: 300px;*/
            margin-top: 400px;
        }
    }
    .box:hover{
        /*
        动画是否暂停
        paused 规定动画已暂停
        running    规定动画正在播放。
        */
        animation-play-state: paused;
    }
</style>

@keyframe可以设置百分比表示: 某个时间的动作
总执行时间*百分比.

  • animation-fill-mode : forwards; 当动画完成后, 保持最后一帧的状态

  • backwards; 在动画延迟的时候,保持第一帧的状态

轮播图 重点 面试

  • animation: name duration timing-function delay iteration-count direction;
  • animation: 动画名称 动画时长 动画运动曲线 动画延迟 动画执行的次数 动画要不要往返;
  • 动画名称 动画时长 不能省略其他都可以省略

animation: move 2s linear infinite;

3D

让子元素保留3D效果

//给父元素设置
transform-style: preserve-3d;

1. 帧动画注意属性覆盖问题

transform: rotateY(120deg);

2. 在动画中, 不变的值放在前面, 要变的值放后面

3. 防止滚动条的产生: overflow:hidden;

bd+ 按Tab键生成 border: 1px solid #fff;

background-size
background-size四个属性值比较.png
  • cover:

1. 宽度和高度等比拉伸

2. 宽度高度拉伸到边界(最长的边到边界)

  • contain

1. 宽度和高度等比拉伸

2. 宽度高度拉伸到边界(最短的边到边界)

background-origin
  • 形容图片左上角从哪里开始

从大到小 border-box (中间隔着border)> padding-box (中间隔着padding)> content-box

background-clip
  • 剪切图片, 浏览器只渲染被选中的区域
多重背景图片

注意事项:

  • 先设置的会盖住后设置的

  • 如果多张图片设置的属性一样就可以简写

  • 控制多张背景图片移动速度方式:

1. 时间相同时,控制移动不同

2. 移动距离相同时,控制动画时长

相关文章

网友评论

      本文标题:前端学习笔记----Day11_h5新增标签和Animation

      本文链接:https://www.haomeiwen.com/subject/zafccftx.html