媒体查询、转换与动画

最新推荐文章于 2024-01-29 09:48:02 发布

Lemon

最新推荐文章于 2024-01-29 09:48:02 发布

阅读量276

点赞数 1

分类专栏：学习

本文链接：https://blog.csdn.net/weixin_43314846/article/details/97121927

版权

学习专栏收录该内容

80 篇文章 0 订阅

订阅专栏

:)  零散的注意事项：
	1. 选择器优先级不止之前的情况，子代选择器、后代选择器...它们之间也有优先级。故有时候不一定能判断出来谁的优先级高
	2. 当给某元素定位时，定位取值为：position:fixed/absoluted ，相应元素会脱离标准流

媒体查询

:) 作用：为了将一套系统在多个终端使用，故需要媒体查询

媒体查询的两种方法

:) 媒体查询两种方法：
	1. 不同情况下用不同的css文件。缺点：css文件过多，丢失会造成严重的后果
	2. 不同情况下用不同的选择器。缺点：css样式有冗余

方法一：写成三个不同的css文件

media = "终端设备 and（表达式） and/, (表达式)..."

属性	取值
终端设备	`all/screen/print`

<!--应用-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="one.css" rel="stylesheet" media="all and (min-width:1024px)">
    <link href="two.css" rel="stylesheet" media="all and (min-width:780) and (max-width:1023px)">
    <link href="three.css" rel="stylesheet" media="all and (max-width:779px)">
</head>
<body>

</body>
</html>

方法二、将所有情况写在一个css文件中

在@media中写选择器，而不是直接写样式

@media 终端设备  and  (表达式)  and/,    (表达式){
	attr{
	}
}

扩展属性`data-属性名称`

若要在css中获取html中的标签中的扩展属性，则需要用：attr(data-属性名称)->暂时只用在::before选择器/::after选择器中给content赋值

<style>
		div::before{
			content:"("attr(data-test)")"	/*可获取到green*/
			}
</style>
  <div data-test="green" ></div>

动画

1. 不同浏览器对同一动画有不同解析
2. 只要对x/y都可以取值的，都有..x/..y。eg：translateY()/translateX()

一、 `transform`

属性：

1.移动： `translate(水平移动位置，垂直移动距离)`

1. 水平位移：值为正值，水平向右。反之
2. 垂直位移：值为正值，竖直向下。反之
3. important!!!    该属性是相对于原位置进行移动的
4. eg:transform:translate(..,..)

<!--在该例中，0%向右平移100px,20%相对于原位置向下移动100px,而不是在0%移动的基础上向下移动100px-->
<style>
	div{
		animation：test  1s  linear  1s  1;
	}
	@keyframes test{
		0%{
			transform:translateX(100px)
		}
		20%{
			transform:translateY(100px)
		}
}
</style>
<div></div>

2.旋转：`rotate(角度)`

1. 默认以中心点为参考点旋转。
2. 若要设置旋转中心点，可用transform-origin来改变旋转中心点
3. transform-origin可取left/bottom/right/top/百分比（以具体宽高为参考）/具体像素
4. eg:transform:rotate(10reg)

3. 缩放：`scale(值)`

1. 值大于1表示放大，值在0-1之间表示缩小
2. 一个值表示水平竖直都缩放，两个值：第一个值代表水平方向缩放，第二个值表示竖直方向缩放
3. transform:scale(0.2)

4. 倾斜:`skew(值)`

1. 沿x轴和y轴进行倾斜得到效果。正值表示正方向
2. eg:skew(10deg,10deg )

将四个属性放到一起

`transform:translate( ) rotate()  scale()  skew()`

过渡动画

`transition:等待时间  变化的属性  动画时间  速度`

1. `transition-delay`：等待时间

2. 变化的属性

如果变化的属性是宽/高/颜色...，此处取值为width/height/color...；
如果变化的属性是transform，此处取值为transform

3. 速度

取值	描述
`linear`	匀速
`ease`	先慢后快再慢
`ease-in`	以慢速开始的过渡（从慢到块）
`ease-out`	以慢速结束的过渡（从快到慢）
`ease-in-out`	以慢速开始和结束的过渡

动画

animation：动画名字时间速度等待时间循环次数方向

@keyframes 动画名字{
	0%{}
	25%{}
	60%{}
	...
}

属性	取值
循环次数	`infinite`/`n` :无限次循环/n次循环
方向	`normal`/`alternate`:动画正常播放/动画轮流反向播放

<style>
	div{
		animation:test  1s  linear  .4s   infinite
}
@keyframes  test{
	0%{}
	30%{}
	70%{}
	100%{}
}
</style>
<div></div>

透明度

opacity:透明度数值：0表示完全透明，1表示完全不透明

Lemon

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
媒体查询、转换与动画

:) 零散的注意事项： 1. 选择器优先级不止之前的情况，子代选择器、后代选择器...它们之间也有优先级。故有时候不一定能判断出来谁的优先级高 2. 当给某元素定位时，定位取值为：position:fixed/absoluted ，相应元素会脱离标准流媒体查询:) 作用：为了将一套系统在多个终端使用，故需要媒体查询媒体查询的两种方法:) 媒体查询两种方法： 1. 不同情况下用不...
复制链接

扫一扫