Web——day03——CSS

于 2021-07-28 21:13:48 发布
阅读量61 收藏
点赞数
分类专栏： Web学习 文章标签： css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45792414/article/details/119188189
版权

自定义字体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/*自定义字体*/
			@font-face {
				font-family:"myfont01";    /*字体的名字，自定义*/
				src: url(fonts/icomoon.ttf);   /*文件夹名*/
				src: url(fonts/icomoon.svg);   /*依次寻找能用的字体，找到即不再往下扫描*/
				src: url(./fonts/icomoon.woff);
				src: url(fonts/icomoon.eot);
				src: url(css/demo.css);
			}
			.s1{
				font-family: "myfont01";
			}
			.s1::after{
				content: "\e912";
				font-size: 30px;
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<span class="s1">hello 中国 123!</span>
	</body>
</html>

代码的运行结果：
上述代码的运行结果

遮罩效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>遮罩效果</title>
		<style>
			.pic{
				width: 1000px;
				height: 462px;
				background-image: url(img/兰台小筑.jpg);
				position: relative;
			}/*外层设置相对，里层设置绝对*/
			.pic:hover::after{
				content: "";
				width: 1000px;
				height: 462px;
				background-color: rgba(255,0,0,0.4);    /*所有都为0是黑色*/
				position: absolute;
				left: 0;
				top: 0;
			}
			.pic:hover::before{
				content: "";
				width: 1000px;
				height: 462px;
				background-image: url(img/播放.webp);
				background-repeat: no-repeat;
				background-position: center;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div class="pic"></div>
		
	</body>
</html>

代码的运行结果：
遮罩效果

清除浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>清除浮动</title>
		<style>
			div{
				width: 400px;
				height: 100px;
			}
			.d1{
				background-color: red;
				float: left;
			}
			/*.d2{    
				background-color: #7FFFD4;
				clear: left;
			}*//*第一种清除浮动的方式*/
			.d2{
				background-color: #7FFFD4;
			}
			.d2::after{
				content: "";
				clear: left;
				display: block;
				height: 0;
				visibility: hidden;
			}/*这种需要多加一个div*/
		</style>
	</head>
	<body>
		<div class="d1">11111</div>
		<div></div>
		<div class="d2">22222</div>
	</body>
</html>

代码的运行结果：
清除浮动

Test——进度条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>进度条</title>
		<style>
			.b1{
				width: 1000px;
				height: 100px;
				border: 1px solid deepskyblue;
				border-radius: 100px;
				background-color: powderblue;
				/*transition: all 10s linear;*/
			}
			/*.b1:hover>.b2{
				border-radius: 100px;
				width: 50%;
				height: 100%;
				background-color: red;
				transition: all 10s linear;
			}*/
			.b2{
				width: 0;
				height: 100%;
				border-radius: 100px;
				background-color: red;
				/*transition: all 1s linear;*/
			}
			.b1:hover>.b2{
				width: 50%;
				transition: all 1s linear;
			}/*悬停谁给谁添加*/
		</style>
	</head>
	<body>
		<div class="b1">
			<div class="b2"></div>
		</div>
	</body>
</html>

代码的效果：
悬浮之前：
进度条
悬浮之后：
进度条

父子元素清除浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父子两个元素-清除浮动</title>
		<style>
			.box{
				width: 800px;
				height: 300px;
				border: 1px solid;
				float: left;
			}
			/*.d1,.d2{
				width: 200px;
				height: 100px;
				border: 1px solid black;
				margin: 10px;
			}*/
			.box div{
				width: 200px;
				height: 100px;
				border: 1px solid yellow;
				margin: 10px;
			}
			.d1{
				background-color: pink;
			}
			.d2{
				background-color: greenyellow;
			}
			.box::after{
				content: "";
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<!--before-->
			<div class="d1">11111</div>
			<div class="d2">22222</div>
			
			<div>hellohellohellohellohellohellohello</div>
			<!--after-->
		</div>
		<div>hellohellohellohellohellohellohello</div>
	</body>
</html>

代码的运行结果：
父子清除浮动

模糊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模糊</title>
		<style>
			img:hover{
				filter: blur(2px);
			}
		</style>
	</head>
	<body>
		<img src="img/移动城堡.jpg" />
	</body>
</html>

代码运行结果：
模糊

屏幕宽度-100px

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: calc(50% - 100px);/*屏幕宽度-100px   %后面必须有空格！！减号后面必须有空格！！*/
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

代码运行结果：
宽度-100px

变色进度条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 40px;
				background-color: red;
				/*transition: width 1s linear ;
				transition: background-color 1s linear;*/
				transition: all 1s linear;
			}/*linear匀速变化   ease-in加速 ease-in-out先加速后减速*/
			div:hover{
				width: 300px;
				background-color: greenyellow;
				border-radius: 100px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

代码的运行结果（不全）：
最开始：
变色变圆进度条
最终结果：变色变圆进度条

css2D效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css3的2D效果</title>
		<style>
			.box{
				width: 800px;
				height: 300px;
				border: 1px solid;
			}
			.b1{
				width: 50px;
				height: 50px;
				background-color: red;
			}
			.box:hover>.b1{
				/*transform: translateX(500px);*//*平移*/
				/*transform: translate(500px,200px);*/
				/*transform: translate(500px,300px);*//*不影响其他模块*/
				/*transform: rotate(360deg);*//*z轴旋转360度*/
				/*transform: rotateX(360deg);*//*x轴*/
				transform: rotateY(360deg);/*y轴*/
				border-radius: 50px;*
				transition: all 2s ease;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="b1"></div>
		</div>
		<!--旋转，遮罩，平移-->
	</body>
</html>

代码的运行结果：
开始：
css的2D效果
结束：
css的2D效果

作业：css3选择器before与after应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css3选择器before与after应用</title>
		<style>
			*{   /*匹配所有标签*/
				margin: 0;
				padding: 0;
			}
			nav{
				width: 80%;
				height: 40px;
				border:1px solid;
				padding: 3px;
				margin: 0 auto;
			}
			nav>ul{
				background-color: aquamarine;
				list-style: none;
				overflow: hidden;/*溢出：隐藏  实现子层元素浮动，父元素高度无法撑开的问题*/
				height: 100%;
				line-height: 40px;/*一般不用百分比*/
			}
			nav>ul>li{
				float: left;
				width: 20%;
				margin-left: 10%;
				/*margin-right: 3px;*/
				/*border: 1px solid red;*/
				/*outline: 1px solid red;*/
				text-align: center;
				position: relative;
			}
			/*悬停效果：添加三角形*/
			nav>ul>li:hover::before{
				content:"";
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-top: 10px solid transparent;
				border-bottom: 10px solid red;
				position: absolute;
				left: 50%;
				bottom: -2px;
				margin-left: -10px;
			}
		</style>
	</head>
	<body>
		<nav>
			<ul>
				<li>首页</li>
				<li>个人中心</li>
				<li>联系我们</li>
			</ul>
		</nav>
	</body>
</html>

代码运行结果：
下面出现红色三角

作业：遮罩效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>遮罩效果</title>
		<style>
			.pic{
				width: 1066px;
				height: 600px;
				background-image: url(img/兰台小筑.jpg);
				
			}
			.cov{
				width: 1066px;
				height: 0;
				background-color: rgba(0,0,0,0.4);
				transition: all 3s ease-in;
				
			}
			.pic:hover>.cov{
				height: 600px;
				float: left;
				transform: rotateY(360deg);
				transition: all 3s ease;
			}
		</style>
	</head>
	<body>
		<div class="pic">
			<div class="cov"></div>
		</div>
	</body>
</html>

代码运行结果：
请添加图片描述
请添加图片描述
请添加图片描述

如果图片侵权，那我就删

——The End

子曰礼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值