今晚有个小激动，放下学习后，意外的得到了一笔小回报，虽然钱不多，但很开心。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);
}
}
