Html Css 相关
单行居中多行居左布局
可以使用display: inline-block实现
.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` 生成波浪下划线。
ABCDEFGHIJKLMNOPQ
ABCDEFGHIJKLMNOPQ
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, 实现波浪动画。
.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实现充电动画
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效果
loading
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单标签线条动画
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%;
}
}结语
本次分享的是个人的一些浅见，写的不好请轻喷！！！！欢迎一起交流！！！！