iphone手机桌面滑动效果使用css3实现
2018-10-12 14:05
645 查看
iphone手机桌面效果,因为用了css3样式,只测试了谷歌浏览器。
iphone手机桌面效果 body,div,ul,li{padding: 0; margin: 0; } li{list-style: none; } body {background: #333; } #iphone {width: 900px; height: 600px; background: url(//files.jb51.net/file_images/article/201212/mobilhdmenu/bg.jpg); position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -450px; } #wrap {width: 240px; height: 360px; position: absolute; top: 121px; left: 326px; overflow:hidden; } #iphone ul#zm {width: 1200px; height: 360px; cursor: pointer; position: absolute; top: 0px; left: 0px; background:url(//files.jb51.net/file_images/article/201212/mobilhdmenu/background.jpg) center center;} #iphone ul#zm li {float: left; width:240px; height:350px;padding-top:10px;overflow:hidden;} #iphone ul#zm li div{float: left; width:60px; height:80px; background-repeat: no-repeat;margin: 10px;position: relative;} #iphone ul#zm li div.icon::after{bottom: -8px;color:#fff;content: attr(title);font-size: 12px;height: 20px;left: -8px;overflow: hidden;position: absolute;text-align: center;white-space: nowrap;width: 74px;text-shadow: 0 0 3px #222;} #iphone ul#btn{position:absolute;left:60px;bottom:5px;width:140px;height:30px;} #iphone ul#btn li{float:left;width:6px;height:6px;border-radius:50%;background:#fff;margin:10px;} #iphone ul#btn li.current{background:#00A2D6;}
您可能感兴趣的文章:
相关文章推荐
- iphone手机桌面滑动效果使用css3实现
- 用户从手机的浏览器访问www.baidu.com,看到的可能跟桌面PC电脑,是不太一样的网页效果,会更适合移动设备使用。请简要分析一下,实现这种网页区分显示的原因及技术原理。
- 使用luncher实现类似iphone平滑滑动效果
- 【请教问题】kanzi如何实现类似安卓手机桌面滑动切换界面效果?
- 使用css3和js在手机上实现简单的跑马灯效果
- css3实现渐变的iPhone滑动解锁效果
- CAGradientLayer(颜色渐变) -- 实现iphone手机屏幕“滑动来解锁”动画效果
- swipe.js工具包实现手机web滑动轮播效果存在jQuery对象不能使用问题并解决(个人项目经验)
- 使用CSS3 and jQuery 实现霓虹灯闪烁效果
- 使用Jquery,CSS3实现像GooglePlus那样的圆圈效果
- iphone--使用NSTimer与iphone的简单动画,实现飘雪效果
- 使用axure实现的滑动效果
- iPhone 使用UIScrollView实现Spring滚屏效果
- Qt使用QGraphicsView实现滑动窗体效果
- c#,使用WPF实现iPhone的短信框效果
- 使用CSS3可以实现的五种很酷很炫的效果
- 使用 CSS3 可以实现的五种很酷很炫的效果
- 在App中实现iPhone主屏那样手指滑动翻页效果的代
- 使用 CSS3 可以实现的五种很酷很炫的效果
- 2011年最新使用CSS3实现各种独特悬浮效果的教程