css3常见效果设置

最新推荐文章于 2025-01-01 11:56:46 发布

原创最新推荐文章于 2025-01-01 11:56:46 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

8 篇文章

订阅专栏

css3新增了很多新的模块，在很大程度上便利了样式设计，如果没有经历过全用css2开发页面过程，这种便利程度很难亲自体会，就拿以前的圆角边框来说，css2是这样实现的把div分成了三部分，每部分用不同背景图片

上部分：

中间部分：

下部分：

到了css3 就是一行代码 border-radius：---

渐变背景色、阴影也是一样的就是背景图片

今天也不是要说css3如何便利而是介绍几个自己认为非常广泛的css样式

1.卡片效果

css：

   .text{
      display: flex;
      box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
     }

2.文字超出三个点代替注意display：flex盒子无效生效的话在文字外面再套一层设置以下样式

css:

.text1 .textcontent{
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

效果：

3.图片边框（也可以加上效果1的卡片效果使图片立体一些）

css：

   img{
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;}

   效果：

4.四中方向的箭头

i{
    border: solid #555;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
.left{
    transform:  rotate(135deg);;
    -webkit-transform:  rotate(135deg);;
}

.right{
    transform:  rotate(-45deg);;
    -webkit-transform:  rotate(-45deg);;
}
.top{
    transform:  rotate(-135deg);;
    -webkit-transform:  rotate(-135deg);;
}
.bottom{
    transform:  rotate(45deg);;
    -webkit-transform:  rotate(45deg);;
}

<i class="left"></i>
<i class="right"></i>
<i class="top"></i>
<i class="bottom"></i>

5.简单的加载动画

.loading{
    width: 120px;
    height: 120px;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    animation: load 2s linear infinite;
}
@keyframes load {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

6.简单开关

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {display:none;}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    overflow: hidden;
}
.slider:after{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:disabled + .slider:after{
    background-color: rgba(0,0,0,.2);
}
input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

禁用：
<label class="switch">
    <input type="checkbox" disabled>
    <div class="slider"></div>
</label>
<label class="switch">
    <input type="checkbox" checked disabled>
    <div class="slider"></div>
</label>
<br>
正常：
<label class="switch">
    <input type="checkbox">
    <div class="slider"></div>
</label>
<label class="switch">
    <input type="checkbox" checked>
    <div class="slider"></div>
</label>

暂时先整理这么多，后面有机会接着整理一些