第一天基础html和css的复习总结（5）

最新推荐文章于 2024-07-25 11:26:35 发布

写bug的小气球

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量115

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_46013619/article/details/103538964

版权

1.CSS来完成loading效果
出现了一以下一些问题：
1.@keyframes move{
0%{transform: scale(0);}
50%{transform: scale(1);}
100%{transform: scale(0);}
}
2.设置帧动画不熟练，
引入帧动画animation: move 1.5s infinite linear（之前在这里写了alternate，代表往复运动，导致loading效果不正确，没有必要引入往复运动，不是设置了时间么）
3.并且在设置p的位置对absolute有点疑惑，为什么要开启这个，因为下面要准备开始通过left等设置p的位置
4.这里的最后的delay为何设置为负值，因为正值会导致一开始后面的p不动，等待到达1秒多才动，设置负值上去直接就动了
在这里插入图片描述

2.旋转太极图
这里的思路就是先做一个盒子，盒子里包着一个大黑圆，在来一个白色半圆，再分别在中间位置上下放置两个白球黑球，最后再将两个黑白球放入中间形成一个空心点，就完成了一个太极图，
难度不高，主要还是position和animation: move 3s linear infinite（重复播放）;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 300px;
			height: 300px;
			/* border: 1px solid #000000; */
			margin: 100px;
			position: relative;
			animation: move 3s linear infinite;
		}
		.black{
			width: 300px;
			height: 300px;
			background: #000000;
			border-radius: 50% ;
			position: absolute;
		}
		.white{
			width: 150px;
			height: 300px;
			background: white;
			border-top-right-radius: 150px;/* px值其实就是以一个150半径的圆 */
			border-bottom-right-radius:150px ;
			position: absolute;
			left: 150px;
			top: 0;
			
		}
		.blackbb{
			width: 150px;
			height: 150px;
			position: absolute;
			left: 75px;
			top: 0;
			background: white;
			border-radius: 50%;
		}
		.whiteww{
			width: 150px;
			height: 150px;
			position: absolute;
			left: 75px;
			bottom: 0;
			background: #000;
			border-radius: 50%;
		}
		.blackbbl{
			width: 40px;
			height: 40px;
			position: absolute;
			background: #000000;
			border-radius: 50%;
			left: 130px;
			top: 55px;
		}
		.whitewwl{
			width:40px;
			height:40px;
			position: absolute;
			background: #FFFFFF;
			border-radius: 50%;
			left: 130px;
			bottom: 55px;
		}
		@keyframes move{
			from{
				transform: rotate(0);
			}
			to{
				transform: rotate(-360deg);
			}
		}
	</style>
	<body>
		<div class="box">
			
			<div class="black"></div>
			<div class="white"></div>
			<div class="blackbb"></div>
			<div class="whiteww"></div>
			<div class="blackbbl"></div>
			<div class="whitewwl"></div>
		</div>
	</body>
</html>

3,.风琴效果
这里可以搞出来一个三角箭头
border-top: 5px solid white;
border-left: 5px solid rgba(0,0,0,0);/* 代表给出透明 /
border-right: 5px solid transparent;/ 代表给出透明 /
border-bottom: 5px solid transparent;
背景的线性渐变
background: linear-gradient(#6bb2ff,#2288dd);/ 线性渐变 */

4.实现垂直居中的几种方法
例如：网页弹窗
通过定位
1.position：flex
top：50%
left：50%
margin-top：-100px（指的是div的一半100px）
margin-left：-100px

2.position：flex
top：50%
left：50%
transform;translate(-100px,-100px)
有兼容性，缺点低版本可能不兼容，c3新加的transform

3.比较好，灵活
position：flex
top：0
left：0
right：0
bottom：0
margin：auto

4.一屏页面（像手机弹窗之类的啦）
弹性盒的设置要加在父元素上
html,body{
height: 100%;
width: 100%;
}
body{
display: flex;
justify-content: center;/* 主轴x的对齐 /
align-items: center;/ 侧轴y的对齐单独设置是不起作用，需要声明body的高度为多少 */
height: 100%;
}

5.旋转缩放动画效果
这里出现了两处错误，
1.在p标签处transform: rotate(0deg) scale(1,1);这样写，在下面的hover中将里面的值transform: scale(1,1) rotate(0deg);这样写，导致了显示错误，达不到动画出来的效果，要一一对应才可以
2.再给p标签设置 border: 20px solid rgba(255,255,255,0.5); 之后，出现了问题，出现了这样的效果在这里插入图片描述

这是因为设置border时background默认从边框里面开始加载背景图片，所以我们用background-origin: border-box;让背景图片进入边框就好了，这也是个巧合吧，因为视频中图片没有，所以我自己找的图片，调整大小，操作一阵子就发现了这个问题，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 300px;
				height: 300px;
				position: relative;
				margin: auto;
				border-radius: 50%;
				 background: red; 
				
			}
		 	p{
				width: 260px;
				height: 260px;
				background: url(../003图片的使用/images/未标题-2.jpg) no-repeat;
				position: absolute;
				background-size: 300px 300px;
				border-radius: 50%;
				transition: all 1s;
			 	border: 20px solid rgba(255,255,255,0.5); 
				transform: rotate(0deg) scale(1,1);
				/* background-origin: border-box; */
			
			} 
			h1{
				position: absolute;
				width: 300px;
				height: 300px;
				background: black;
				font-size:42px;
				color: white;
				line-height: 300px;
				text-align: center;
				border-radius: 50%;
				
				transform: rotate(0deg) scale(0);
				transition: all 1s;
			}
			div:hover p {
				transform: rotate(360deg) scale(0,0);
			
				
			}
			div:hover h1{
				transform: rotate(360deg) scale(1);
				
			
			}
		</style>
	</head>
	<body>
		<div>
			<h1>Giao</h1>
			<p></p>
		</div>
	</body>
</html>

写bug的小气球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一天基础html和css的复习总结（5）

1.CSS来完成loading效果出现了一以下一些问题：1.@keyframes move{0%{transform: scale(0);}50%{transform: scale(1);}100%{transform: scale(0);}}2.设置帧动画不熟练，引入帧动画animation: move 1.5s infinite linear（之前在这里写了alternate...
复制链接

扫一扫