CSS3新特性

最新推荐文章于 2024-07-09 08:53:54 发布

不忘初心1995

最新推荐文章于 2024-07-09 08:53:54 发布

阅读量567

点赞数

本文链接：https://blog.csdn.net/qq_42451776/article/details/119512954

版权

渐变

颜色渐变之线性渐变

background: linear-gradient(to right,red, blue,green); //线性渐变
to bottom right               //从左上角

颜色渐变之径向渐变

颜色结点均匀分布的径向渐变

background: radial-gradient(red, green, blue); /* 标准的语法 */

颜色结点不均匀分布的径向渐变

background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */

吸顶

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        position: sticky;
        top: 0px;
        left: 0px;
    }
</style> 

<body>
    <div style="height:2000px">
        <ul>
            <li>hhh1</li>
        </ul>
        <div class="box1">121</div>
    </div>
</body>

过渡效果(完成后会回到原处)

transition: 需要过度的元素 time(耗时) linear(匀速) time(延时)；

也可以设置步数：
transition:all 2s steps(4);

transform完成2d动画

行内元素不能生效

平移

transform: translate(50px,100px); //X Y

旋转

transform: rotate(30deg); //角度

旋转中心的设置：

Transform-origin:left top; //默认几何中心，也可以设置具体的px

缩放

transform: scale(2,4); //X Y

斜切

transform: skew(30deg,20deg); // X Y

扩展：旋转并位移

transform: translate(50px,100px) rotate(30deg); //顺序不能换

transform完成3d动画

让转换的子元素保留3D转换：也就是要设给父元素

transform-style: preserve-3d;

左手定则：大拇指指向轴的正方向。四指弯曲方向既是正向。

扩展：井深透视

Perspective:100px; //调距离
Prespective-origin:10px 20px; //调角度

动画

常用属性

animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;

Animation:动画名字时长匀速延时无限循环交替执行动画
animation: myfirst1 5s linear 2s infinite alternate;
animation-fill-mode:forwards; //保存动画结果，默认不保留

具体的动画示例

@keyframes myfirst1
{
	from {background: red;}
	to {background: yellow;}
}
@keyframes myfirst2
{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

滤镜(filter)

blur (高斯模糊)

给图像设置高斯模糊。所以值越大越模糊,如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
filter: blur(20px);

grayscale(灰度)

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
filter: grayscale(0.5);

opacity(透明程度)

转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

label

定义和用法
标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。

实例
带有两个输入字段和相关标记的简单 HTML 表单：

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

扩展

使用postcss完成添加浏览器前缀

自动加浏览器前缀

文字环绕

shape-outside

自定义滚动条

scrollbar

隐藏滚动条

.wrapper {
  max-width: 100%;
  height: calc(100vh - 120px);
  background-color: #f6f7f9;
  overflow-y: auto;
}
.wrapper::-webkit-scrollbar {
display: none;
}

css实现三角形

 <style>
        div {
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 40px solid red;
            transform: rotate(90deg);
        }
    </style>

0.5px的实现

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        .line{
            min-height: 100vh;
        }
        .con, .con1{
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .con::after{
            content: "";
            background-color: black;
            height: 1px;
            width: 200px;
            position: absolute;
            bottom: 0;
            left: 0;
            transform: scaleY(0.5);
        }

        .con1{
            margin: 100px auto;
        }
        .con1::before{
            content: "";
            border: 1px solid black;
            width: 198%;
            height:198%;
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: 0 0;
            transform: scale(0.5);
        }
    </style>
</head>
<body>
    <div class="line">
            <div class="con">
                下边0.5px
            </div>
            <div class="con1">
                4条边0.5px
            </div>
    </div>
</body>

页面导入样式时，使用link和@import有什么区别？

相同的地方，都是外部引用CSS方式，区别：
link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
link引用CSS时候，页面载入时同时加载；@import需要在页面完全加载以后加载，而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载
link是xhtml标签，无兼容问题；@import是在css2.1提出来的，低版本的浏览器不支持
link支持使用javascript控制去改变样式，而@import不支持
link方式的样式的权重高于@import的权重
import在html使用时候需要标签.