用CSS画一朵太阳花
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 通常我们只用CSS来控制各控件在页面中的布局，其实站在技术与艺术的交叉口我们还可以利用CSS对颜色、形状精准控制的特性来画画。本文从用纯CSS画一个花瓣，画一张笑脸开始，然后给各个部件上色最终成型一朵太阳花。
通常我们只用CSS来控制各控件在页面中的布局，其实站在技术与艺术的交叉口我们还可以利用CSS对颜色、形状精准控制的特性来画画。
本文从用纯CSS画一个花瓣，画一张笑脸开始，然后给各个部件上色最终成型一朵太阳花。
步骤概要
首要任务是用CSS画一朵花瓣花瓣画成后，用transform中的 rotate(30deg)函数重复11次，再在中间画个圈，太阳花的骨架就成了。画眼睛和嘴巴，然后给整体上上颜色希望把花做成可变大小式的（不是固定像素尺寸），即用一个css属性即可控制步骤详解
第一步，画花瓣方法有很多，这里我采用的是transform配合border-radius：先画一个正方形，然后用transform的skewX(30deg)把这个正方形压扁变成===》平行四边形，用border-radius: 0 50% 50% 50%;设置三边的圆角===》花瓣出来了。第二步，由于在步骤一中压扁的transform用了transform-origin: 0 0;，而现在要做的是控制花瓣样式让它绕着花心旋转，所以这时候的transform是花心的位置。我这里采用的方法是直接给花瓣弄了个父元素 ，让父元素以花心为圆心进行旋转。第三步，画眼睛，直接画俩黑色的圈圈，然后再用before和after俩伪元素弄弄两个白色的点，让眼睛看起来泪汪汪的可怜状，最后再加个box-shadow,就当做化妆弄眼影了。嘴巴分成两部分，下面部分是个半圆，上面部分是有点凸起的弧线，也通过控制 border-radius: .x1 x2 0 0/y1 y2 0 0; 来实现， x1，y1为组成弧线的两条垂直宽高，x1（x2）比y1(y2) 要大挺多的，也就代表弧度比较平。上颜色就不说了，直接通过css，nth-child选择器，然后这个例子中花瓣的颜色是我根据自己拍的那张毛绒玩具照片，用取色器直接取下来的（拍摄光线原因颜色不是很精确）。第四步，在一个地方想引入这朵花，场景不同宽高大小肯定是不一样的嘛。实现方法也挺多，我这边尝试了‘em’这种方案，给整体的父元素设一个font-size，然后花里面所有的尺寸都根据它来。设置这个font-size也有学问，因为一般浏览器最小的能显示像素值是12px，所以想要控制花朵大小游刃有余，在font-size：12px的时候，花朵是足够小的。codePen 演示地址：https://codepen.io/kaikai1024/pen/VjyVNB
相关文章
【前端大揭秘】CSS盒子模型的爱恨情仇：一场关于标准与IE模型的精彩对决！
【8月更文挑战第26天】本文深入探讨CSS中的两大盒子模型——标准盒模型与IE盒模型。通过理论解析与实例代码，清晰展示了两种模型下元素尺寸的构成方式及其应用场景。标准盒模型适合精确控制内容区尺寸，而IE盒模型在处理固定宽度元素时更为直观。掌握这些知识将帮助前端开发者在实际项目中做出更优的设计决策，提升网页布局的质量与美观性。
CSS-奥运五环
前言 本章是为了记录日常学习所遇到的问题或学到的知识分享，欢迎大家阅读参考。 以下是本章正文内容，下面案例可供参考
相关知识
如何画一朵玫瑰花
铅笔画如何画一朵玫瑰花
简笔画教程：教你画一朵栀子花
山茶花怎么画？教你画一朵鲜艳的山茶花
绘画教程：如何画一朵彩色的菊花
简笔画教程：教你画一朵栀子花简笔画教程
彩铅画花教程，画一朵等待春天的玉兰花
栀子花怎么画？教你画一朵纯洁无瑕的栀子花
HTML CSS画一朵向日葵
零基础如何画花朵？分步骤教你画一朵好看的小花
网址: 用CSS画一朵太阳花 https://m.huajiangbk.com/newsview665891.html
| 上一篇: 玫瑰花画法 |
下一篇: python 绘制一个四瓣花图 |
