CSS小技巧
文章目录
参考
动画部分
css动画
transition
实现效果
transition CSS 属性是 transition-property,transition-duration,transition-timing-function 和 transition-delay 的一个简写属性。
- transition-property 用于指定动画的属性对象
- transition-duration 指定动画时长
- transition-timing-function 指定动画类型(linear, ease, steps……)
- transition-delay 动画的延时
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link href="/index.css" rel="stylesheet" />
<style>
#root {
width: 100px;
height: 100px;
background-color: #ccc;
transition: all 1s ease-in;
}
#root:hover {
width: 200px;
background-color: orangered;
}
</style>
</head>
<body>
<div id="root" />
</body>
</html>
animation
实现效果
animation属性详解
CSS animation 属性是 animation-name,animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
- animation-name 指定动画
- animation-duration 指定动画延时
- animation-timing-function 指定动画类型
- animation-delay 指定动画延时
- animation-iteration-count 指定动画重复播放次数
- animation-direction 指定动画是正方还是逆放
- animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于其目标
- animation-play-state 定义一个动画是否运行或者暂停
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link href="/index.css" rel="stylesheet" />
<style>
* {
box-sizing: border-box;
}
body {
height: 100vh;
align-items: center;
justify-content: center;
display: flex;
}
.root {
background-color: rgb(35, 46, 51);
height: 50px;
width: 50px;
border-radius: 50%;
animation-name: drop;
animation-timing-function: linear;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.root:nth-child(1) {
animation-delay: 0s;
}
.root:nth-child(1) {
animation-delay: 1s;
}
.root:nth-child(1) {
animation-delay: 2s;
}
#warraper {
border: 1px solid #ccc;
animation-name: rote;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes drop {
0% {
}
50% {
transform: translateY(100px);
}
}
@keyframes rote {
0% {
}
50% {
transform: rotate(360deg);
border: 10px solid orange;
border-radius: 50%;
}
}
</style>
</head>
<body>
<div id="warraper">
<div class="root" />
<div class="root" />
<div class="root" />
</div>
</body>
</html>
实现思路
在设置class为root的div直线运动的同时设置其父元素div旋转并保持两者的同步。
特殊案例
实现效果
素材
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link href="/index.css" rel="stylesheet" />
<style>
* {
box-sizing: border-box;
}
body {
height: 100vh;
align-items: center;
justify-content: center;
display: flex;
}
.root {
background-image: url(https://img-blog.csdnimg.cn/20210510231707749.jpg);
height: 180px;
width: 123px;
animation-name: run;
animation-duration: 0.7s;
animation-iteration-count: infinite;
animation-timing-function: steps(4);
}
@keyframes run {
from {
background-position: 0 0;
}
to {
background-position: -487px 0;
}
}
</style>
</head>
<body>
<div class="root" />
</body>
</html>
实现思路
通过animation移动背景图片的位置同时设置动画类型steps实现雪人运动的特效。
按钮特效(悬浮冰冻)
实现效果
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link href="/index.css" rel="stylesheet" />
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
button {
border: 0;
margin: 20px;
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
padding: 15px 50px;
border-radius: 50px;
color: white;
outline: none;
position: relative;
}
button::before {
content: "";
display: block;
background: linear-gradient(
to left,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0.4) 50%
);
background-size: 210% 100%;
background-position: right bottom;
height: 100%;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
border-radius: 50px;
transition: all 1s;
}
.btn1 {
background-image: linear-gradient(to right, #25aae1, #40e495);
box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 1);
}
.btn1:hover:before {
background-position: left top;
}
</style>
</head>
<body>
<button class="btn1">Hover me</button>
</body>
</html>
实现思路
在这个案例中,主要的思想是通过hover来搭配伪元素的背景位置来实现类似于遮罩层,所以重点理解
background-position
这个属性
background-position: CSS 属性为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。
卡片浮出
实现效果
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link href="/index.css" rel="stylesheet" />
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #ccc;
}
#root {
background-color: whitesmoke;
width: 200px;
height: 200px;
cursor: pointer;
text-align: center;
line-height: 200px;
border-radius: 5px;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}
#root:hover {
transform: translate(0, -5%);
-webkit-box-shadow: 0px 6px 18px 0px rgba(50, 50, 50, 0.81);
-moz-box-shadow: 0px 6px 18px 0px rgba(50, 50, 50, 0.81);
box-shadow: 0px 6px 18px 0px rgba(50, 50, 50, 0.81);
}
</style>
</head>
<body>
<div id="root">Hmoe</div>
</body>
</html>
布局
Grid
grid 布局即网格布局,下面是有道的释义。
grid 是一个 CSS 简写属性,可以用来设置以下属性:
显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas,
隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow,
间距属性 grid-column-gap (en-US) 和 grid-row-gap (en-US)。
属性列表
属性名 | 作用 |
---|---|
grid-template-rows | 设置行高 |
grid-template-columns | 设置列宽 |
grid-template-areas | CSS 属性是网格区域 grid areas 在 CSS 中的特定命名。(设置元素具体的布局方式) |
grid-auto-rows | grid-auto-rows 用于指定隐式创建的行轨道大小(也就是说不被grid-template-rows 所指定的元素样式),例如元素的个数多于template指定的个数 |
grid-auto-rows | grid-auto-rows 用于指定隐式创建的列轨道大小(也就是说不被grid-template-columns 所指定的元素样式),例如元素的个数多于template指定的个数 |
grid-auto-flow | 控制着自动布局算法怎样运作,精确指定在网格中被自动布局的元素怎样排列 |
grid-column-gap | 控制列间距 |
grid-row-gap | 控制行间距 |
案例一(基础使用)
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link href="/index.css" rel="stylesheet" />
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: whitesmoke;
}
#root {
background-color: whitesmoke;
grid-gap: 10px;
display: grid;
cursor: pointer;
text-align: center;
position: relative;
grid-template-columns: repeat(3, 200px);
grid-template-rows: 200px 150px;
}
.item {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="root">
<div class="item elem1" style="background: #19caad;">
1
</div>
<div class="item elem2" style="background: #8cc7b5;">
2
</div>
<div class="item elem3" style="background: #d1ba74;">
3
</div>
<div class="item elem4" style="background: #bee7e9;">
4
</div>
<div class="item elem5" style="background: #e6ceac;">
5
</div>
<div class="item elem6" style="background: #ecad9e;">
6
</div>
</div>
</body>
</html>
案例二 (grid-template-areas使用)
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link href="/index.css" rel="stylesheet" />
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: whitesmoke;
}
#root {
background-color: whitesmoke;
display: grid;
cursor: pointer;
text-align: center;
position: relative;
grid-template-columns: repeat(3, 200px);
grid-template-rows: 200px 150px;
grid-template-areas:
"a b ."
"a c d";
}
.item {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="root">
<div class="item elem1" style="background: #19caad; grid-area: a;">
1
</div>
<div class="item elem2" style="background: #8cc7b5; grid-area: b;">
2
</div>
<div class="item elem3" style="background: #d1ba74; grid-area: c;">
3
</div>
<div class="item elem4" style="background: #bee7e9; grid-area: d;">
4
</div>
</div>
</body>
</html>
案例三(grid-auto-flow 使用)
本案例通过设置
grid-auto-flow
来调节元素的自动排序方向
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link href="/index.css" rel="stylesheet" />
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: whitesmoke;
}
#root {
display: flex;
flex-direction: column;
}
#root > div {
margin-top: 10px;
display: grid;
cursor: pointer;
text-align: center;
position: relative;
grid-template-columns: repeat(3, 200px);
grid-template-rows: 150px 50px;
}
#root > div:nth-child(2) {
grid-auto-flow: column;
}
.item {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="root">
grid-auto-flow: row;
<div>
<div class="item elem1" style="background: #19caad;">
1
</div>
<div class="item elem2" style="background: #8cc7b5;">
2
</div>
<div class="item elem3" style="background: #d1ba74;">
3
</div>
<div class="item elem4" style="background: #bee7e9;">
4
</div>
</div>
grid-auto-flow: column;
<div>
<div class="item elem1" style="background: #19caad;">
1
</div>
<div class="item elem2" style="background: #8cc7b5;">
2
</div>
<div class="item elem3" style="background: #d1ba74;">
3
</div>
<div class="item elem4" style="background: #bee7e9;">
4
</div>
</div>
</div>
</body>
</html>
案例四 (grid-column、grid-row使用)
在本案例中综合使用
grid-column
、grid-row
、grid-auto-rows
,进行布局
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link href="/index.css" rel="stylesheet" />
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: whitesmoke;
}
#root {
background-color: whitesmoke;
display: grid;
cursor: pointer;
text-align: center;
position: relative;
grid-template-columns: repeat(3, 200px);
grid-auto-rows: minmax(100px, auto);
}
.item {
display: flex;
justify-content: center;
align-items: center;
}
.elem1 {
grid-column: 1 / 2;
}
.elem2 {
grid-column: 2 / 4;
}
.elem3 {
grid-column: 1 / 2;
grid-row: 2 / 4;
}
.elem4 {
grid-column: 2 / 4;
grid-row: 2 / 3;
}
.elem6 {
grid-row: 4 / 5;
}
</style>
</head>
<body>
<div id="root">
<div class="item elem1" style="background: #19caad;">
1
</div>
<div class="item elem2" style="background: #8cc7b5;">
2
</div>
<div class="item elem3" style="background: #d1ba74;">
3
</div>
<div class="item elem4" style="background: #bee7e9;">
4
</div>
<div class="item elem5" style="background: #e6ceac;">
5
</div>
<div class="item elem6" style="background: #ecad9e;">
6
</div>
</div>
</body>
</html>
分析
在这个案例中我们并没有设置
grid-template-rows
属性,元素的行高通过grid-auto-rows
进行设置,同时设置了子元素的grid-column
和grid-row
进行布局。
值得注意的是:
grid-row
、grid-column
通过a / b
设置元素覆盖从a->b,但不包含b(a,b不能为小数)
grid-row
、grid-column
设置元素位置若相同,写在后面的元素会默认覆盖写在前面的元素。
案例五(auto-fit实现响应式布局)
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link href="/index.css" rel="stylesheet" />
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: whitesmoke;
}
#root {
display: flex;
flex-direction: column;
margin-top: 10px;
width: 100%;
padding: 0 50px;
display: grid;
grid-gap: 10px 20px;
text-align: center;
position: relative;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: 150px 80px;
grid-auto-rows: 100px;
grid-auto-flow: row dense;
}
.item {
display: flex;
border-radius: 8px;
justify-content: center;
align-items: center;
}
.elem3 {
grid-column-start: span 2;
}
</style>
</head>
<body>
<div id="root">
<div class="item elem1" style="background: #19caad;">
1
</div>
<div class="item elem2" style="background: #8cc7b5;">
2
</div>
<div class="item elem3" style="background: #d1ba74;">
3
</div>
<div class="item elem4" style="background: #bee7e9;">
4
</div>
</div>
</body>
</html>
本案例通过设置
auto-fit
实现行元素的响应式个数。
总结
之后遇到有意思的效果,可以继续往这个博客中添加。