论坛 › 马黑黑教程专版 › CSS：画个太阳

马黑黑 发表于 2022-2-24 23:01

CSS：画个太阳

本帖最后由 马黑黑 于 2022-2-24 23:07 编辑

CSS绘制太阳原理很简单，几个元素：圆形，颜色，光晕。先看CSS代码：

#sun {
      /* 元素 太阳本体及光晕 */
      margin: 100px auto;
      width: 100px;
      height: 100px;
      background: #ff4500;
      border-radius: 50%;
      box-shadow: 0 0 50px #ffff00;
      position: relative;
}

HTML代码：

<div id="sun"></div>

说明：太阳应该还有散射的少量光影，可以考虑用伪元素 ::before 和 ::after 来实现，不够的话可以加入一些span元素，这里为了简便先不介绍。

千羽 发表于 2022-2-24 23:15

感觉马黑黑老师无所不能，俺有时间就来跟你学习{:4_187:}

马黑黑 发表于 2022-2-24 23:37

千羽 发表于 2022-2-24 23:15
感觉马黑黑老师无所不能，俺有时间就来跟你学习

握爪

加林森 发表于 2022-2-25 11:42

继续来学习

红影 发表于 2022-2-25 19:03

这个只是caa代码啊，应该还有动画的没发来呢{:4_187:}

马黑黑 发表于 2022-2-26 22:10

红影 发表于 2022-2-25 19:03
这个只是caa代码啊，应该还有动画的没发来呢

CSS，这帖不讲动画，讲基本画法

红影 发表于 2022-2-26 22:35

马黑黑 发表于 2022-2-26 22:10
CSS，这帖不讲动画，讲基本画法

嗯嗯，知道了{:4_173:}

马黑黑 发表于 2022-2-26 22:44

红影 发表于 2022-2-26 22:35
嗯嗯，知道了

这样会感觉容易一些

红影 发表于 2022-2-27 18:44

马黑黑 发表于 2022-2-26 22:44
这样会感觉容易一些

嗯嗯，循序渐进{:4_187:}

马黑黑 发表于 2022-2-27 18:56

红影 发表于 2022-2-27 18:44
嗯嗯，循序渐进

学习讲究这个道理

红影 发表于 2022-2-27 20:52

马黑黑 发表于 2022-2-27 18:56
学习讲究这个道理

我总是学了后面的忘记前面的{:4_189:}

马黑黑 发表于 2022-2-27 21:30

红影 发表于 2022-2-27 20:52
我总是学了后面的忘记前面的

猴子捡玉米棒子最后也能找到吃的

红影 发表于 2022-2-27 22:49

马黑黑 发表于 2022-2-27 21:30
猴子捡玉米棒子最后也能找到吃的

虽然丢 了不少，猴子也知道丢在哪了{:4_173:}

马黑黑 发表于 2022-2-28 11:09

红影 发表于 2022-2-27 22:49
虽然丢 了不少，猴子也知道丢在哪了

最主要是，手头好歹有一个玉米棒子

红影 发表于 2022-2-28 18:41

马黑黑 发表于 2022-2-28 11:09
最主要是，手头好歹有一个玉米棒子

本来是熊掰玉米，咋被你换成猴子了{:4_172:}

马黑黑 发表于 2022-2-28 19:09

红影 发表于 2022-2-28 18:41
本来是熊掰玉米，咋被你换成猴子了

熊不吃玉米的

红影 发表于 2022-2-28 20:48

马黑黑 发表于 2022-2-28 19:09
熊不吃玉米的

熊是杂食性动物啊。

马黑黑 发表于 2022-2-28 21:22

红影 发表于 2022-2-28 20:48
熊是杂食性动物啊。

但也不是玉米，会拉肚的，所以是猴子去采摘玉米

红影 发表于 2022-2-28 21:28

马黑黑 发表于 2022-2-28 21:22
但也不是玉米，会拉肚的，所以是猴子去采摘玉米

熊不能吃玉米？这个真不知道。算了，不管谁去摘玉米，想说的意思懂了{:4_189:}

马黑黑 发表于 2022-2-28 21:31

红影 发表于 2022-2-28 21:28
熊不能吃玉米？这个真不知道。算了，不管谁去摘玉米，想说的意思懂了

这不就结了。童话故事你得重新看。

查看完整版本: CSS：画个太阳