前端设计
我个人觉得网页上有动态元素会让人感觉很炫酷所以整理了一下个人感觉很常用的一些CSS属性
属性(常用)
属性 | 说明 |
---|---|
background | 背景 |
color | 字体颜色 |
filter | 滤镜 |
flex | 弹性盒 |
transform | 移动 |
justify-content | 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式 |
box-shadow | 盒子阴影 |
text-shadow | 文字阴影 |
float | 浮动 |
align-items | 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式 |
animation | 动画 |
display | 定义了元素是否显示,及生成哪种盒用于显示 |
content | 用来和:after及:before伪元素一起使用,在对象前或后显示内容 |
属性说明(基于手册)
1.background:
2.color(文字颜色)
3.filter(只列出我常用的)
4.flex
5.transform
6. justify-content
7.align-items
8.align-content
9.box-shadow
10.text-shadow
11.float
12.animation
13.display
14.content
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: black;
height: 80px;
width: 80px;
animation: animate 3s linear infinite alternate;
}
@keyframes animate {
0% {
transform: translate(0, 0);