那么这个蒙版是怎么实现的呢。。。
我们看下面这段代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>蒙版||遮罩</title>
<style>
.box1 {
width: 830px
height: 470px
border: 1px solid #000
position: relative
overflow: hidden
}
.mengban{
width: 100%
height: 200px
background-color: rgba(255,0,0,.5)
position: absolute
bottom: 0
transition: all linear 1s
}
.box1:hover .mengban{
bottom: -200px
}
</style>
</head>
<body>
<div class="box1">
<img src="img/watchingU.jpg" alt="pic"/>
<div class="mmengban>XX东西 XX钱...</div>
</div>
</body>
</html>
上面的代码就是写蒙版的方式，这个只是下面的蒙版，如果要完成上下左右的蒙版都是一样的，只是定位的方向和蒙版的宽高需要自己取调整。
分为五个阶段来讲解，
第一个阶段：每个人都需要起步，UI设计在起步阶段学习的就是如何实现视觉界面效果，这个就了解到了PS软件，PS软件是位图处理，主要功能是设计视觉效果。据说设计师80%的工作时间都在这个软件打交道，其重要性就不言而喻了。
第二个阶段：当能够简单的实现视觉界面效果后这个时候就开始了解专业内容网页界面的设计了，网页设计可称之为“WUI”“WEB”“PC端”主要学习内容有：电商网站界面设计，企业网站界面设计，游戏网站界面设计等。
第三个阶段：由于技能在成长这个时候了解的就更全面些需要了解到移动端的界面设计了，主要学习内容有：APP界面设计、图标设计、切图标注等
第四个阶段：学习以上三个阶段几乎能够独立设计视觉效果了，但是也就只是能够设计出来而已，还有对于很多关于更深层次的东西还是不够了解，这个是后就需要学习到的是UE交互设计，交互设计师讲到了如何让项目变得更简单顺畅，没有那么多琐碎的事情，只有达到这个效果才能让用户对你设计的项目爱不释手，主要学习内容有：用户体验、原型图设计、逻辑思维、交互动效等
第五个阶段：学习前面四个阶段设计项目方面问题就不大了，但是第五个也是至关重要的，学习到的是H5简单编程，由于设计师设计作品项目后也是需要上线到互联网上才能够真正实现出来，那么编程就是代码上线的必要要求，设计了解些简单的编码，也就能够避免和后台对接工作的一些没必要的麻烦，同时有些设计效果在现在的编程技术领域中是实现不出来的，但是如果你只会设计而不懂些编程的话你就会分不清楚哪些是可实现的哪些是不可实现的，如果你设计了不可实现的设计效果，也就意味着，实现不出来上线不了，你就需要大量的去修改，直到能实现上线为止！这个问题也是很多设计师头痛的问题，如果能够解决编程的问题，也就会给自己减少很多没必要的麻烦了，主要学习内容有：HTML5+CSS、JS 前端框架 前端是交互实现的地方
四、UI设计学习详细提升
1、软件
2、收集/看
3、临摹1
4、临摹2
5、创作
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）