当前位置: 首页 > Web前端 > HTML5

前端日常实践:58#视频演示如何用纯CSS制作卡通鹦鹉

时间:2023-04-05 16:00:43 HTML5

效果预览。按右边的“点击预览”按钮可以在当前页面进行预览,点击链接可以全屏预览。https://codepen.io/comehop??e/pen/vrRmWyInteractivevideo这个视频是交互式的,你可以随时暂停视频,编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c7adzTW源码下载日常前端实战系列完整源码请到github下载:https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom,容器包含3个子元素:

居中显示:body{margin:0;高度:100vh;显示:弹性;对齐项目:居中;证明内容:居中;background-color:darkslategray;}定义容器尺寸:.parrot{width:10em;高度:10em;font-size:30px;}画鹦鹉头上的羽毛:.parrot{position:relative;显示:弹性;对齐项目:居中;证明内容:中心;}.鹦鹉。外部{位置:绝对;宽度:100%;高度:100%;边框:1em实心;border-color:transparenttransparentorangered番茄;border-radius:50%;}画鹦鹉的头和嘴的上半部分:.parrot.middle{position:absolute;宽度:80%;高度:80%;边框:4em实心;边框颜色:金色透明盖恩斯伯勒白;border-radius:50%;}画出鹦鹉喙的下部:.parrot.inner{position:absolute;宽度:40%;高度:40%;边框:2em实心;border-color:transparentorange透明透明;border-radius:50%;}用伪元素画出鹦鹉的眼睛:.parrot.inner::before{content:'';位置:绝对;宽度:1em;高度:1em;背景色:黑色;边界半径:50%;左:-2em;top:-0.5em;}将屏幕转到正面:.parrot>*{transform:rotate(45deg);}设置鼠标悬停效果,悬停时鹦鹉的头转到另一边:.parrot>*{transition:0.5s;}.parrot:hover.outer{transform:rotate(225deg);border-color:transparenttransparenttomatoorangered;}.parrot:hover.middle{transform:rotate(calc(225deg-360deg));border-color:transparentgoldwhitegainsboro;}.parrot:hover.inner{transform:rotate(135deg);}最后修改鹦鹉悬停时的颜色:.parrot:hover.outer{border-color:transparenttransparentlightseagreendarkcyan;}.parrot:hover.middle{border-color:t随机金色白色gainsboro;}.parrot:hover.inner{border-color:transparentorangetransparenttransparent;}大功告成!