如何用纯CSS实现卡通鹦鹉的效果

来源：动视网责编：小采时间：2020-11-27 18:47:53

如何用纯CSS实现卡通鹦鹉的效果

如何用纯CSS实现卡通鹦鹉的效果:这篇文章主要介绍了关于如何用纯CSS实现卡通鹦鹉的效果，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下源代码下载每日前端实战系列的全部源代码请从 github 下载：https://github.com/comehope/front-end-daily-challe

推荐度：

点击下载本文 文档为doc格式

导读如何用纯CSS实现卡通鹦鹉的效果:这篇文章主要介绍了关于如何用纯CSS实现卡通鹦鹉的效果，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下源代码下载每日前端实战系列的全部源代码请从 github 下载：https://github.com/comehope/front-end-daily-challe

这篇文章主要介绍了关于如何用纯CSS实现卡通鹦鹉的效果，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

源代码下载

每日前端实战系列的全部源代码请从 github 下载：

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，容器中包含 3 个子元素：

<p class="parrot">
 <p class="outer"></p>
 <p class="middle"></p>
 <p class="inner"></p>
</p>

居中显示：

body {
 margin: 0;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: darkslategray;
}

定义容器尺寸：

.parrot {
 width: 10em;
 height: 10em;
 font-size: 30px;
}

画出鹦鹉头部的羽毛：

.parrot {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
}

.parrot .outer {
 position: absolute;
 width: 100%;
 height: 100%;
 border: 1em solid;
 border-color: transparent transparent orangered tomato;
 border-radius: 50%;
}

画出鹦鹉的头部和喙的上半部分：

.parrot .middle {
 position: absolute;
 width: 80%;
 height: 80%;
 border: 4em solid;
 border-color: gold transparent gainsboro white;
 border-radius: 50%;
}

画出鹦鹉的喙的下半部分：

.parrot .inner {
 position: absolute;
 width: 40%;
 height: 40%;
 border: 2em solid;
 border-color: transparent orange transparent transparent;
 border-radius: 50%;
}

用伪元素画出鹦鹉的眼睛：

.parrot .inner::before {
 content: '';
 position: absolute;
 width: 1em;
 height: 1em;
 background-color: black;
 border-radius: 50%;
 left: -2em;
 top: -0.5em;
}

把画面转正：

.parrot > * {
 transform: rotate(45deg);
}

设置鼠标悬停效果，悬停时鹦鹉的头转向另一侧：

.parrot > * {
 transition: 0.5s;
}

.parrot:hover .outer {
 transform: rotate(225deg);
 border-color: transparent transparent tomato orangered;
}

.parrot:hover .middle {
 transform: rotate(calc(225deg - 360deg));
 border-color: transparent gold white gainsboro;
}

.parrot:hover .inner {
 transform: rotate(135deg);
}

最后，修改悬停时鹦鹉的配色：

.parrot:hover .outer {
 border-color: transparent transparent lightseagreen darkcyan;
}

.parrot:hover .middle {
 border-color: transparent gold white gainsboro;
}

.parrot:hover .inner {
 border-color: transparent orange transparent transparent;
}

大功告成！

如何用纯CSS实现卡通鹦鹉的效果

推荐度：

点击下载本文 文档为doc格式

标签：实现卡通效果

热门焦点

如何用纯CSS实现卡通鹦鹉的效果

如何用纯CSS实现卡通鹦鹉的效果

源代码下载

代码解读

如何用纯CSS实现卡通鹦鹉的效果

最新推荐

猜你喜欢

热门推荐