模拟手机拖动效果
代码语言:html
所属分类:拖放
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Flicking examples iphone</title> <style> body { background: #26A478; } .iphone { position: absolute; width: 200px; height: 400px; border-radius: 20px; background: #fff; box-shadow: rgba(100, 100, 100, 0.4) 5px 5px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .iphone .container { position: absolute; width: calc(100% - 10px); height: calc(100% - 100px); background: transparent; border: 2px solid #ddd; border-radius: 5px; left: 0; right: 0; margin: auto; bottom: 52px; overflow: hidden; } .iphone .head { position: absolute; width: 36px; height: 8px; top: 22px; left: 0; right: 0; border-radius: 4px; margin: auto; background: #ddd; } .iphone .home { position: absolute; width: 36px; height: 36px; border: 2px solid #ccc; border-radius: 50%; bottom: 6px; left: 0; right: 0; margin: auto; } .iphone .panels { position: relative; top: 0; width: 100%; height: 77%; } .iphone .panel { position: relative; width: 100%; height: 100%; padding-top: 2px; box-sizing: border-box; } .bottom { position: relative; } .panel, .dock, .pagination { text-align: center; font-size: 0; } .pagination { display: block; width: 100%; padding: 6px 0px 0px 0px; } .pagination .dot { display: inline-block; width: 7px; height: 7px; border-radius: 5px; background: rgba(160, 160, 160, 0.4); margin: 0px 4.5px; } .pagination .dot.selected { background: rgba(160, 160, 160, 0.9); } .dock { padding-top: 3px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0