雪花

一、边框和渐变着色

一、效果图

二、边框和渐变着色

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .box {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
    }
 
    /* 左边竖条实现方法 */
 
    .left_line {
        width: 200px;
        height: 80px;
        background: #eeeeee;
        margin-top: 20px;
    }
 
    /* 使用border */
 
    .left_line_one {
        border-left: 4px solid #645264;
    }
 
    /* 伪元素 */
 
    .left_line_two {
        position: relative;
    }
 
    .left_line_two::after {
        content: "";
        position: absolute;
        left: 0px;
        top: 0px;
        width: 4px;
        height: 80px;
        background: greenyellow;
        line-height: 80px;
    }
 
    /* box-shadow */
 
    .left_line_three {
        /* 竖条在div里 */
        box-shadow: inset 4px 0px 0 0 deeppink;
        /* 竖条在div外 */
        /* box-shadow: 4px 0px 0 0 deeppink; */
    }
 
    /* css3渐变 */
 
    .left_line_four {
        background-image: linear-gradient(90deg, deeppink 0px, deeppink 4px, transparent 4px);
    }
 
    /* 条纹边框 */
 
    .tiaowen_border {
        position: relative;
        width: 180px;
        height: 180px;
        margin-left: 30px;
        margin-top: 20px;
    }
 
    .tiaowen_border_one {
        background: #9c27b0;
        border: 20px dashed #2196f3;
    }
 
    .tiaowen_border_one::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #fff;
    }
 
    .tiaowen_border_two {
        background: #fff;
        background-clip: padding-box;
        border: 20px dashed greenyellow;
    }
 
    .tiaowen_border_two::before {
        content: "";
        position: absolute;
        top: -20px;
        left: -20px;
        bottom: -20px;
        right: -20px;
        background: #996699;
        z-index: -1;
    }
 
    .tiaowen_border_two img {
        width: 100%;
        height: auto;
    }
 
    .jianbian {
        width: 400px;
        height: 100px;
        margin-left: 100px;
        margin-bottom: 20px;
    }
 
    .jianbian_one {
        background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%);
        animation: gradientChange 2s infinite;
    }
 
    @keyframes gradientChange {
        100% {
            background: linear-gradient(90deg, #e91e1e 0%, #6f27b0 100%);
        }
    }
 
    .jianbian_two {
        background: #ffc700;
        animation: gradientChangetwo 3s infinite;
    }
 
    @keyframes gradientChangetwo {
        50% {
            background: #e91e1e;
        }
        100% {
            background: #ffc700;
        }
    }
 
    .jianbian_three {
        background: linear-gradient(90deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
        background-size: 200% 100%;
        background-position: 0 0;
        animation: bgposition 2s infinite linear alternate;
    }
 
    @keyframes bgposition {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 100% 0;
        }
    }
</style>
 
<body>
    <div class="box">
        <!-- 左边竖条实现方法 -->
        <div>
            <div class="left_line_one left_line"></div>
            <div class="left_line_two left_line"></div>
            <div class="left_line_three left_line"></div>
            <div class="left_line_four left_line"></div>
        </div>
 
        <!-- 其他的还有drop-shadow 是 CSS3 新增滤镜 filter 中的其中一个滤镜,也可以生成阴影;outline(不推荐使用);改变滚动条样式 -->
 
        <!-- 条纹边框的实现:
            第一种方法:利用border:20px dashed #996699描绘出边框,用伪元素画一个背景 
            第二种方法和第一种方法差不多,不过利用了css3中的background-cli这个属性
            background-cli:规定背景的绘制区域;默认值为no
            border-box	背景被裁剪到边框盒。	测试
            padding-box	背景被裁剪到内边距框。	测试
            content-box	背景被裁剪到内容框。-->
        <div>
            <div class="tiaowen_border_one tiaowen_border"></div>
            <div class="tiaowen_border_two tiaowen_border"></div>
            <div class="tiaowen_border_two tiaowen_border">
                <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3644783065,679437688&fm=173&app=25&f=JPEG?w=640&h=360&s=E55AAE76495050C0924429EF0300A022"
                    alt="">
            </div>
        </div>
 
        <!-- 背景色渐变动画 -->
        <div>
            <div class="jianbian jianbian_one"></div>
            <div class="jianbian jianbian_two"></div>
            <!-- 总结一下,线性渐变(径向渐变)是不支持 animation 的,单色的 background 是支持的。 -->
            <!-- 背景色渐变动画 -->
            <!-- 通过 background-position 模拟渐变动画 -->
            <div class="jianbian jianbian_three"></div>
            <!-- 通过 background-size 模拟渐变动画 这个跟上面的一样的操作;这两个会用大量的重绘,页面性能消耗大,-->
 
        </div>
    </div>
    <script>
        
    </script>
</body>
 
</html>

  

posted @ 2019-01-19 10:44  十色  阅读(445)  评论(0编辑  收藏  举报