今天在学习的时候发现自己居然不知道css可以使用变量来引用一个值。所以决定做一个小案例。刚好之前也了解到新出的grid布局很好用，这里我就结合一下两个我不熟悉的知识点，给大家画一只可爱的小企鹅。欢迎大家指正错误。我们共同进步吧！1.grid实现”9宫格“-小企鹅是基于下图的九宫格来展开的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS变量加grid画一只企鹅</title>
<style>
.penguin {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: 100px 100px 100px;//3列
grid-template-rows: 100px 100px 100px; //3行
}
.item:nth-child(even) {
background-color: darkkhaki;
}
.item:nth-child(odd) {
background-color: darksalmon;
}
</style>
</head>
<body>
<main class="penguin">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</main>
</body>
</html>
2.画一只小企鹅
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS变量加grid画一只企鹅</title>
<style>
/*
因为层叠的效果，CSS 变量通常会定义在:root元素里。
在:root创建的变量，在整个网页里面都能生效。
1.如果在元素里创建相同的变量，会重写:root变量设置的值。
eg: penguin里面的--penguin-belly: white;
2.使用媒体查询更改变量-CSS 变量可以简化媒体查询的方式。
eg: @media (max-width: 350px) {
:root {}
}
*/
:root {
/* 声明变量的时候，变量名前面要加两根连词线（--）；
var()函数用于读取变量；
函数还可以使用第二个参数，表示变量的默认值。
eg:background: var(--penguin-skin, gray);*/
/* 动态设置企鹅的肤色 */
--penguin-skin: gray;
--penguin-belly: black;
--penguin-foot: orange;
--penguin-cheek: pink;
}
.penguin {
width: 300px;
height: 300px;
background-color: aquamarine;
display: grid;
grid-template-columns: 65px 170px 65px;
grid-template-rows: 100px 150px 50px;
/*重写:root变量设置的值*/
--penguin-belly: white;
}
/* 基数 */
/* .item:nth-child(even) {
background-color: darkkhaki;
}*/
/* 偶数 */
/* .item:nth-child(odd) {
background-color: darksalmon;
} */
/* 头 */
.head {
background: var(--penguin-skin, gray);
width: 80%;
height: 100%;
border-radius: 80% 80% 50% 50%;
align-self: end;
transform: translateY(20%);
z-index: 3;
position: relative;
}
.face {
/* display: grid;
grid-template-columns: 33% 33% 33%;
justify-items: center;
align-items: end; */
width: 80%;
height: 90%;
/* border-radius: 50%; */
position: relative;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: 10% auto;
}
.face:before {
display: block;
content: "";
width: 80%;
height: 100%;
border-radius: 70% 60% 50% 40%;
transform: rotate(-45deg);
background: var(--penguin-belly, white);
position: absolute;
left: -5%;
top: 5%;
}
.face:after {
display: block;
content: "";
width: 80%;
height: 100%;
border-radius: 60% 70% 40% 50%;
transform: rotate(45deg);
background: var(--penguin-belly, white);
position: absolute;
right: -5%;
top: 5%;
}
.face-on {
display: grid;
grid-template-columns: 33% 33% 33%;
justify-items: center;
align-items: end;
width: 80%;
height: 80%;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.eye {
background: black;
width: 20px;
height: 20px;
border-radius: 50%;
}
.left-eye {
margin-left: 50%;
}
.right-eye {
margin-right: 50%;
}
/*
CSS 选择器
:before p:before 在每个 <p> 元素的内容之前插入内容。
:after p:after 在每个 <p> 元素的内容之后插入内容。
*/
.eye:after {
display: block;
content: " ";
background-color: var(--penguin-belly, white);
width: 8px;
height: 8px;
border-radius: 50%;
}
/* 脸颊 */
.cheek {
width: 60%;
height: 30%;
border-radius: 50%;
background-color: var(--penguin-cheek, pink);
align-self: start;
}
.mouth {
width: 100%;
height: 100%;
display: block;
}
.mouth:before {
display: block;
content: " ";
width: 60%;
height: 20%;
border-radius: 50%;
background: var(--penguin-foot, rgb(139, 137, 137));
margin: 0 auto;
}
.mouth:after {
display: block;
content: " ";
width: 50%;
height: 20%;
border-radius: 50%;
background: var(--penguin-foot, gray);
margin: 0 auto;
}
/* 手 */
.hand {
width: 50%;
height: 50%;
background: var(--penguin-skin, gray);
z-index: 0;
}
/*
设置多个不同的CSS变换(transform)属性时，在属性中间用空格隔开即可， 旋转 缩放 扭曲 等同时执行多个效果！
顺序：是从后向前执行的！！！
顺序不同变换效果也会不同！！！
eg: transform: rotate(45deg) translateX(10px);
eg: transform: translateX(10px) rotate(45deg) ;
位置会有很大的区别！
*/
/* 左手 */
.left-hand {
border-radius: 30% 30% 120% 30%;
transform: rotate(45deg) translate(90%, -26%);
justify-self: end;
}
/* 右手 */
.right-hand {
border-radius: 30% 30% 30% 120%;
transform: rotate(-45deg) translate(-90%, -26%);
}
/*肚子*/
.center {
margin: 0 auto;
}
.belly-border {
width: 95%;
height: 100%;
background: var(--penguin-skin, gray);
border-radius: 120%;
z-index: 1;
}
.belly-in {
width: 85%;
height: 95%;
background: var(--penguin-belly, white);
border-radius: 120% 120% 100% 100%;
}
/* 脚 */
.penguin-feet {
position: relative;
}
.feet {
display: inline-block;
width: 30%;
height: 50%;
background: var(--penguin-foot, orange);
border-radius: 50%;
position: absolute;
z-index: 0;
top: -40%;
}
.left-feet {
transform: rotate(160deg);
left: 18%;
}
.right-feet {
transform: rotate(-160deg);
right: 18%;
}
</style>
</head>
<body>
<img src="./penguin.png" style="width: 300px; height: 300px;" />
<main class="penguin">
<section class="item"></section>
<section class="item head center">
<div class="face"></div>
<div class="face-on">
<div class="eye left-eye"></div>
<div></div>
<div class="eye right-eye"></div>
<div class="cheek left-cheek"></div>
<div class="mouth"></div>
<div class="cheek right-cheek"></div>
</div>
</section>
<section class="item"></section>
<section class="item hand left-hand"></section>
<section class="item center belly-border">
<div class="belly-in center"></div>
</section>
<section class="item hand right-hand"></section>
<section class="item"></section>
<section class="item penguin-feet">
<section class="feet left-feet"></section>
<section class="feet right-feet"></section>
</section>
<section class="item"></section>
</main>
</body>
</html>
3.预览
推荐文章
1.grid布局
http://www.ruanyifeng.com/blo...
2.css变量
http://www.ruanyifeng.com/blo...
3.css选择器
https://www.w3school.com.cn/c...
4.flex布局
http://www.ruanyifeng.com/blo...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。