前端设计
我个人觉得网页上有动态元素会让人感觉很炫酷所以整理了一下个人感觉很常用的一些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);
}
50% {
transform: translate(100px, 0px);
filter: blur(20px);
}
100% {
transform: translate(100px, 200px);
filter: blur(0px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
展示：
解释说明
//设置相对布局为absolute绝对的
position: absolute;
//将子盒子放置于父盒子的中间
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
//设置子盒子为黑色
background-color: black;
//设置子盒子的高为80像素，宽为80像素
height: 80px;
width: 80px;
//设置动画：动画名animate 时间3秒 线性过渡等同于贝塞尔曲线
设置为无限循环 动画先正常运行再反方向运行，并持续交替运行
animation: animate 3s linear infinite alternate;
//设置动画 动画名为animate
@keyframes animate {
//0%时位于原点
0% {
transform: translate(0, 0);
}
//50%时位移到原始位置的右边100像素位置并且模糊到原始状态的20像素
50% {
transform: translate(100px, 0px);
filter: blur(20px);
}
//100%时位置到原始位置的右边100像素，下200像素模糊到原始的0像素（不模糊）
100% {
transform: translate(100px, 200px);
filter: blur(0px);
}
}
渐变（linear-gradient函数）
渐变式依赖于background属性来的
background: linear-gradient(15deg, transparent, transparent 40%, #c9c9c9);
案例1：
<!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>动态搜索框</title>
<link rel="stylesheet" href="动态搜索优化.css">
</head>
<body>
<div class="searchbox">
<input type="text" placeholder="点击搜索" class="search_txt">
<div class="search_btn">
<svg t="1630702162068" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="2175" width="30" height="30">
<path
d="M1015.7783 938.2318 723.5205 644.0489c118.8301-156.9516 106.7182-381.4717-36.393-524.5819-156.4109-156.4109-410.0045-156.4109-566.4154 0-156.4109 156.375-156.4109 409.9697 0 566.3805 143.06 143.06 367.404 155.2425 524.3433 36.606l292.3223 294.2136c9.6051 9.6041 25.2221 9.6041 34.8252 0l43.5763-43.5763C1025.4172 963.4519 1025.4172 947.8369 1015.7783 938.2318zM194.9153 613.8132c-114.8621-114.8611-114.8621-301.0826 0-415.9089 114.8631-114.8621 301.0458-114.8621 415.9099 0 114.8631 114.8262 114.8631 301.0478 0 415.9089C495.9611 728.6764 309.7784 728.6764 194.9153 613.8132z"
p-id="2176"></path>
</svg>
</div>
</div>
</body>
</html>
Css：
body {
margin: 0;
padding: 0;
//设置背景颜色
background-color: rgb(41, 41, 41);
}
.searchbox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #000000cc;
height: 50px;
border-radius: 50px;
padding: 10px;
//将对象作为弹性伸缩盒显示
display: flex;
//设置弹性伸缩盒中对象居中显示
justify-content: center;
box-shadow: 0px 0px 2px 1px white;
}
.searchbox:hover > .search_txt {
width: 300px;
padding: 0 6px;
}
.searchbox:hover > .search_btn {
background: white;
transform: rotate(360deg);
}
.search_btn {
color: #e84118;
float: right;
height: 50px;
width: 50px;
border-radius: 50%;
background: #00000060;
display: flex;
align-items: center;
justify-content: center;
transition: 1s;
cursor: pointer;
//设置渐变
background: linear-gradient(15deg, transparent, transparent 40%, #c9c9c9);
}
.search_txt {
float: left;
border: none;
background: none;
outline: none;
padding: 0;
color: white;
font-size: 22px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: 700;
text-shadow: 1px 1px 1px white;
//设置动画时间和显示曲线
transition: 0.8s ease-in-out;
line-height: 45px;
width: 0px;
}
案例展示：
案例2：
<!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>动态加载</title>
<link rel="stylesheet" href="动态加载.css">
</head>
<body>
<div></div>
</body>
</html>
css：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(55, 55, 55);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
div {
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background-color: azure;
background: linear-gradient(
45deg,
transparent,
transparent 40%,
rgb(158, 76, 76)
);
animation: animate 2s linear infinite;
}
@keyframes animate {
0% {
transform: rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
transform: rotate(360deg);
filter: hue-rotate(360deg);
}
}
div::before {
content: "";
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background: rgb(55, 55, 55);
border-radius: 50%;
z-index: 1000;
}
div::after {
content: "";
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border-radius: 50%;
background: linear-gradient(
45deg,
transparent,
transparent 40%,
rgb(158, 76, 76)
);
z-index: 1000;
z-index: 1;
filter: blur(20px);
}
展示：
解释说明都在代码里好好看这里就不分开来写了
4564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
