div+css布局模拟iphone苹果手机内嵌video视频播放效果代码

代码语言:html

所属分类:布局界面

代码描述:div+css布局模拟iphone苹果手机内嵌video视频播放效果代码

代码标签: div css 布局 模拟 iphone 苹果 手机 内嵌 video 视频 播放

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

    <style>
        .iphone-x {
            position: relative;
            z-index: 1;
            height: 694px;
            width: 342px;
            z-index: 1000;
            margin: 10px auto;
        }
        
        .iphone-x *,.iphone-x *::before,.iphone-x *::after {
            box-sizing: border-box;
            display: block
        }
        
        .iphone-x .side {
            background: #1c1c1c;
            border-radius: 54px;
            box-shadow: inset 0 0 2px 2px dimgrey,inset 0 0 0 6px #e2e3e9,0 -1px 13px 9px rgba(255,255,255,.8) inset;
            height: 694px;
            padding: 15px 22px;
            width: 342px;
            z-index: 1
        }
        
        .iphone-x .screen {
            background: #000;
            background-position: center center;
            background-size: cover;
         .........完整代码请登录后点击上方下载按钮下载查看

网友评论0