文档章节

学习02-css(动画的制作,浏览器私有前缀,meta视口标签,背景缩放)

宋_
 宋_
发布于 02/27 17:26
字数 481
阅读 169
收藏 0

css动画

1.先定义动画,用keyframes定义动画(类似定义类选择器)

 @keyframes 动画名称 {
            0% {
                width: 100px;
            }
            100% {
                width: 200px;
            }
        }

2.再使用调用动画

animation-name: 动画名称;

调用动画

animation-duration: 持续时间;

持续时间

animation-timng-function

规定动画的速度曲线,默认ease

animation-delay

规定动画何时开始,默认0

animation-iteration-count

规定动画被播放的次数默认为1,还有infinite

animation-direction

规定动画是否在下一周期逆向播放,默认是“normal”,alternate逆向播放

animation-play-state

规定动画是否正在运行或者暂停,默认是“running”,还有“paused”

animation-fill-mode

规定动画结束后状态,保持forwards回到起始backwards

3.动画简写

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation:myfirst 5s linear 2s infinite alternate;

浏览器私有前缀

-moz-

代表firefox浏览器

-ms-

代表ie浏览器

-webkit-

代表Safari,chrome

-o-

代表opera

meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 ">

width

宽度设置的是viewport宽度,可以设置device-width特殊值

initial-scale

初始缩放比,大于0的数字

maximum-scale

最大缩放比,大于0的数字

minimun-scale

最小缩放比,大于 0的数字

user-scalable

用户是否可以缩放,yes或no(1或0)

背景缩放

background-size:数值;

长度

只写一个的话会等比例缩放

百分比

相对父盒子来说比例

cover

把背景图片扩展至足够大,使其背景图像完全覆盖背景区域

contain

把背景图像扩展至最大尺寸,使其宽度和高度完全适应内容区域

 

 

© 著作权归作者所有

宋_
粉丝 2
博文 66
码字总数 19036
作品 0
吕梁
私信 提问
加载中

评论(0)

【移动端 Web】怎么循序渐进地开发一个移动端页面

1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。这是像素的概念,实...

叶超Luka
2017/12/22
0
0
一篇真正教会你开发移动端页面的文章(一)

一个移动端的时代 从我工作以来,开发的一直都是移动端的页面,只有偶尔去开发几个PC端的页面,现在是一个移动端的时代,移动先行已经深入骨髓,作为一个web前端开发,如果你还在为如何开发移...

神奇的小胖子
2019/09/04
0
0
第118天:移动端开发——视口

移动端视口的分类说明。在开始之前,先看一个典型的例子: 1 2 @media screen and (max-width:480px){3 //宽度不超过480px时的样式 4 } 上述代码相信大家在做移动端开发时经常去书写。它研究...

半指温柔乐
2017/12/18
0
0
「前端」rem 缩放方案 flexible-js 兼容 375px 方案的思路

本文来自尚妆前端团队南洋 发表于尚妆github博客,欢迎订阅。 移动端H5页面rem缩放方案flexible.js兼容375px方案的思路 参考: 移动端高清、多屏适配方案 viewport-and-flexible.js flexibl...

尚妆产品技术刊读
2017/03/02
0
0
W3C规范阅读随笔 - CSS Device Adaptation Module Level 1

文档路径:https://www.w3.org/TR/css-device-adapt-1/ 摘要 该规范提供了一种可以让使用者能够在 CSS 中指定视区(viewport)的大小、缩放因子和方向的方法,初始化包含块基于视区。 1 介绍...

水果味的C
2018/07/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

人脸识别签到闸机 测温门禁通道 智能口罩识别

艾力奋口罩人脸识别测温闸机: 在展览会议期间,可对体温异常人员精确筛查告警:通过人脸识别AI算法和黑体对温度数据进行优化和校准后,仅对行人额温进行测量,保证测量精度误差在±0.3℃以内...

osc_wip0vvls
28分钟前
22
0
教你如何实现一个翻页笔插件?

前言 2020 年的第一篇文章,技术源于生活,作为码农,我觉得最得意的事情大概就是解决一个真实可见的问题了。前段时间我在团队做分享的时候,订了一个比较大的培训室,电脑离的远,所以就需要...

好未来技术团队
29分钟前
16
0
concurrentHashmap内容介绍

ConcurrentHashMap 的工作原理及代码实现   ConcurrentHashMap采用了非常精妙的"分段锁"策略,ConcurrentHashMap的主干是个Segment数组。Segment继承了ReentrantLock,所以它就是一种可重入...

osc_5emtajt2
29分钟前
24
0
hashMap在java7的介绍

1.Java:这是一份全面 & 详细的HashMap 1.7源码分析指南(转载) 前言 HashMap 在 Java 和 Android 开发中非常常见 今天,我将带来HashMap 的全部源码分析,希望你们会喜欢。 本文基于版本 ...

osc_5ijle82k
31分钟前
10
0
Modbus协议和应用开发介绍

因业务需要了解Modbus协议的使用,因此对Modbus的协议,以及相应的C#处理应用进行了解,针对协议的几种方式(RTU、ASCII、TCPIP)进行了封装,以及对Modbus的各种功能码的特点进行了详细的了...

osc_8i2fhl7z
31分钟前
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部