移动 Web 笔记

最新推荐文章于 2024-09-09 14:50:46 发布

是滨滨呀

最新推荐文章于 2024-09-09 14:50:46 发布

阅读量374

点赞数

文章标签： css html 前端 html5 javascript

本文链接：https://blog.csdn.net/weixin_52804531/article/details/121886134

版权

本文介绍了前端开发中字体图标的不同使用方式，包括类名、Unicode编码和Symbol方法，并详细阐述了CSS的平面转换、立体转换、渐变、倾斜和动画效果。此外，还讨论了Flex布局、rem布局、vw/vh布局以及background-size属性在响应式设计中的应用。这些技术对于创建现代网页和移动应用至关重要。

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

01-字体图标的使用

01-类名方式

<!-- 引入字体图标 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">

<!-- 心形图标 -->
<div class="iconfont icon-favorites-fill"></div>

<!-- 购物车图标 -->
<div class="iconfont icon-cart-Empty-fill"></div>

02-Unicode编码方式

<!-- 引入字体图标 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
 
<!-- 右箭头 -->
<div class="iconfont">&#xe743</div>

<!-- 下箭头 -->
<div class="iconfont">&#xe7b2</div>

03-Symbol方式

<!-- 引入项目下面生成的 symbol 代码 -->
<script src="./iconfont/iconfont.js"></script>
 
<!-- 加入通用 CSS 代码（引入一次就行） -->
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
 
<!-- 汽车 -->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-auto"></use>
</svg>
<!-- 二维码 -->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-QRcode"></use>
</svg>

02-平面转换

01-位移

/* 水平向右移动 300px */
transform: translateX(300px);
 
/* 水平向左移动 300px */
transform: translateX(-300px);

/* 垂直向下移动 200px */
transform: translateY(200px);
 
/* 垂直向上移动 200px */
transform: translateY(-200px);
 
/* 水平右移 200px, 垂直下移 150px */
transform: translate(200px, 150px);
 
/* 一个值时只会水平移动 */
transform: translate(200%);

02-旋转

/* rotate(正值), 以 Z 轴为轴心, 顺时针旋转 */
transform: rotate(360deg);
 
/* rotate(负值), 以 Z 轴为轴心, 逆时针旋转 */
transform: rotate(-360deg);
 
/* rotateX(正值), 以 X 轴为轴心, 后仰翻转 */
transform: rotateX(360deg);
 
/* rotateX(正值), 以 X 轴为轴心, 前倾翻转 */
transform: rotateX(-360deg);
 
/* rotateY(正值), 以 Y 轴为轴心, 向右翻转 */
transform: rotateY(360deg);
 
/* rotateY(正值), 以 Y 轴为轴心, 向左翻转 */
transform: rotateY(-360deg);

03-缩放

 /* 等比例放大宽高 */
 .box:hover {
   transform: scale(3);
 }
 
 /* 等比例缩小宽高 */
 .box:hover {
   transform: scale(.5);
 }
 
 /* 只放大宽 */
 .box:hover {
   transform: scaleX(2);
 }
 
 /* 只缩小宽 */
 .box:hover {
   transform: scaleX(.5);
 }
 
 /* 只放大高 */
 .box:hover {
   transform: scaleY(2);
 }
 
 /* 只缩小高 */
 .box:hover {
   transform: scaleY(.5);
 }
 
 /* 分别缩放宽高 */
 .box:hover {
   transform: scale(2, 4);
 }

04-渐变

 /* 线性渐变 */
 background-image: linear-gradient(
   to right, transparent, rgba(0, 0, 0, .5)
 );
 background-image: linear-gradient(
   to left, transparent, rgba(0, 0, 0, .5)
 );
 background-image: linear-gradient(
   to top, transparent, rgba(0, 0, 0, .5)
 );
 background-image: linear-gradient(
   to bottom, transparent, rgba(0, 0, 0, .5)
 );
 background-image: linear-gradient(
   to left top, transparent, rgba(0, 0, 0, .5)
 );
 background-image: linear-gradient(
   to right top, transparent, rgba(0, 0, 0, .5)
 );
 background-image: linear-gradient(
   to left bottom, transparent, rgba(0, 0, 0, .5)
 );
 background-image: linear-gradient(
   to right bottom, transparent, rgba(0, 0, 0, .5)
 );
 
 /* 镜像渐变 */
 background-image: radial-gradient(
   transparent, pink
 );

05-倾斜

 /* 以X轴为基准线，向左倾斜 */
 transform: skew(60deg);
 
 /* 以X轴为基准线，向右倾斜 */
 transform: skew(-60deg);
 
 /* 以Y轴为基准线，向左上倾斜 */
 transform: skewY(60deg);
 
 /* 以Y轴为基准线，向右上倾斜 */
 transform: skewY(-60deg);
 
 /* 以X轴和Y轴为基准线，向左上倾斜 */
 transform: skew(20deg, 20deg);
 
 /* 以X轴和Y轴为基准线，向右上倾斜 */
 transform: skew(20deg, -20deg);
 
 /* 以X轴和Y轴为基准线，向左上倾斜 */
 transform: skew(-20deg, 20deg);
 
 /* 以X轴和Y轴为基准线，向右上倾斜 */
 transform: skew(-20deg, -20deg);

03-立体转换

/* 沿X轴后仰旋转 */
transform: rotateX(60deg);
/* 沿X轴前倾旋转 */
transform: rotateX(-60deg);

/* 沿Y轴向右旋转 */
transform: rotateY(60deg);
/* 沿Y轴向左旋转 */
transform: rotateY(-60deg);

/* 沿Z轴正向位移，拉近 */
transform: translateZ(200px);
/* 沿Z轴反向位移，远离 */
transform: translateZ(-200px);

/* 透视效果(做立体转换必须有它)，取值一般为[800px, 1200px]，给它的父级添加 */
perspective: 1000px;

04-动画

/* 定义逐帧动画 */
@keyframes move {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -1680px 0;
	}
}

/* 定义位移动画 */
@keyframes run {
	from {
		transform: translate(0);
	}
	to {
	transform: translate(800px);
	}
}

.box {
  /* 使用动画 */
	animation: move 1s infinite steps(12), run 6s forwards;
}

.box:hover {
  /* 暂停动画 */
  animation-play-state: paused;
}

属性总结

animation 综合写法: (不包含 animation-play-state)
  animation-name: 动画名称, 必填
  animation-duration: 动画时长, 必填
  animation-iteration-count: 重复次数 infinite 无限循环
  animation-timing-function: 运动曲线 ease（默认值） linear：匀速  steps(步数)：一跳一跳的感觉
  animation-direction: 动画执行方向 alternate（交替的、轮流）
  animation-delay: 延迟时间
  animation-fill-mode: 动画执行前和完毕后状态 forwards（向前）：动画完毕后停留在100%的样式上

animation-play-state: 暂停动画 paused：暂停, 通常配合 :hover 使用

05-Flex布局

/* 父级：启用flex布局 */
display: flex;

/* 父级：设置主轴方向 */
flex-direction: row;
flex-direction: column;

/* 父级：设置子级在主轴上的对齐方式 */
justify-content: center;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;
justify-content: flex-start;
justify-content: flex-end;

/* 父级：设置子级在侧轴上的对齐方式 */
align-items: center;
align-items: stretch;
align-items: flex-start;
align-items: flex-end;

/* 父级：当父级容器容纳不下子级时，设置子级是否要换行显示 */
flex-wrap: wrap;

/* 父级：换行显示后，调整子级在侧轴上的对齐方式 */
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: flex-start;
align-content: flex-end;

/* 子级：单独设置某一个子级在侧轴上的对齐方式 */
align-self: center;
align-self: stretch;
align-self: flex-start;
align-self: flex-end;

/* 子级：设置某个子级占用父级剩余的伸缩比 */
flex: 1;

/* 子级：设置某个子级不缩放 */
flex: none;

/* 子级：设置某个子级自动缩放 */
flex: auto;

/* 子级：设置某个子级的次序(值越小，位置越靠前) */
order: 0;

06-rem布局

01-媒体查询

方式一：样式文件中书写

* {
  padding: 0;
  margin: 0;
}

ul li {
  display: none;
  list-style: none;
}

@media (max-width: 400px) {
  display: block;
  height: 20px;
  font-size: 10px;
  background-color: blue;
}

@media (min-width: 400px) and (max-width: 600px) {
  display: block;
  height: 40px;
  font-size: 20px;
  background-color: red;
}

@media (min-width: 600px) {
  display: block;
  height: 60px;
  font-size: 30px;
  background-color: pink;
}

方式二：引入方式书写

<link rel="stylesheet" href="./css/one.css" media="(max-width: 400px)">
<link rel="stylesheet" href="./css/two.css" media="(min-width: 400px) and (max-width: 600px)">
<link rel="stylesheet" href="./css/three.css" media="(min-width: 600px)">

ul li:nth-child(1) {
  display: block;
  height: 20px;
  font-size: 10px;
  background-color: blue;
}
ul li:nth-child(2) {
  display: block;
  height: 40px;
  font-size: 20px;
  background-color: red;
}
ul li:nth-child(3) {
  display: block;
  height: 60px;
  font-size: 30px;
  background-color: pink;
}

02-flexible.js

<div class="box">你好</div>
<!-- 引入 flexible.js 组件自动做移动适配 -->
<script src="./js/flexible.js"></script>

* {
  padding: 0;
  margin: 0;
  line-height: 1;
}

.box {
  width: 5rem;
  height: 5rem;
  background-color: pink;
  font-size: 1rem;
}

07-vw/vh布局

01-vw

.box {
  width: 50vw;
  height: 30vw;
  background-color: pink;
  font-size: 10vw;
}

.box1 {
  width: (68 / 3.75vw);
  height: (56 / 3.75vw);
  background-color: skyblue;
  font-size: (20 / 3.75vw);
}
.box {
  width: 50vw;
  height: 30vw;
  background-color: pink;
  font-size: 10vw;
}
.box1 {
  width: 18.13333333vw;
  height: 14.93333333vw;
  background-color: skyblue;
  font-size: 5.33333333vw;
}

02-vh

less代码

.box {
  width: 50vh;
  height: 30vh;
  background-color: pink;
  font-size: 10vh;
}

.box1 {
  width: (68 / 3.75vh);
  height: (56 / 3.75vh);
  background-color: skyblue;
  font-size: (20 / 3.75vh);
}

css代码

.box {
  width: 50vh;
  height: 30vh;
  background-color: pink;
  font-size: 10vh;
}
.box1 {
  width: 18.13333333vh;
  height: 14.93333333vh;
  background-color: skyblue;
  font-size: 5.33333333vh;
}

08-background-size属性说明

/* 图片进行等比例缩放后会完全展示出来，但可能会有留白 */
background-size: contain;

/* 图片进行等比例缩放后会完全覆盖盒子，不会有留白，但图片会展示不全 */
background-size: cover;

/* 是占据盒子宽度的百分比 */
background-size: 百分数;

/* 是背景图片本身宽度，高度等比例缩放 */
background-size: 一个具体的px值;

/* 是背景图片本身宽度和高度，不会等比例缩放，一般不这么用 */
background-size: 第一个具体的px值, 第二个具体的px值;