2021-05-08

使用CSS样式表“画画”（眼睛篇）

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：CSS

作者：LD天使

撰写时间：2021/5/1

*采用软件：DW

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

新人执笔，用词不当，请多指教；

1.先创建好HTML元素；

 

2.然后在CSS里设置样式，先搞定最两个外围的div，给它一定的宽高，背景颜色，定位至浏览器一定的位置，一双眼睛的位置，它两的高度（top值）最好一致；背景颜色也不要让它空白，选择一种偏白的灰色作为眼白吧；

 

3.给定位好的元素设置上transfrom的rotate（旋转）属性，一般来说都是45deg（45度）；再设置它们的边框圆角效果，达到尽量与眼睛轮廓相同；

 

4.给最外围里嵌套的第一个div设置样式，该div作为眼睛的瞳孔存在，你可以通过设置它的边框圆角来旋转一双圆形的瞳孔或是椭圆的瞳孔；

*注意瞳孔的颜色最好不要全黑，尽量选择以其他颜色为基调的偏暗的颜色。

 

5.给眼睛加上眉毛，也就是分别设置最外围元素的边框，设置的边框位置以浏览器为准的左右；眉毛的颜色最好选择以橙色为基调的黑色；

 

6.给眼睛加上高光，如果你是要一双通知思考的眼睛，也可以考虑不要这一步；

 

7.给眼睛加上一些动态的效果，也就是动画，放大移动任君选择，记得分别给最外围的div设置overflow的hidden属性；

 

 

一双简易的眼睛画好了！

同学们也可以根据自己的爱好进行改制，欢迎在评论区讨论。