那些年你被哪些样式需求伤害过？
共 6879字，需浏览 14分钟
·
2021-09-14 09:11
自从做了前端开发这个工作后，你是否时不时收到PM产品经理的各种恶心你的样式？没有？那你公司的PM肯定就不够"敬业"了，居然没有恶心到你。
不管怎么说，遇到那些恶心的样式需求，多少会跟UI、PM产品经理理论一番，但是也会失败的时候，没办法👐 ，只能迎难而上咯。这里我就整理下我曾经被恶心伤害过的样式需求。
三层背景
先来个开胃小菜：
可以看到这样样式是类似渐变的效果。首先想到的应该是渐变样式，没错，渐变倒是可以实现上述样式，但是真正做到样式那样的颜色过度占比，恐怕不是那么好协调。（经常被渐变的调整鞭打😭 ）
还有小伙伴说：“这还不简单，直接上图片！UI妹纸，切下这个背景图”。
哈哈哈，完美解决，全剧终！停下正在鼓掌的手，今天我们用不为人知的解决方案搞定它！
正如标题所示：三层背景，我们可以联想到伪类元素，直接加个::after和::before就完事了。
<div class="footer"></footer>
<style>
// 底色
.footer {
background:#eef0f3;
}
// 左边的颜色值
.footer::before {
background:#D0FC00;
}
// 左右的颜色值
.footer::after {
background:#366CE3;
}
</style>
怎么样，可以说非常简单吧。开胃小菜吃完了，咱们继续！
实现对话气泡效果
先上图：
这个需求也很常见吧！思路是什么呢？
先用一个元素做成一个正方形，然后再从正方形变成想要方向的三角形，最后利用定位定在你想要的位置上。比如这样：
接着借用第二个元素，利用上面的原理去制作一个白色的正方形，然后制作成一个白色的三角形，最后覆盖掉上面三角元素的阴影部分。
我先去掉上面元素后，它是长这样的:
可以看到第二个元素是一个旋转了45度的白色的正方形
最后直接上代码吧。
// html
<div class="box">
<span class="bot"></span>
<span class="cover"></span>
<p>气泡对话框效果</p>
</div>
// css
.box {
margin: 50px auto;
width: 300px;
padding: 30px 20px;
border: 5px solid #beceeb;
position: relative;
}
.box span {
width: 0;
height: 0;
font-size: 0;
overflow: hidden;
position: absolute;
}
.box span.bot {
border-width: 20px;
border-style: solid dashed dashed;
border-color: #beceeb transparent transparent;
left: 80px;
bottom: -40px;
}
.box span.cover {
border-width: 20px;
border-style: solid dashed dashed;
border-color: #ffffff transparent transparent;
left: 80px;
bottom: -33px;
}
其他方向的或者大小形状都可以根据三角形的样式去控制。
改变input 提示文字的样式
input的placeholder样式一直存在兼容性，尤其在手机端上。所以？直接上代码吧。
<input type="text" placeholder="请输入名字" style="padding:10px 15px">
input::-webkit-input-placeholder {
/* WebKit browsers */
color: #4ee03a;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #4ee03a;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #4ee03a;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #4ee03a;
}
书签
直接上设计图:
相信看到上面的"开胃菜"，这道需求应该也有些许思路吧。黄色背景的框就没什么说得了，就是加了CSS3的"背投"效果。
上面的胶带纸效果有点意思了。这个微微倾斜的胶带是CSS3写出来的效果，有RGBA显示半透明背景色，box-shadow显示淡淡的投影，transform旋转效果。元素使用::after伪类生成。
// html
<div class="page">
<p>PM大佬的脑洞大开</p>
<p>PM产品大佬给我的新需求！PM产品大佬给我的新需求！</p>
<p>PM产品大佬给我的新需求！PM产品大佬给我的新需求！</p>
<p>PM产品大佬给我的新需求！PM产品大佬给我的新需求！</p>
<p>PM产品大佬给我的新需求！PM产品大佬给我的新需求！</p>
<p>PM产品大佬给我的新需求！PM产品大佬给我的新需求！</p>
</div>
//css
.page {
width: 300px;
margin: 0 auto;
width: 600px;
padding: 1em 0 2em;
background: #f4f39e;
-moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 10px 1px rgb(0 0 0 / 20%);
box-shadow: 0 2px 10px 1px rgb(0 0 0 / 20%);
position: relative;
}
.page:after {
width: 180px;
height: 30px;
content: " ";
margin-left: -90px;
border: 1px solid rgba(200, 200, 200, 0.8);
background: rgba(254, 254, 254, 0.6);
-moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
position: absolute;
left: 50%;
top: -15px;
}
花里胡哨登录按钮
先来看演示效果
嗯，确实略带花哨。直接开代码吧。
// html
<div class="wrap">
<div class="btn-slide">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">登录</span>
<span class="title-hover">点击登录</span>
</div>
</div>
// css
.btn-slide {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #ae111c;
transition: 0.5s;
}
.btn-slide:hover {
background-color: #ae111c;
}
.btn-slide:hover span.circle {
right: 100%;
margin-right: -45px;
background-color: #fdfdfd;
color: #ae111c;
}
.btn-slide:hover span.title {
right: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover {
opacity: 1;
right: 40px;
}
.btn-slide span.circle {
display: block;
background-color: #ae111c;
color: #fff;
position: absolute;
float: right;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
right: 0;
transition: 0.5s;
border-radius: 50%;
}
.btn-slide span.title,
.btn-slide span.title-hover {
position: absolute;
right: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #ae111c;
transition: 0.5s;
}
.btn-slide span.title-hover {
right: 80px;
opacity: 0;
color: #fff;
}
以上就是PM产品大佬提给我的需求了，你还有什么补充吗？