前端笔记7-CSDN博客

本文链接：https://blog.csdn.net/yangzhi_emo/article/details/134752847

本文详细介绍了CSS中的各种技术，包括iconfont使用、CSS样式继承、过渡效果（transition）、动画（animation）、2D和3D转换、文本与盒子阴影、媒体查询、渐变以及多列布局，展示了Web开发中的视觉动态效果实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. iconfont（可以选中改font-size和color）
   <link rel="stylesheet" href="../"> 在head之间引入
   <button><i class="iconfont icon-sousuo"></i></button> 在body之间

2. css样式的继承：（以ul li为例）
   会继承的属性：字体属性、文本属性、文字颜色等
   不会继承：宽高、内外边距、嵌套的a链接等

3. transition-property: width height; 想要过渡的属性
   transition-duration: 3s; 过渡的时间
   transition-delay: 2s; 过几秒再过渡
   transition-timing-function: steps(40); 过渡速度（帧率），linear（匀速）
   transition: all 3s; 所有属性

4. css3动画：
div {
            width: 300px;
            height: 50px;
            background-color: pink;、
            animation-name: yz;
            animation-duration: 3s;
            animation-iteration-count: infinite; 次数（无限）
            animation-direction: alternate-reverse; 反转效果
            animation: yz 3s infinite alternate; 简写
       }
    @keyframes yz {
           from {
                width: 300px;
                height: 50px;
                background-color: pink;
                }

            to {
                width: 600px;
                height: 300px;
                background-color: red;
               }

            0% {
                width: 300px;
                height: 50px;
                background-color: pink;
                transform: rotate(45deg);
               }

            100% {
                width: 1200px;
                height: 300px;
                background-color: red;
                transform: rotate(345deg);
                }
}

0%{} 25%{} 50%{} 100%{}

5. 2d转换：（配合relative和absolute）
   以下都是给son（absolute）
   transform: translateX(100px); 移动
   transform: translateY(100px);
   transform: translate(100px, 100px);

   transform: rotateX(45deg); 旋转
   transform: rotateY(45deg);
   transform: translateX(100px) rotateX(45deg); 先移动后旋转

   transform: scaleX(0.5); 扩大和缩放
   transform: scaleY(0.5);
   transform: scale(0.2);

transform: skewX(45deg); 扭曲

6. 3d转换：（配合relative和absolute）可加入动画

   给father（relative）
   transform-style: preserve-3d;
   perspective: 800px; 目光距离

   给son（absolute）
   transform: translateZ(100px/-100px); 远近距离
   transform: rotateZ(45deg); 旋转
   transform-origin: bottom; 以底为轴旋转（top px bottom）

7. 阴影：
text-shadow: 2px 2px 2px rgb(243, 8, 47); 文字阴影
X轴偏移量 Y轴偏移量虚化程度颜色
box-shadow: 2px 2px 8px pink; 盒子阴影

8. 媒体查询：
body {
height: 2000px;
background-color: aqua;
}

@media only screen and (max-width:600px) {
body {
background-color: pink;
}
}
当窗口小到一定程度变色

9. 渐变：
background-color：red;
background-image: linear-gradient(pink, green);

10.多列：（报纸）
    p {
        column-count: 2; 2列
        column-gap: 400px; 间隙
      }

11. 会旋转的盒子制作（见11.30 12代码）