前端设计(动态，渐变)

最新推荐文章于 2024-08-11 17:46:40 发布

简明编程

最新推荐文章于 2024-08-11 17:46:40 发布

阅读量1.8k

点赞数 6

分类专栏：笔记前端文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_51553982/article/details/120102053

版权

本文详细介绍了CSS中的一些关键属性，如背景、颜色、滤镜、弹性盒、转换、对齐方式、阴影、浮动、动画、显示和内容。通过实例展示了如何创建动态元素，包括一个动态搜索框和一个动态加载效果。同时，深入探讨了线性渐变的使用方法，提供两个实际案例。文章旨在帮助读者更好地理解和应用CSS动态效果。

摘要由CSDN通过智能技术生成

我个人觉得网页上有动态元素会让人感觉很炫酷所以整理了一下个人感觉很常用的一些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);