JavaWEB笔记04 CSS常用操作（3）

最新推荐文章于 2022-01-08 21:04:30 发布

RainOnTheMoon

最新推荐文章于 2022-01-08 21:04:30 发布

阅读量184

点赞数

分类专栏：笔记文章标签： css html java

本文链接：https://blog.csdn.net/weixin_46702804/article/details/118763706

版权

笔记专栏收录该内容

35 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS在网页设计中的应用，包括大小写转换、段落和列表属性设置、彩色图片转黑白、下拉菜单效果、页面动画以及固定层效果的实现。通过实例代码展示了如何使用CSS创建导航栏、实现图片的黑白滤镜效果、制作下拉弹框以及运用transform和transition生成相片效果。同时，文章涵盖了浏览器兼容性和过渡动画的细节，为提升网页交互体验提供了实用技巧。

摘要由CSDN通过智能技术生成

JavaWEB笔记04 CSS常用操作（3）

文章目录

JavaWEB笔记04 CSS常用操作（3）

一.大小写转换：

text-transform: uppercase小写转大写
text-transform: downcase大写转小写

二.段落属性设置：

CSS中对于段落属性的设置，一般在p标签内使用对应属性：

选择p之后使用text-index: 2em表示缩进原来大小的两倍
行高的设置：line-height: 1.5em表示行高之间为1.5倍行高，同样使用line-height: 块标签height可以设置文本上下居中

三.列表属性设置：

CSS中可以使用ul li列表标签可以来制作页面中的导航栏：

首先去掉列表默认样式去除：list-style: none;padding: 0;分别可以去掉自带的黑色圆点以及去块内间距
使用浮动使其成为一行，后调整宽高，使用ul和li对于二级列表和菜单可以轻松实现
二级菜单实现时：注意hover在二级菜单中的实现
具体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul {
				padding: 0;
				/* 列表项前面的集合图形 */
				list-style: none;
			}

			#wai {
				height: 80px;
				border: 0px solid black;
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;

			}

			#wai>li {
				float: left;
				border: 1px solid black;
				height: 50px;
				width: 150px;

				text-align: center;
				line-height: 50px;
				border-radius: 5px;
				
			}
			#nei{
				
				display: none;
				
			}
			#nei li{
				height: 50px;
				width: 150px;
				border: 1px solid black;
				border-radius: 5px;
			}
			
			#wai>li:hover>ul{
				display:block;
			}
			
		</style>
	</head>
	<body>
		<ul id="wai">
			<li>进入首页
				<ul id="nei">
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>

			</li>
			<li>进入首页</li>
			<li>进入首页</li>
			<li>进入首页</li>
			<li>进入首页</li>
			<li>进入首页</li>
			<li>进入首页</li>
			<li>进入首页</li>
		</ul>
	</body>
</html>

效果呈现：

四.彩色图片变黑白：

CSS中可以使用filter添加对应的滤镜效果，但是在注意使用滤镜效果时注意如果浏览器不支持此CSS语法，应使用前缀进行添加：

1.滤镜效果：

滤镜：filter: grayscale(100%) 或 filter: gray在灰度方面可以进行调整
transition可以改变彩色变黑白速度，在属性中加上：filter 1s可以缓慢变黑白

2.浏览器不支持CSS时的引入：

-webkit-filter: grayscale(100%); 针对safari和chrome
-moz-filter: grayscale(100%); 针对firefox
-ms-filter: grayscale(100%); 针对ie
-o-filter: grayscale(100%); 针对欧鹏

五.内层在外层中移动（下弹框效果）：

下弹框效果是页面设计中常用到的效果，以下为步骤：

使用overflow: hidden可以隐藏溢出层，结合margin控制距离（或:padding，不用加hidden）
在移到外层控制内层中的hover效果中设置相应的位置
结合transition进行过渡
具体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wai {
				height: 200px;
				width: 300px;
				background-image: url(img/bb.jpg);
				background-size: 100% 100%;
				transition: background-size 0.5s;
				/* 溢出层隐藏掉 */
				overflow: hidden;

			}

			#wai:hover {
				background-size: 105% 105%;
				transition: background-size 0.5s;
			}

			#nei {
				width: 100%;
				height: 30px;
				background-color: rgba(0, 0, 0, 0.4);
				text-align: center;
				color: white;
				line-height: 30px;
				margin-top: 200px;
				transition: margin-top 0.5s;
			}

			#wai:hover>#nei {
				margin-top: 170px;
				transition: margin-top 0.5s;
			}
		</style>
	</head>
	<body>
		<div id="wai">
			<div id="nei">
				风景图片 点击进入看大图
			</div>
		</div>
	</body>
</html>

效果：

六.页面动画：

1.transform动画：

位移动画：transform translate(控制左右，控制上下)（直线移动）
旋转动画：transform rotate(角度deg) 旋转的角度可正可负，为正顺时针转，为负逆时针转
缩放动画：transform scale(放大/缩小倍数)
拉伸动画（扭曲画面）：transform skew(扭曲角度1，扭曲角度2);

2.transition过渡效果：

transition: 过渡操作过渡时长过渡延时过渡速率
在过渡属性中将对应的内外层可以都加上过渡以便在点触和退出时均比较自然
多个过渡操作就将操作写为all
过渡速率中可以选择: linear匀速 ease等
同样可以将transition中的各个属性进行拆解
transition-property: 过渡属性/过渡操作
transition-duration: 过渡时长
transition-delay: 过渡延时
transition-timing-function: 过渡速率

3.自定义动画：

@keyfames name{
from{}
to{}
}

from和to的大括号中均为相对应的属性状态
animation: 动画过渡时长
animation-iteration-count: 动画播放次数 infinite是无限次
animation-direction: 动画播放常用值 reverse反向播放，其中还有许多有趣的参数
复杂动画如果只有from和to，是无法做的很精细，因此可以在大括号内使用百分数进行状态传递

4.结合transform和transition生成相片效果：

transform: rotate(倾斜角度+deg) 可与使整体进行倾斜，rotate3d，rotateX，rotateY都可以实现空间上的旋转
过渡动画：transition: transform 0.5s在实现hover出发的新效果中会更加柔和
缩放动画：transform: scale(放大或缩小倍数);
缩放背景相片：在hover时实现background-size: 横向放大纵向放大
注意：使用transform中scale和rotate会撞，所以会单一保留后面出现的动画效果
具体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background-color: pink;
			}

			div {
				height: 350px;
				width: 250px;
				border: 20px white solid;
				border-bottom-width: 30px;
				background-size: 100% 100%;
				float: left;
				margin-left: 60px;
				margin-top: 30px;
				box-shadow: 8px 8px 8px gray;
			}

			#d1 {
				background-image: url(img/girl1.jpg);
				transform: rotate(25deg);
				transition: transform 1s;
			}

			#d1:hover {
				transform: rotate(15deg);
				transition: transform 1s;
			}

			#d2 {
				background-image: url(img/girl2.jpg);
				transform: rotate(-15deg);
				transition: transform 1s;
			}

			#d2:hover {
				transition: transform 1s;
				transform: scale(1.2);
			}

			#d3 {
				background-image: url(img/girl3.jpg);
				transform: rotate(-35deg);
			}

			#d4 {
				background-image: url(img/girl4.jpg);
				transition: background-size 1s;
			}

			#d4:hover {
				background-size: 110% 110%;
				transition: background-size 1s;
			}

			#d5 {
				background-image: url(img/girl5.jpg);
			}

			#d6 {
				background-image: url(img/a.jpg);
			}

			#d7 {
				background-image: url(img/girl5.jpg);
				transform: rotate(45deg);
			}
		</style>
	</head>
	<body>
		<div id="d1">

		</div>
		<div id="d2">

		</div>
		<div id="d3">

		</div>
		<div id="d4">

		</div>
		<div id="d5">

		</div>
		<div id="d6">

		</div>
		<div id="d7">

		</div>

	</body>
</html>