css3 calc的使用和css3部分新属性的使用

最新推荐文章于 2024-02-17 00:09:36 发布

原创最新推荐文章于 2024-02-17 00:09:36 发布 · 271 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web css3 calc的使用 #web css3 transition 过度动画 #animation @keyframes 创建动画 #css 计算属性 calc #省略号

html 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何使用 CSS3 的 calc 函数实现自适应宽度布局，探讨了 transition 属性用于平滑过渡效果的设置，包括过渡属性、持续时间、时间曲线和延迟。此外，还讲解了使用 @keyframes 规则创建复杂动画的方法，以及如何通过 CSS 禁止元素被选中和实现文本溢出省略号效果。

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

css3 calc()定制自适应宽度

div {
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);
}

calc的使用时注意，运算符前后一定要加空格 calc(100%空格 -空格 50px)
transition 过度动画
4个属性
transition-property
transition-duration
transition-timing-function
transition-delay
简写
transition: width 1s linear 2s;
1.规定应用过渡的 CSS 属性的名称
2.定义过渡效果花费的时间。默认是 0。
3.规定过渡效果的时间曲线。默认是 “ease”
4.规定过渡效果何时开始。默认是 0。
CSS3 动画
animation @keyframes 创建动画

div
{
    animation: myfirst 5s;
}
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

css禁用选中功能

no-select{
	-webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;
   }

单行省略号

.text-ellipsis{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
}

多行

.text-ellipsis{
    overflow: hidden;      
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    /* autoprefixer: off */     //对，就是加这两个注释就行。
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    display:-webkit-box; 
}