html+css+bootstrap网页布局学习Day4_html+css+bootstrap组合-CSDN博客

本文链接：https://blog.csdn.net/weixin_39048009/article/details/110550231

浏览器的私有前缀
根据不同的浏览器内核，css前缀会有不同。最基本的浏览器内核有如下四种，其她内核都是基于此四种进行在研发的。
1.gecke内核前缀为 -moz- 火狐浏览器
2.webkit内核前缀为 -webkit- 谷歌浏览器/safari
3.trident内核前缀为 -ms- ie内核
4.presto内核前缀为 -o- 目前只有opera
/* 在实际使用中通常将所有的前缀写一遍，标准的写在最后 */

		google -webkit-animation: ;
		opera-o-animation: ;
		火狐 -moz-animation: ;
		ie -ms-animation: ;
		标准 animation: ;

			background-image:-moz-linear-gradient(red,green,blue,orange);
			background-image:-webkit-linear-gradient(red,green,blue,orange);
			background-image:-o-linear-gradient(red,green,blue,orange);
			background-image:linear-gradient(red,green,blue,orange);

css3渐变
1.线性渐变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>线性渐变</title>
		<style>
			#box1{
				width: 300px;
				height: 300px;
				border: 1px solid blue;
				margin: 100px auto;
			/* 	background-image:-moz-linear-gradient(red,green,blue,orange);
				background-image:-webkit-linear-gradient(red,green,blue,orange);
				background-image:-o-linear-gradient(red,green,blue,orange);
				background-image:linear-gradient(red,green,blue,orange); */
				/*  从左开始展示线性展示 蓝色在最右*/
				/* background-image: linear-gradient(to left,blue,orange); */
				/* 调角度显示 */
				background: linear-gradient(30deg,blue,yellow);
			}
		</style>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

在这里插入图片描述
2.径向渐变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1{
				width: 300px;
				height: 300px;
				border: 1px solid blue;
				margin: 100px auto;
				/* 中心（at center center） 语法（at x y）都是从左上角原点为参考点
				x，y可以是像素也可以是百分比
				大小
				形状：circle   allipse
				*/
				background: radial-gradient(circle,blue,yellow);
			}
		</style>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

在这里插入图片描述
2d的transfrom

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1{
				width: 200px;
				height: 400px;
				background-color: #FFF;
				border: #CCCCCC 3px solid;
				margin: 50px auto;
			}
			#box1:hover{
				/* transform: translate(0px , -10px);
				box-shadow:0px 0px 5px 5px #F4F4F4 ; */
				/* transform: rotate(20deg);旋转 */
				transition: all 1s;
				transform: scale(0.5);
			}
		</style>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

3d
常用函数：
translate3d（x,y,x）定义3d转化
translateX（x）定义3d转化。仅用于x轴的值
translateY（y）定义3d转化。仅用于y轴的值
translateZ（z）定义3d转化。仅用于z轴的值
scale3d（x,y,z）定义3d缩放转换
scaleX（x）定义3d缩放转换，通过给定义一个X轴的值
scaleX（y）定义3d缩放转换，通过给定义一个Y轴的值
scaleX（z）定义3d缩放转换，通过给定义一个Z轴的值
rotateX3d（x，y，z，angle）定义3d旋转
rotateX（angle）定义沿X轴的3D旋转
rotateY（angle）定义沿Y轴的3D旋转
rotateZ（angle）定义沿Z轴的3D旋转

过度transition
使用css的属性值在一段时间内平滑过渡
1）指定四要素，
background、color
过度所需时间
过度函数
过度延迟时间，表示开始执行的时间
2）触发过度
通过用户的行为触发如点击、悬浮
过度时间
transition-duration：s|ms；
默认值为0，意味着不会有效果，所以必须设置transition-duration属性
过度函数
transition-timing-function：；
取值：
ease：默认值，规定慢速开始，然后变快，然后满树结束的过度效果
linear：匀速
ease-in：规定以慢速开始，加速效果
ease-out：规定以慢速开始，减速效果
case-in-out：规定以慢速开始和结束，先加速后减速效果
animation动画：
过度属性只能模拟动画效果
animation属性可以制作类似flash动画
通过关键帧控制动画的每一步
使得元素从一种样式逐渐变化为另一种样式
实现复杂的动画效果
语法

@keyframes name{
			35%{
				margin-left: -2100px;
			}
			70%{
				margin-left: -4200px;
			}
		}

	name可以替换

使用
语法：
animation：name duration timing-function delay iteration-count direction；

animation: name 10s infinite 1s alternate ;

animation-name：；调用动画，规定和keyframes的名字一致
animation-duration：s|ms；动画完成一个周期所需要的时间
animation-timing-function：；规定动画的速度变化类型
animation-delay：s|ms；播放之前的延迟时间
animation-iteration-count：数值|infinite；播放次数 infinite无限次播放
animation-direction：normal|alternate；动画播放方向
animation-fill-mode：forwards；动画停在最后一帧
animation-play-state：paused|running；属性规定动画正在运行还是暂停默认值是running