高仿Mac桌面(HTML5+CSS3+Bootstrap)

Bootstrap 自 Twitter,是目前最受欢迎的前端框架。Bootstrap是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。Bootstrap是基于HTML5CSS3开发的,它在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。

Github源码地址

效果:


知识点总结:

使背景图片能够随着窗口的大小变化而变化:background-size:cover

透明效果:opacity

底部的圆角效果(左边):border-top-left-radius

阴影效果:box-shadow:左偏移量 右偏移量 阴影半径 阴影颜色

底部鼠标放上后放大效果:

.                              /*过渡时间*/-----在内容上设置

.                               -webkit-transition:  0.25s linear(时间 形态);

.                              /*参照*/----------在选择器上进行设置

.                               -webkit-transform-origin:bottom center(基于底部中心进行缩放);

.                               /*形变 */

.                               -webkit-transform:scale(倍数);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 13,734评论 3 184
  • 关于css3变形 CSS3变形是一些效果的集合,比如平移、旋转、缩放和倾斜效果,每个效果都被称作为变形函数(Tra...
    hopevow阅读 11,502评论 2 13
  • 因为有机会参与一个项目的早期设计,因此搭建的时候不可避免的遇到了如何满足响应式的问题。翻阅了《响应式Web设计:H...
    tangyefei阅读 11,560评论 2 90
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,848评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,848评论 0 2