CSS3知识汇总4

今晚有个小激动，放下学习后，意外的得到了一笔小回报，虽然钱不多，但很开心。11月学习一小本英文书时发现一个错误，一个单词拼错了，给出版社发了封信，以为他们不会回复呢，结果今晚收到了感谢信和100元红包。好开心。

【云朵】

<div class="cloud"></div>

.cloud{

    width: 2em;

    height: 2em;

    font-size:50px;

    color:whitesmoke;/*烟白色*/

    background: currentColor;

    border-radius: 100% 100% 0 0;/*顶部圆弧*/

    position: relative;

}

.cloud::before,

.cloud::after{

    content:'';

    position: absolute;

    background-color: currentColor;

    bottom: 0;

}

.cloud::before{

    width: 1.25em;

    height: 1.25em;

    border-radius: 100% 100% 0 100%;  /*水滴状，圆弧向左*/

    left:-30%;/*放置在中间主元素左侧*/

}

.cloud::after{

    width: 1.5em;

    height: 1.5em;

    border-radius: 100% 100% 100% 0;  /*水滴状，圆弧向右*/

    right:-30%;/*放置在中间主元素右侧*/

}

【background-size】

如果指定个值，另一个值是按比例自动计算的

【木尺】

<div class="ruler"></div>

.ruler {

    position: relative;

    width: 45em;

    height: 6em;

    font-size: 10px;

    background: linear-gradient(

        peru 45%,

        sandybrown 45%

    );

    margin: 5em;

}

.ruler::before,

.ruler::after {

    content: '';

    position: absolute;

    width: inherit;

    height: inherit;

    background-image: linear-gradient(

        to right,

        transparent 1em,

        darkslategray 1em, darkslategray 2em,

        transparent 2em);

    background-repeat: repeat-x;

}

.ruler::before {

    background-size: 4em 2em;

}

.ruler::after {

    background-size: 4em 1em;

    left: 2em;

}

【牛牛跳动】

#cattle{width:30%;height: auto;right:0%;bottom:0px;left:0;margin:auto;position: absolute;

    -webkit-animation: cattle-move 1s 3.3s infinite alternate ease-in-out;

    animation: cattle-move 1s 3.3s infinite alternate ease-in-out;

    -webkit-transform-origin: bottom;

    transform-origin: bottom;

}

@keyframes cattle-move{

    0% {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    33% {

        -webkit-transform: rotate(-3deg);

        transform: rotate(-3deg);

    }

    66% {

        -webkit-transform: rotate(3deg);

        transform: rotate(3deg);

    }

    100% {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

}

@-webkit-keyframes cattle-move{

    0% {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    33% {

        -webkit-transform: rotate(-3deg);

        transform: rotate(-3deg);

    }

    66% {

        -webkit-transform: rotate(3deg);

        transform: rotate(3deg);

    }

    100% {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

}