小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
有趣的前端css特效-收音机
既承载着一代人的回忆,也承载着中华民族深厚的文化底蕴,它,就是收音机。随着电视机手机电脑的普及，听着广播和收音机的我们已经慢慢长大，而它也渐渐淡出人们的视线，逐步退出了市场。
今天的css特效就来绘制这个 藏在一代人记忆里的收音机。
1.定义在主容器
按照惯例，设置主容器到合适的宽高后，将容器居中
div{
position: absolute;
left: 50%;
top: 50%;
width: 280px;
height: 160px;
margin-left: -130px;
margin-top: -80px;
}
2.设置收音机主体
设置收音机主色为活力橙
background-color: #ff7f50;
设置机身部分颜色
background-image:
//机身上部分颜色
linear-gradient(to bottom,#ff7f50 14px,transparent 14px),
//机身左侧颜色
linear-gradient(to right,#ff7f50 96px,transparent 96px),
//机身右侧颜色
linear-gradient(to left,#ff7f50 16px,transparent 16px),
//机身下部分颜色
linear-gradient(to top,#ff7f50 14px,transparent 14px),
//机身右侧喇叭外壳
radial-gradient(circle,rgba(0,0,0,0.4) 30%,transparent 30.5%);
background-size: 100% 100%,100% 100%,100% 100%,100% 100%,7px 7px;
得到效果图如下
再给机身加上圆角及阴影
border-radius: 2px 10px 10px 0;
box-shadow: 0 -3px 0 #ff5213, inset -4px 4px 2px rgb(255 255 255 / 30%), -5px 11px 4px -5px rgb(98 46 38 / 90%), -5px 17px 6px -5px rgb(98 46 38 / 40%);
效果如图：
是不是瞬间就有那意思了。
3.补齐主体部分左侧空缺
通常收音机还会有一些银色滚动的按钮用来调节音量或者频道，接下来就使用伪类绘制这部分的内容吧。代码如下：
div:before {
display: block;
content: '';
position: absolute;
width: 300px;
height: 175px;
margin-top: -3px;
background-repeat: no-repeat;
background-image:
//左侧上部分高光色
linear-gradient(to bottom,rgba(0,0,0,0.2) 0,rgba(255,255,255,0.2) 20%,rgba(255,255,255,0.3) 25%,rgba(0,0,0,0) 50%),
//左侧上部分网格
repeating-linear-gradient(to bottom,rgba(255,255,255,0.15),rgba(255,255,255,0.15) 1px,rgba(255,255,255,0) 1px,rgba(255,255,255,0) 7px),
//左侧下部分网格
repeating-linear-gradient(to bottom,rgba(0,0,0,0.35),rgba(0,0,0,0.35) 3px,rgba(0,0,0,0) 3px,rgba(0,0,0,0) 7px),
//左部分滚轮-底色
linear-gradient(to bottom,rgba(0,0,0,0.4),rgba(0,0,0,0) 20%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.7) 100%),
//左部分滚轮-中部
repeating-linear-gradient(to bottom,#eee,#eee 1px,rgba(255,255,255,0) 1px,rgba(255,255,255,0) 2px),
//左部分滚轮-中部补齐
repeating-linear-gradient(to bottom,#bbb,#bbb 1px,#777 1px,#777 2px),
//左部分滚轮-阴影
linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
//右部分滚轮-底色
linear-gradient(to bottom,rgba(0,0,0,0.4),rgba(0,0,0,0) 20%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.7) 100%),
//右部分滚轮-中上部分
repeating-linear-gradient(to bottom,#eee,#eee 1px,rgba(255,255,255,0) 1px,rgba(255,255,255,0) 2px),
//右部分滚轮-中下部分
repeating-linear-gradient(to bottom,#bbb,#bbb 1px,#777 1px,#777 2px),
//右部分滚轮-阴影
linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
//左侧部分整体底色
linear-gradient(#444,#444),
//左侧部分-右阴影
linear-gradient(to right,rgba(0,0,0,0.3),rgba(0,0,0,0)),
//右侧喇叭下小支架
linear-gradient(#e93f00,#e93f00),
//收音机右侧锁扣拉环1
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
//收音机右侧锁扣拉环2
linear-gradient(to bottom,#666 5%,#eee 20%,#eee 30%,#aaa 40%,#aaa 50%,#ccc 60%,#555 90%),
//收音机右侧锁扣拉环3
radial-gradient(ellipse at left center,transparent 13%,#444 14%,#444 35%,transparent 36%),
//收音机右侧高光角落
radial-gradient(ellipse,rgba(255,255,255,0.5) 0,rgba(255,255,255,0) 60%),
//左侧部分下底阴影
linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0) 40%);
background-size: 80px 20px,50px 27px,50px 95px,25px 21px,20px 7px,25px 21px,29px 25px,11px 21px,11px 7px,11px 21px,15px 25px,80px 165px,7px 163px,8px 4px,1px 15px,4px 15px,20px 20px,10px 7px,80px 10px;
background-position: 0 0,20px 59px,20px 60px,22px 22px,22px 26px,22px 22px,20px 20px,57px 22px,57px 26px,57px 22px,55px 20px,0 0,80px 0,right 50px bottom 8px,right 17px top 30px,95% 30px,100% 20px,right 23px top 4px,0 100%;
得到的效果图如下
其实这样就已经很像了。但是我们还可以补充一些细节
4.细节部分补充
div:after {
display: block;
content: '';
position: absolute;
width: 20px;
height: 160px;
margin-left: -20px;
z-index: 1;
background-color: #ccc;
background-repeat: no-repeat;
background-image:
radial-gradient(ellipse,rgba(255,255,255,0.8) 40%,rgba(255,255,255,0) 50%),
radial-gradient(ellipse,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0) 50%),
linear-gradient(to right,rgba(0,0,0,0.7) 4px,rgba(0,0,0,0) 4px),
linear-gradient(to bottom,rgba(0,0,0,0.15) 1%,rgba(0,0,0,0.05) 2%,rgba(0,0,0,0.25) 5%,rgba(0,0,0,0) 8%),
linear-gradient(to left,rgba(0,0,0,0.3) 4%,rgba(0,0,0,0) 20%),
linear-gradient(to bottom,rgba(204,204,204,0) 45%,#ccc 55%,rgba(204,204,204,0) 65%),
linear-gradient(to right,rgba(0,0,0,0) 5px,rgba(0,0,0,0.2) 8px,rgba(0,0,0,0) 11px),
linear-gradient(to right,rgba(255,255,255,0.5) 5px,rgba(0,0,0,0.2) 9px,rgba(0,0,0,0) 13px),
linear-gradient(130deg,rgba(0,0,0,0) 86%,rgba(0,0,0,0.3) 87%,rgba(0,0,0,0) 88%),
linear-gradient(-30deg,rgba(0,0,0,0.4) 15%,rgba(0,0,0,0) 60%);
background-size: 3px 6px,3px 5px,100% 100%,100% 100%,100% 10%,100% 100%,100% 60%,100% 40%,60% 100%,100% 5%;
background-position: 1px 4px,6px 7px,0 0,0 0,100% 60%,0 0,0 0,0 100%,55% 0,0 100%;
border-radius: 10px 0 0 10px;
box-shadow: 5px 7px 2px -5px rgb(0 0 0 / 30%), 5px 8px 1px -5px rgb(255 255 255 / 50%), 3px 11px 3px -4px rgb(0 0 0 / 30%);
}
当当~~~ 得到头图
一款时代收音机就完成啦！
