HTML5新增多媒体属性(加入视频、音频)、CSS3高级应用(过渡、变形、动画)、精灵图

HTML5新增的多媒体标签

视频<video>

当前<video>元素支持三种视频格式:尽量使用mp4格式

浏览器MP4WebMOgg
Internet Explorer××
Chrome
Firefox√    从Firefox 21 版本开始   Linux系统从Firefox 30 开始
Safari××
Opera√ 从Opera 25版本开始

语法

<video src="文件地址" controls="controls"></video>
	<video controls="controls" width="300"> 
	<source src="move.ogg" type="video/ogg" >
	<source src="move.mp4" type="video/mp4" >
	您的浏览器暂不支持 <video> 标签播放视频
</video>

视频<video>——常见属性

属性描述
autoplayautoplay视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controlscontrols向用户显示播放控件
widthpixels(像素)设置播放器宽度
heightpixels(像素)设置播放器高度
looploop播放完是否继续播放该视频,循环播放
preloadauto(预先加载) none(不应加载)规定是否预先加载视频(如果有了autoplay 就忽略该属性)
srcurl视频url地址
posterlmgurl加载等待的画面图片
mutedmuted静音播放

音频<audio>

浏览器MP3WavOgg
Internet Explorer××
Chrome
Firefox
Safari×
Opera

语法

<audio src="文件地址" controls="controls"></audio>
<audio controls="controls">
	<source src="happy.mp3" type="audio/mpeg">
	<source src="happy.ogg" type="audio/ogg">
	您的浏览器暂不支持 <audio> 标签。
</audio>

音频——常见属性

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放
controlscontrols向用户显示控件,比如播放按钮
looploop每当音频结束时重新开始放
srcurl要播放音频的地址
  • 谷歌浏览器把音频和视频的自动播放禁止了
  • 可以给视频标签添加muted属性来静音播放视频,音频不可以(可以通过JavaScript解决)

CSS3高级应用

过渡

在不使用 Flash 动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画: 是从一个状态 渐渐的过渡到另外一个状态
现在经常和 :hover 一起 搭配使用。

语法

transition: 要过渡的属性 花费时间 运动曲线 何时开始;
  1. 属性:想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡, 写一个all 就可以。
  2. 花费时间:单位是 秒(必须写单位) 比如 0.5s
  3. 运动曲线:默认是 ease (可以省略)
  4. 何时开始:单位是 秒(必须写单位)可以设置延迟触发时间 默认是 0s (可以省略)
    在这里插入图片描述

过渡使用口诀:谁做过渡给谁加

变形

CSS3变形:平移、旋转、缩放、变形
transform:none——不变形
transform-function——变形函数
在这里插入图片描述
transform:translate(x-value,y-value)省略第二个参数默认为0
transform:scale(x-axis,y-axis)省略第二个参数默认为第一个值
transform:skew(x-angle,y-angle)角度值,省略第二个默认为0
transform:rotate(angle)角度值

动画

@keyframes 动画名称{
		@keyframes-selectors {样式属性(即css-styles)};
	}

keyframes-selector:关键帧选择器 值:百分比、from(0%)或者to(100%)
css-styles:
定义执行到当前关键帧时对应的动画状态,由css样式属性进行定义,多个属性之间用分号间隔,不能为空

属性描述
animation-name使用定义好的动画 动画名称 ①none(默认 适用于所有块元素和行内元素)②keyframename
animation-duration动画完成需要的时间(s/ms)
animation-timing-function动画曲线效果
animation-delay动画延迟属性
animation-iteration循环播放的次数infinite
animation-direction动画播放的方向 ①normal(默认)②alternate(奇数正向、偶数逆向)
animation复合属性 animation-name animation-duration (必须有)

精灵图

将若干个图片转换成一个大图片有效地减少服务器接收和发送请求的次数,提高页面的加载速度,于是出现了CSS精灵技术(也称为CSS Sprites、CSS雪碧)
在这里插入图片描述
核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。

举例
王者荣耀精灵图:
在这里插入图片描述
淘宝精灵图:
在这里插入图片描述

精灵图的使用

使用核心:

  1. 主要借助于移动背景图片位置来实现,可以使用background-position
  2. 移动的距离就是这个目标图片的xy坐标(网页中的坐标有所不同)。
  3. 一般情况下都是往上往左移动,故数值是负值(注意网页中的坐标:x轴右边是正值,左边是负值,y轴同理)
  4. 使用精灵图时需要精确测量每个小背景图片的大小和位置

精灵图示例

<style>
    .box{
        width: 200px;
        margin: 0 auto;
        border-style: solid;
        border-color: black;
        overflow: hidden;
    }
    span {
        border-style: solid;
        border-color: chartreuse;
    }
    .iton{
        width: 43px;
        margin-left: 10px;
        height: 44px;
        float: left;
        background: url("./images/精灵图1.png") no-repeat;
    }
    /* .span01 {
        margin-left: 100px;
        margin-top: 30px;
    }
    .span02 {
        margin-top: 20px;
    } */
    .span01{
        background-position: 0 0;
    }
    .span02{
        background-position: -47px 0;
    }
    .span03{
        background-position: -91px 0;
    }
    .span01:hover{
        background-position: 0 -45px;
    }
     .span02:hover{
        background-position: -47px -45px;
    }
    .span03:hover{
        background-position: -91px -45px;
    } 
</style>
<body>
    <div class="box">
        <span class="iton span01"></span>
        <span class="iton span02"></span>
        <span class="iton span03"></span>
    </div>
</body>

效果如下:
在这里插入图片描述
在这里插入图片描述

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值