css中一些设计总结

一、背景

在做项目的时候，有一个提出了这样的需求：文字一个一个向上或者向下浮动，到达边界变成在一个范围内上下浮动。一个需求就是改变图片的大小适配自己的盒模型。一个是渐变色分割。

二、解决

1.实现字体浮动

在js中有两个循环执行的方法，setTimeout，setInterval两个方法。

setTimeout只执行一次，而setInterval是一直执行直到浏览器变化或者网页变化。

function p(){
        $i = 1;
        $(".content>p").each(
            function () {
                var mythis = this;
                setTimeout(function () {
                    $(mythis).css("font-size", getRandom(25, 35));
                    $(mythis).addClass("top-up");
                }, $i * 500);
                $i++;
            }
        );
}

动画效果截图

字体会一个个的进行变化

2.背景图片适配

在实现图片的时候，一个618px*1080px的图片放入到一个200px*300px的容器中。将使用下面的方法去适配

.m-mid .mid-left .left-top {
    width: 240px;
    height: 300px;
    background-image: url("../static/消费结构图/1.png");
    background-repeat: no-repeat;
    background-color: #333333;
    border: none;
    /*关键部分：position和size一个表示位置，一个表示适配的方法*/
    background-position: center center;
    background-size: contain;
    -webkit-background-size: cover;
    -moz-background-size: cover;
}

3.渐变色分割

首先使用渐变填充整个div，然后使用border去遮住其中的div

.one, .two, .three, .four, .five {
    height: calc(60vh);
    width: 2%;
    /* 颜色渐变 */
    background-image: linear-gradient(#e66465, #9198e5, #B3C0D1);
    position: relative;
    float: left;
    background-origin: inherit
}

/*分割线设置*/
.box1-one, .box1-two, .box1-three, .box1-fourth {
    border-bottom: 2px solid white;
}

效果展示图

参考

IT工具网