css3_02

最新推荐文章于 2024-11-16 10:44:21 发布

mini琳

最新推荐文章于 2024-11-16 10:44:21 发布

阅读量132

点赞数

CC 4.0 BY-SA版权

分类专栏： css3基础

本文链接：https://blog.youkuaiyun.com/qq_37962848/article/details/88093191

css3基础专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了CSS动画的基础知识，包括动画的关键帧、周期时长、延迟、循环次数及方向等概念。同时，详细讲解了3D变换中的透视、景深、变换样式和背面可见性等核心特性，并通过实例演示了如何使用这些技术实现元素的垂直水平居中和创建动态3D效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>