共计 7036 个字符,预计需要花费 18 分钟才能阅读完成。
Html Css 相干
单行居中多行居左布局
能够应用 display: inline-block 实现
<!-- html 构造 -->
<div class='container'>
<div class='list'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
</div>
<!-- 款式 -->
.container {
padding: 10px;
width: 600px;
text-align: center;
border: 1px solid #000;
}
.list {
display: inline-block;
text-align: left;
}
.item {
display: inline-block;
width: 80px;
border: 1px solid #f00;
height: 200px;
}
如何实现垂直居中布局
同宽高 +padding
.parent{
width: 100px;
height: 100px;
/* 将 padding 设置,来挤出来居中的样子;然而要留神的是,此时的 width 和 height 要和子元素的大小一样,否则还是不居中 */
padding: 100px;
border: 1px solid;
margin: 100px auto;
}
.child{
width: 100px;
height: 100px;
background: pink;
line-height: 100px;
text-align: center;
}
定位 + 定宽 + 定高,应用 absolute(定位)
.parent{
position: relative;
width: 200px;
height: 200px;
border: 1px solid;
}
.child{
position: absolute;
width: 100px;
height: 100px;
/* 1. 应用 margin:auto,子元素必须拉满整个容器 */
width: 200px;
height: 200px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/* 2. 通过 calc() 函数,值为 50% 减去宽度 / 高度的一半 */
left: calc(50% - 150px);
top: calc(50% - 150px);
/* 3. 设置该元素的偏移量,值为 50%,并通过外边距 - 值 的形式将元素挪动回去 */
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
/* 4. 不晓得子元素的宽高,应用 transfrom:translate(-50% -50%),CSS3 属性有兼容性问题 */
transform: translate(-50%, -50%);
background: pink;
line-height: 100px;
text-align: center;
}
应用 inline-block+table-cell
.parent {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child {display: inline-block;}
应用 flex 布局
只需设置父节点属性,无需设置子元素, 兼容性问题
.parent {
display: flex;
/* 1. 通过 justify-content 以及 align-items: center 实现 */
justify-content:center;
align-items:center;
}
.child {
/* 2. 或者通过 margin auto 实现 */
margin: auto;
}
应用 Grid 布局
只需设置父节点属性,无需设置子元素, 兼容性问题
.parent {
display: grid;
/* 通过 items 属性实现 */
/* align-items: center; */
/* justify-items: center; */
/* items 的缩写 */
/* place-items: center; */
/* 或者通过 content 属性 */
/* align-content: center; */
/* justify-content: center; */
/* content 的缩写 */
/* place-content: center; */
}
.child {
/* 或者通过 margin auto 实现 */
/* margin: auto; */
/* 或者通过 self 属性 */
/* align-self: center;
justify-self: center; */
/* self 的缩写 */
place-self: center;
}
首字母大写
text-transform: capitalize
活用 border-radius
活用 border-radius, 实现波浪百分比图。
// 应用 `text-decoration-style: wavy` 生成波浪下划线。<div >ABCDEFGHIJKLMNOPQ</div>
<div class="wave">ABCDEFGHIJKLMNOPQ</div>
div {
width: 200px;
height: 200px;
line-height: 200px;
font-size: 50px;
margin: auto;
text-align: center;
overflow: hidden;
}
.wave {
border: 5px solid deeppink;
border-radius: 50%;
animation: indent 5s infinite linear;
}
div {
color: transparent;
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: deeppink;
}
@keyframes indent {
100% {text-indent: -110px;}
}
代码片段
活用 border-radius, 实现波浪动画。
<div class="container">
<div class="wave"></div>
</div>
.container {
position: absolute;
width: 200px;
height: 200px;
padding: 5px;
border: 5px solid rgb(118, 218, 255);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
overflow: hidden;
}
.wave {
position: relative;
width: 200px;
height: 200px;
background-color: rgb(118, 218, 255);
border-radius: 50%;
&::before,
&::after{
content: "";
position: absolute;
width: 400px;
height: 400px;
top: 0;
left: 50%;
background-color: rgba(255, 255, 255, .4);
border-radius: 45%;
transform: translate(-50%, -70%) rotate(0);
animation: rotate 6s linear infinite;
z-index: 10;
}
&::after {
border-radius: 47%;
background-color: rgba(255, 255, 255, .9);
transform: translate(-50%, -70%) rotate(0);
animation: rotate 10s linear -5s infinite;
z-index: 20;
}
}
@keyframes rotate {
50% {transform: translate(-50%, -73%) rotate(180deg);
} 100% {transform: translate(-50%, -70%) rotate(360deg);
}
}
代码片段
活用 border-radius 实现充电动画
<div class="container">
<div class="header"></div>
<div class="battery">
</div>
<div class="battery-copy">
<div class="g-wave"></div>
<div class="g-wave"></div>
<div class="g-wave"></div>
</div>
</div>
html,
body {
width: 100%;
height: 100%;
display: flex;
background: #e4e4e4;
}
.container {
position: relative;
width: 140px;
margin: auto;
}
.header {
position: absolute;
width: 26px;
height: 10px;
left: 50%;
top: 0;
transform: translate(-50%, -10px);
border-radius: 5px 5px 0 0;
background: rgba(255, 255, 255, .88);
}
.battery-copy {
position: absolute;
top: 0;
left: 0;
height: 220px;
width: 140px;
border-radius: 15px 15px 5px 5px;
overflow: hidden;
}
.battery {
position: relative;
height: 220px;
box-sizing: border-box;
border-radius: 15px 15px 5px 5px;
box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.22);
background: #fff;
z-index: 1;
&::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 80%;
background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
border-radius: 0px 0px 5px 5px;
box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
animation: charging 10s linear infinite;
filter: hue-rotate(90deg);
}
}
.g-wave {
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, .8);
border-radius: 45% 47% 44% 42%;
bottom: 25px;
left: 50%;
transform: translate(-50%, 0);
z-index: 1;
animation: move 10s linear infinite;
}
.g-wave:nth-child(2) {
border-radius: 38% 46% 43% 47%;
transform: translate(-50%, 0) rotate(-135deg);
}
.g-wave:nth-child(3) {
border-radius: 42% 46% 37% 40%;
transform: translate(-50%, 0) rotate(135deg);
}
@keyframes charging {
50% {box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);
}
95% {
top: 5%;
filter: hue-rotate(0deg);
border-radius: 0 0 5px 5px;
box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08);
}
100% {
top: 0%;
filter: hue-rotate(0deg);
border-radius: 15px 15px 5px 5px;
box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);
}
}
@keyframes move {
100% {transform: translate(-50%, -160px) rotate(720deg);
}
}
代码片段
活用 border-radius 变换实现 loading 成果
<div id="app">loading</div>
body {background: #000;}
div {
position: relative;
width: 35vmin;
height: 35vmin;
background: linear-gradient(120deg, #34e0f0 0%, #b400ff 100%);
opacity: .8;
margin: 25vh auto;
border-radius: 35%;
animation: rotateMain 2s linear infinite;
}
div::before {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, #35a0f0 0%, #b233f0 100%);
opacity: .8;
box-shadow: 5px 5px 90px rgba(10, 102, 255, 0.5);
border-radius: 35%;
animation: rotateMain 8s linear 2s infinite;
}
div::after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(60deg, #33580f 0%, #b7ee6d 100%);
opacity: .8;
box-shadow: 5px 5px 60px rgba(20, 102, 255, 0.3);
border-radius: 35%;
animation: rotateMain 8s linear 4s infinite;
z-index: -1;
}
#app{
color: #fff;
text-align: center;
line-height: 35vmin;
text-transform: capitalize
}
@keyframes rotateMain {
50% {transform: rotateZ(180deg);
border-radius: 50%;
}
100% {transform: rotateZ(360deg);
border-radius: 35%;
}
}
代码片段
活用 border-radius 单标签线条动画
<div id="app"></div>
html,
body{
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background: #000;
filter: blur(5px) contrast(20);
&::before {
position: absolute;
content: "";
background: #000;
top: 0;
left: 0;
right: 0;
height: 20vh;
z-index: 10;
}
}
div {
position: relative;
width: 30vmin;
height: 30vmin;
margin: 30vh auto;
// border: 1vmin solid #fff;
border-radius: 46% 42% 47% 44%;
background: linear-gradient(#fff, #9c27b0);
transform: scale(15) translate(0, -13vh) rotate(0deg);
animation: rotate 10s infinite linear alternate;
&::before {
content: "";
position: absolute;
width: 99%;
height: 99%;
background: #000;
border-radius: 46% 42% 47% 44%;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
}
@keyframes rotate {
100% {transform: scale(10) translate(0, -15vh) rotate(360deg);
}
}
@keyframes move {
50% {
left: 50%;
right: 49.95%;
}
100% {
left: 90%;
right: 9.7%;
}
}
代码片段
结语
本次分享的是集体的一些浅见,写的不好请轻喷!!!!欢送一起交换!!!!
Html Css 前端常识总结
正文完
发表至: javascript
2022-07-25