css3_02

最新推荐文章于 2024-04-21 14:36:15 发布

mini琳

最新推荐文章于 2024-04-21 14:36:15 发布

阅读量99

点赞数

分类专栏： css3基础

本文链接：https://blog.csdn.net/qq_37962848/article/details/88093191

版权

css3基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css动画

百分比都是参照于谁？

元素垂直居中方案

已知高宽

position=absolute,lrtb=0,margin=auto,包含块一定是容器（绝对定位盒容器的模型）

Left+right+w+p+m =包含块的宽度

Top+bottom+h+p+m =包含块的高度

Position=absolue,1t=50%,包含块一定的是容器，marginT/L为负的自身的一半
Position=absolue,1t=50%,包含块一定的是容器， transform:translate3d(50%,-50%,0);
flex

未知高宽

position=absolute,1t=50%,包含块一定的是容器，transform:translate3d(-50%,-50%,0)
Flex

Img元素如何垂直水平居中

1.基线

1.3D变换

Perspective，灭点

景深的写法

2种写法。一种css属性，一种是transform属性的一个变换函数（必须在第一位）

景深的作用

构建3D舞台，决定用户的肉眼距离屏幕的水平距离！使3D变换的元素具有近大远小的感觉

景深越大，灭点越远，元素变形越小

景深越小，灭点越近，元素变形越大

景深基点

景深叠加

景深是一个不可继承的属性，但他可以作用于所有的后代元素

Transform-style

Transform-style的作用：使3D舞台有一个层次感

Transform-style是一个不可继承属性，他只作用域子元素

Backface-visibility

隐藏元素背面

一个元素分两面，但不意味着元素有厚度。在一个状态下，元素只能展现自己的一面

2.css3动画基础

Animation-name:关键帧的名字关键帧

@keyframes animationName{

Keyframe-selector{

css-style;

}}

Animation-duration:一个动画周期的时长

Animation-timing-function:作用于一个关键帧周期而非整个动画周期

Animation-delay:代表动画的延迟（这是一个动画外的属性）

Animation-iteration-count:循环关键帧的次数！（只会管理动画内的属性，动画的延迟不会被循环）

Animation-direction:改变动画关键帧执行的方向，还会影响Animation-timing-function的形式

Animation-fill-mode:管理所有动画外的状态！

什么是动画外的状态

From之前

Animation-delay

To之后

值

None:动画外的状态保持在动画之前的位置

Backwards:from之前的状态与from的状态保持一致

Forwards: to之后的状态与to的状态保持一致

Both:动画外的状态与from和to的状态保持一致

Animation-play-state:管理动画的运行与静止

关键帧

@keyframes animationName{

Keyframe-selector{

css-style;

}}

Keyframes-selector 可以是关键帧from(0%)和to(100%)

可以是百分比

代表的是时间的百分比

eg1:多棱柱立方体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;			
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			#wrap{
				position: absolute;
				left:0;
				top:0;
				right:0;
				bottom:0;
				margin:auto;
				width:300px;
				height: 300px;		
				/* border:1px solid; */
				perspective:200px;
			}
			#wrap >.box{
				position: absolute;
				left:0;
				right:0;
				top:0;
				bottom:0;
				margin:auto;
				width:300px;
				height:300px;
				transition:10s transform;
				transform-style:preserve-3d;
			}
			#wrap>.box > div{
				position: absolute;
				width:300px;
				height:300px;
				background:pink;
				text-align: center;
				font:50px/300px "微软雅黑";
				backface-visibility:hidden;
			}
			#wrap:hover>.box{
				transform: rotateY(-360deg);
			}
		</style>
	</head>
	
	<body>
		<div id="wrap">
			<div class="box">
			</div>
		</div>
	</body>
    <script type="text/javascript">
	window.onload=function(){
		createLz(10);
	}
	function createLz(n){
		var boxNode=document.querySelector("#wrap>.box");
		var styleNode=document.createElement("style");
		//外角
		var degOut=360/n;
		//内角
		var degIn=180 - 360/n;
		
		
		var text="";
		var cssText="";
		for(var i=0;i<n;i++){
			text+="<div>"+(i+1)+"</div>";
		    cssText+="#wrap >.box>div:nth-child("+(i+1)+"){transform:rotateY("+(i*degOut)+"deg);}";
			
		}
		boxNode.innerHTML=text;
		var faceNode=document.querySelector("#wrap>.box>div");
        //棱长
		var length=faceNode.offsetWidth;
		
		cssText+="#wrap >.box{transform-origin: center center -"+(length/2 * Math.tan((degIn/2)*Math.PI/180))+"px;}";
		cssText+="#wrap>.box>div{transform-origin: center center -"+(length/2 * Math.tan((degIn/2)*Math.PI/180))+"px;}";
		
		
		
		styleNode.innerHTML=cssText;
		document.head.appendChild(styleNode);
		
	}
</script>
</html>

mini琳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3_02

css动画百分比都是参照于谁？元素垂直居中方案已知高宽position=absolute,lrtb=0,margin=auto,包含块一定是容器（绝对定位盒容器的模型）Left+right+w+p+m =包含块的宽度Top+bottom+h+p+m =包含块的高度Position=absolue,1t=50%,包含块一定的是容器，marginT/L...
复制链接

扫一扫