web前端11.30笔记

最新推荐文章于 2024-06-14 11:01:38 发布

VCR__

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量23

点赞数

文章标签：前端笔记

本文链接：https://blog.csdn.net/VCR__/article/details/134749942

版权

字体图标

<link rel="stylesheet" href="../..">
<style>
   button .iconfont{
           font-size:40px;
           color:orange;
        }
</style>



<body>
    <i class="iconfont icon-sousou"></li>
    <button><i class="iconfont icon-sousou"></button>

CSS样式的继承

会继承的属性：字体属性，文本属性，字体颜色 等
不会继承：宽高，内外边距，a链接 等

过渡

transition-property:width height;
transition-duration:3s; 变化时间
transition-delay:2s;延迟
transition-timing-function:linear/steps(12);
                            匀速    几帧
速写 transition:all 3s;

CSS3动画

div{
    width:...;
    height:...;
    background-colour:..;
    animation-name:myMove;
    animation-duration:3s;
    animation-direction:altemate-reverse;
  }


@keyfarmes myMove{
    from{
         width：300px;
         height:50px;
         background-colour:pink;
      }
    to{
        ...;
        ...;
        ...;
      }

     0%
     25%
     50%
     75%
     100%

2D转换

.father{
   position:relative;
   width:300px;
   height:300px;
   border:1px solid black;
   }
.son{
   position:absolute;
   top:0;
   left:0;
   width:300px;
   height:300px;
   background-colour:green;
 水平移动
   transform:translateX(100px)/translateY(100px);
   连写 transform:translate(100px,100px);
 旋转
   transform:rotateX(45deg)/rotateY(45deg);
   连写transform:translateX(100px) rotateX(45deg);
缩放 
   transform:scaleX(2)/scaleY(0.2)
   transform:scale(0.2)
扭曲
   transform:skewX(45deg)

3D旋转

transform:translateZ(100px);
transform:rotateZ(45deg);
transform:rotateX(45deg);
transform-origin:top/100px;

阴影

文字 text-shadow:2px 2px 2px pink;
            左右 上下 虚度
盒子 box-shadow:2px 2px 2px pink;

媒体查询

@media only screen and(max-width:600px){
   body{
       background-color:pink;
      }
     }

渐变

background-image:linear-gradient(pink,green);

多列

column-count:2;
column-gap:400px;

VCR__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
web前端11.30笔记

【代码】web前端11.30笔记。
复制链接

扫一扫

web前端11.30笔记

“相关推荐”对你有帮助么？