江苏龙网

  1. 主页 > 生活百科 > >

CSS画一个红苹果

css

最近每天都带一个苹果加餐，有次吃到一个十分漂亮的红苹果，突然觉得，可以试着画一个苹果看看 。
之前确实无法想象，可以使用css能画出一个苹果 。
先看效果：

CSS画一个红苹果

文章插图
 
你没有看错，这个不是真苹果 。仅仅一百多行代码就可以实现的CSS的红苹果 。我自己看到最终效果都惊呆了 。
第一步画出苹果的轮廓：
.Apple {position: relative;width: 300px;height: 270px;background-color: #bf2934;border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;}
CSS画一个红苹果

文章插图
 
第二步：将苹果变得更加立体
1）右上角使用亮色内阴影，画出高光效果
2）左下角使用两层暗色内阴影，画出背光的暗色效果
3）左上角增加一个亮色高光
4）整体增加径向渐变的背景，将重心高光，四周暗色
.apple {position: relative;width: 300px;height: 270px;background: radial-gradient(#0000, rgba(0, 0, 0, .1)),radial-gradient(rgba(239, 156, 109, .2), #0000);background-color: #bf2934;border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;box-shadow: inset 30px -20px 30px 20px rgba(0, 0, 0, .15),inset 10px -10px 15px 0 rgba(0, 0, 0, .15),inset 10px 10px 5px 0 rgba(255, 255, 255, .05),inset -10px 10px 30px 10px rgba(237, 115, 84, .3);}
CSS画一个红苹果

文章插图
 
第三步：增加光源反光的高亮效果
使用before伪元素，画一个亮色的椭圆 。橘色的阴影 。然后整体模糊一下
.apple::before {position: absolute;left: 135px;top: 50px;content: '';width: 80px;height: 30px;transform: skew(-20deg) rotate(10deg);border-radius: 45%;background: rgba(255, 255, 255, .65);box-shadow: 2px 10px 30px 22px rgba(239, 156, 109, 1);filter: blur(5px);}
CSS画一个红苹果

文章插图
【CSS画一个红苹果】 
哇，一不小心，画出来了一个西红柿
好吧，这个时候，我其实可以停下来，先发一篇画西红柿的文章了 。
第四步：准备一下顶部叶柄的凹陷
这个凹陷效果使用after伪元素，画一个黑色透明色渐变的椭圆，然后使用clip-path，截取顶部扇形部分 。
.apple::after {position: absolute;left: 90px;top: 2px;width: 120px;background: radial-gradient(rgba(0, 0, 0, .3), rgba(239, 156, 109, .2));height: 30px;content: '';border-radius: 50%;filter: blur(2px);clip-path: polygon(50% 55%, 150% 0, -50% 0);filter: blur(1px);}
CSS画一个红苹果

文章插图
 
真是一个漂亮的西红柿 。。。。。。。
苹果和西红柿的区别，主要是，苹果没有那么的光滑，颜色没有这么完美 。我们需要一些杂色 。
第五步：增加杂色条纹
好吃的苹果，都有纵向的条纹杂色 。这里我们是模糊后的border来模拟 。由于需要很多杂色，这里使用js添加，稍微做点随机 。
.stripe {position: absolute;width: 300px;height: 270px;border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;border-right: solid 2px rgba(239, 156, 109, .2);transform: scaleX(.9);filter: blur(4px);}function addStripe() {var fragment = document.createDocumentFragment()var count = 15for (var i = -count; i < count; i++) {var stripe = document.createElement('div')stripe.className = 'stripe'stripe.style.opacity = Math.max(1, 0.5 + Math.random())stripe.style.transform = `scaleX(${(i / count + Math.random() * 0.2).toFixed(2)})`fragment.appendChild(stripe)}document.querySelector('.apple').appendChild(fragment)}
CSS画一个红苹果

文章插图
 
是不是突然就像苹果了
第六步：增加噪点
好吃的苹果，会有很多小小的斑点 。这里，我们使用js增加一些随机的斑点 。
.spot {position: absolute;width: 4px;height: 4px;border-radius: 50%;background: rgba(239, 156, 109, .6);filter: blur(1px);}function addSpot() {var count = 60var fragment = document.createDocumentFragment()for (var i = 0; i < count; i++) {var spot = document.createElement('div')spot.className = 'spot'spot.style.left = 5 + ~~(Math.random() * 90) + '%'spot.style.top = 5 + ~~(Math.random() * 90) + '%'spot.style.opacity = 0.2 + Math.random() * 0.4spot.style.transform = `scaleX(${Math.random() * 0.8 + 0.2}) scaleY(${Math.random() * 0.8 + 0.2}) rotate(${~~(360 * Math.random())}deg)`fragment.appendChild(spot)}document.querySelector('.apple').appendChild(fragment)}


推荐阅读


上一篇：黄芪百合茶的功效,百合红枣茶的做法和功效

下一篇：美国登月是真是假? 为什么怀疑美国登月是假的