纯CSS3制作逼真的iphone 6手机模型

最新推荐文章于 2023-06-17 22:34:11 发布
最新推荐文章于 2023-06-17 22:34:11 发布
阅读量6.4k 收藏 16
点赞数 8
分类专栏： Web前端 文章标签： iphone css3 手机 模型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15096707/article/details/53579453
版权

注意这里我只是转载过来的（来自 jQuery之家 的分享），然后加以整理。嘻嘻~

纯CSS3制作逼真的iphone 6手机模型

iphone.html

		<div class="iphone">
		    <div class="iphone-top">
		      <span class="camera"></span>
		      <span class="sensor"></span>
		      <span class="speaker"></span>
		    </div>
		    <div class="top-bar"></div>
		    <div class="iphone-screen">
		      <img src="img/Awesome-iPhone-Wallpapers.jpg" alt="" />
		    </div>
		    <div class="buttons">
		      <span class="on-off"></span>
		      <span class="sleep"></span>
		      <span class="up"></span>
		      <span class="down"></span>
		    </div>
		    <div class="bottom-bar"></div>
		    <div class="iphone-bottom">
		      <span></span>
		    </div>
		  </div>
iphone.css 

/* 样式1 */
.iphone {
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #999, 0 0 30px 0px rgba(0, 0, 0, 0.7);
    border: 5px solid #d9dbdc;
    background: #f8f8f8;
    padding: 15px;
    border-radius: 50px;
    height: 877px;
    width: 423px;
    position: relative;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}
.iphone-top {
    padding: 5px 110px 40px;
    position: relative;
}
.iphone-top .speaker {
    display: block;
    width: 70px;
    height: 6px;
    margin: 0 auto;
    border-radius: 6px;
    background: #292728;
}
.iphone-top .camera {
    display: block;
    margin: 0 auto;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin-bottom: 13px;
    background: #333;
}
.iphone-top .sensor {
    display: block;
    width: 15px;
    height: 15px;
    float: left;
    background: #333;
    margin-top: -5px;
    border-radius: 50%;
}
.iphone .top-bar, .iphone .bottom-bar {
    display: block;
    width: 423px;
    height: 15px;
    border-left: 5px solid #BBB;
    border-right: 5px solid #BBB;
    position: absolute;
    left: -5px;
}
.iphone .top-bar {
    top: 65px;
}
.iphone .bottom-bar {
    bottom: 65px;
}
.iphone-screen {
    background: #eee;
    border: 1px solid #fff;
    height: 677px;
    width: 375px;
    margin: 0 auto;
    border: 2px solid rgba(0, 0, 0, 0.9);
    border-radius: 3px;
    overflow: hidden;
}
.iphone-screen img {
    width: 100%;
}
.iphone .buttons .on-off, .iphone .buttons .up, .iphone .buttons .down, .iphone .buttons .sleep {
    display: block;
    background: #CCC;
    position: absolute;
    border-radius: 2px 0px 0px 2px;
}
.iphone .buttons .on-off {
    height: 40px;
    width: 3px;
    top: 100px;
    left: -8px;
}
.iphone .buttons .up, .iphone .buttons .down, .iphone .buttons .sleep {
    height: 60px;
    width: 5px;
    left: -10px;
}
.iphone .buttons .up {
    top: 170px;
}
.iphone .buttons .down {
    top: 250px;
}
.iphone .buttons .sleep {
    left: auto;
    right: -10px;
    top: 170px;
    border-radius: 0px 2px 2px 0px;
}
.iphone-bottom {
    padding: 10px 0 0;
}
.iphone-bottom span {
    display: block;
    margin: 0 auto;
    width: 68px;
    height: 68px;
    background: #ccc;
    border-radius: 50%;
    background: -webkit-linear-gradient(315deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
    background: linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
    position: relative;
}
.iphone-bottom span:after {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    left: 4px;
    top: 4px;
}

结果它看起来大概像这样：



当然还有像下面这种3D效果的：

纯css3绘制超逼真iPhone6动画效果

iphone.html

<div id="wrapper">
            <div id="iphone">
                <div id="side"></div>
                <div id="lines">
                    <div>
                        <div>
                            <div></div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <div></div>
                        </div>
                    </div>
                </div>
                <div id="toggler">
                    <div></div>
                </div>
                <div id="aux"></div>
                <div id="lightning"></div>
                <div id="bottom-speaker">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div id="skrews">
                    <div></div>
                    <div></div>
                </div>
                <div id="volume">
                    <div></div>
                    <div></div>
                </div>
                <div id="front">
                    <div id="front-cover"></div>
                    <div id="camera">
                        <div></div>
                    </div>
                    <div id="speaker"></div>
                    <div id="screen">
                        <div id="reminder">
                            <div></div>
                            <div>Made by @_fbrz</div>
                            <div>now</div>
                        </div>
                        <div id="circle"></div>
                        <div id="time">12:42</div>
                        <div id="date">Saturday, January 4</div>
                        <div id="bottom"></div>
                        <div id="top"></div>
                        <div id="slide">
                            <div></div>
                            slide to unlock
                        </div>
                        <div id="signal">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                        <div id="battery">
                            <div>86%</div>
                            <div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                    <div id="home">
                        <div></div>
                    </div>
                </div>
                <div id="shadow"></div>
            </div>
    </div>
iphone.css 

/* 样式2 */
#wrapper {
    height: 520px;
    width: 800px;
    /*margin-left: -400px;
    margin-top: -260px;
    position: absolute;*/
    -webkit-perspective: 6000px;
    perspective: 6000px;
    top: 50%;
    left: 50%;
}
#iphone {
    height: 760px;
    width: 372px;
    border-radius: 50px;
    position: absolute;
    background: none;
    box-shadow: none;
    left: 206px;
    top: -140px;
    -webkit-transform: rotateX(54deg) rotateZ(-46deg);
    transform: rotateX(54deg) rotateZ(-46deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#side {
    background: #CDD0D5;
    width: 393px;
    height: 780px;
    border-top-left-radius: 77px;
    border-bottom-left-radius: 49px;
    border-bottom-right-radius: 86px;
    border-top-right-radius: 70px;
    position: absolute;
    top: 5px;
    left: -26px;
    box-shadow: inset #3D3E42 0 0 15px 9px;
}
#front {
    width: 362px;
    height: 750px;
    border-radius: 49px;
    position: absolute;
    background-image: -webkit-linear-gradient(-27deg,#444,#000 10%, #000 42%, #333, #000 57%, #000 91%, #444);
    left: 5px;
    top: 5px;
    box-shadow: inset #000 0 0 0 4px, #555 0px 0 3px 0px, #222 -3px 2px, #000 -5px 5px, #E0E0E0 -7px 6px 1px, #6D6D6D -7px 6px 9px;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
}
#front-cover {
    width: 344px;
    height: 734px;
    background: #000;
    border-radius: 39px;
    position: absolute;
    top: 8px;
    left: 9px;
}

#home {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: -webkit-linear-gradient(58deg, #666, #000, #666);
    background: linear-gradient(32deg,#666,#000,#666);
    top: 684px;
    left: 160px;
}
#home div {
    background: #000;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    position: absolute;
    left: 3px;
    top: 3px;
}

#camera {
    width: 11px;
    height: 11px;
    background: #000;
    position: absolute;
    top: 35px;
    left: 124px;
    border-radius: 50%;
    box-shadow: inset #666 -5px 2px 9px -2px;
}
#camera div {
    width: 6px;
    height: 6px;
    background: -webkit-radial-gradient(#E1E4F5, #0D2B69 33%);
    background: radial-gradient(#E1E4F5,#0D2B69 33%);
    background-position: -1px -1px;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 50%;
}

#speaker {
    width: 50px;
    height: 4px;
    border-radius: 2px;
    background: #555;
    position: absolute;
    top: 39px;
    left: 156px;
    box-shadow: inset #222 0 0px 4px;
}

#volume {
    height: 128px;
    width: 11px;
    border-radius: 10px;
    position: absolute;
    background: #F9F9FA;
    top: 171px;
    left: -20px;
    -webkit-transform: rotateY(95deg);
    transform: rotateY(95deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    box-shadow: inset #292A2F 4px 0 8px 1px, #D5D5D5 -1px 0px 2px;
}
#volume div {
    width: 8px;
    height: 55px;
    background: #BBBCC0;
    border-radius: 10px;
    position: absolute;
    box-shadow: #eee -1px 1px, #777 -1px 3px,  #505057 -3px 3px, inset #909197 -3px 0 3px;
}

#volume div:first-child {
    top: 2px;
    left: 4px;
}
#volume div:last-child {
    top: 69px;
    left: 4px;
}

#toggler {
    height: 34px;
    width: 8px;
    border-radius: 10px;
    position: absolute;
    background: #2B2C31;
    top: 105px;
    left: -20px;
    -webkit-transform: rotateY(95deg);
    transform: rotateY(95deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    box-shadow: inset #292A2F 4px 0 8px 1px, #D5D5D5 -1px 0px 2px;
}
#toggler div {
    width: 4px;
    height: 31px;
    background: #BBBCC0;
    border-radius: 10px;
    position: absolute;
    box-shadow: #eee -1px 1px, #777 -2px 3px, #505057 -3px 3px, inset #909197 -3px 0 3px;
    top: -1px;
    left: 3px;
}

#aux {
    width: 19px;
    height: 19px;
    background: #3B3B3B;
    border-radius: 50%;
    -webkit-transform: rotateX(90deg) translateZ(1px);
    transform: rotateX(90deg) translateZ(1px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    top: 766px;
    left: 45px;
    box-shadow: inset #000 6px -3px 10px 1px, #C7C7C7 1px 0px 1px;
}

#lightning {
    width: 48px;
    height: 12px;
    border-radius: 10px;
    background: #3F3F3F;
    -webkit-transform: rotateX(90deg) translate3d(0px,1px,0px);
    transform: rotateX(90deg) translate3d(0px,1px,0px);
    top: 771px;
    position: absolute;
    left: 139px;
    box-shadow: inset #8E8F94 -1px 1px 0px 2px, #515258 0px 0px 0 1px, inset #000 0 -3px 10px, #DADADA 1px 0 0 1px;
}

#bottom-speaker {
    position: absolute;
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    top: 781px;
    left: 70px;
}
#bottom-speaker div {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6C6D72;
    position: absolute;
    box-shadow: inset #000 1px -1px 4px 1px, #DADADA 1px 0px;
}
#bottom-speaker div:nth-child(2) { left: 150px; }
#bottom-speaker div:nth-child(3) { left: 162px; }
#bottom-speaker div:nth-child(4) { left: 174px; }
#bottom-speaker div:nth-child(5) { left: 186px; }
#bottom-speaker div:nth-child(6) { left: 198px; }
#bottom-speaker div:nth-child(7) { left: 210px; }

#skrews {
    position: absolute;
    top: 780px;
    left: 120px;
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
}
#skrews div {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgb(95, 92, 92);
    border-radius: 50%;
    top: 0;
    z-index: 4;
    box-shadow: inset #999AA0  0 0 0px 2px, #444 1px 0px;
}

#skrews div:last-child {
    left: 70px;
}

#lines {
    position: absolute;
    top: 82px;
    left: -32px;
}
#lines > div:last-child {
    top: 634px;
}

#lines div {
    width: 7px;
    height: 11px;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

#lines > div {
    background: -webkit-linear-gradient(right, #393A3C, #5A595E);
    background: linear-gradient(right,#393A3C,#5A595E);
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
}
#lines > div > div {
    background: -webkit-linear-gradient(right, #5A595E, #87868A);
    background: linear-gradient(right,#5A595E,#87868A);
    -webkit-transform: rotateY(17deg);
    transform: rotateY(17deg);
    left: -6px;
}
#lines > div > div > div {
    background: -webkit-linear-gradient(right, #87868A, #A8A6AD);
    background: linear-gradient(right,#87868A,#A8A6AD);
    -webkit-transform: rotateY(17deg);
    transform: rotateY(17deg);
    left: -6px;
}

#shadow {
    width: 350px;
    height: 755px;
    background: black;
    position: absolute;
    top: 5px;
    left: 0;
    -webkit-transform: translateZ(-17px);
    transform: translateZ(-17px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    box-shadow: #000 0 0 10px 15px;
    opacity: 0.4;
    border-top-left-radius: 76px;
    border-top-right-radius: 200px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 56px;
}

#screen {
    background: -webkit-linear-gradient(#A1E5E5, #1987AA);
    background: linear-gradient(#A1E5E5,#1987AA);
    width: 336px;
    height: 589px;
    position: absolute;
    top: 80px;
    left: 13px;
    font-weight: 300;
    color: #fff;
    background-size: 200% 100%;
    overflow: hidden;
}

#time {
    font-size: 86px;
    left: 57px;
    top: 37px;
    position: absolute;
}
#date {
    font-size: 20px;
    left: 85px;
    top: 130px;
    position: absolute;
}

#bottom {
    width: 37px;
    height: 7px;
    border-radius: 5px;
    background: #2AB1DB;
    position: absolute;
    top: 573px;
    left: 149px;
}
#top {
    width: 37px;
    height: 7px;
    border-radius: 5px;
    background: #D7FFFF;
    position: absolute;
    top: 10px;
    left: 149px;
}
#slide {
    position: absolute;
    top: 489px;
    left: 88px;
    font-size: 28px;
    color: #2AB1DB;
    background: -webkit-linear-gradient(left, #2EC4F3 30%, #fff, #2EC4F3 70%);
    background: linear-gradient(left,#2EC4F3 30%,#fff,#2EC4F3 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 350px;
    -webkit-animation: slide 5s linear infinite;
    animation: slide 5s linear infinite;
}

@-webkit-keyframes slide {
    0% { background-position: 100px 0; }
    40% { background-position: 440px 0; }
    100% { background-position: 440px 0; }
}

@keyframes slide {
    0% { background-position: 100px 0; }
    40% { background-position: 440px 0; }
    100% { background-position: 440px 0; }
}

#slide div {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    border-left: 2px solid #2AB1DB;
    border-top: 2px solid #2AB1DB;
    width: 15px;
    height: 15px;
    position: absolute;
    left: -29px;
    top: 10px;
}

#signal {
    position: absolute;
    top: 9px;
    left: 7px;
}
#signal div {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #fff;
    position: absolute;
}
#signal div:nth-child(2) {
    left: 9px;
}
#signal div:nth-child(3) {
    left: 18px;
}
#signal div:nth-child(4) {
    left: 27px;
}
#signal div:nth-child(5) {
    left: 36px;
    background: none;
}

#battery {
    position: absolute;
    top: 3px;
    left: 270px;
    font-size: 13px;
}
#battery > div:last-child {
    width: 27px;
    height: 9px;
    border: 1px solid #fff;
    position: absolute;
    top: 4px;
    left: 27px;
    border-radius: 2px;
}
#battery div div:first-child {
    width: 21px;
    height: 7px;
    background: #fff;
    position: absolute;
    top: 1px;
    left: 1px;
}
#battery div div:last-child {
    width: 1px;
    height: 6px;
    background: #FFF;
    position: absolute;
    left: 29px;
    top: 2px;
    border-radius: 0 1px 1px 0;
}

#fabrizio {
    border-top: 100px solid black;
    border-right: 63px solid transparent;
    width: 0;
    -webkit-transform: scale(.33);
    -ms-transform: scale(.33);
    transform: scale(.33);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    margin: 20px;
    opacity:.6;
    position: absolute;
    bottom: -130px;
}
#fabrizio:before {
    background: black;
    width: 20px;
    height: 30px;
    content: '';
    display: block;
    -webkit-transform: skewX(-32deg);
    -ms-transform: skewX(-32deg);
    transform: skewX(-32deg);
    position: relative;
    top: -65px;
    left: 29px;
}
#fabrizio:after {
    background: black;
    width: 40px;
    height: 36px;
    content: '';
    display: block;
    -webkit-transform: skewX(-32deg);
    -ms-transform: skewX(-32deg);
    transform: skewX(-32deg);
    position: relative;
    top: -130px;
    left: 49px;
}

#circle {
    width: 50px;
    height: 50px;
    background: none;
    border-radius: 50%;
    box-shadow: rgba(255,255,255,0.1) 160px 335px,rgba(255,255,255,0.1) 120px 275px 0 12px,rgba(255,255,255,0.1) 60px 355px 0 23px,rgba(255,255,255,0.1) 230px 445px 0 -8px,rgba(255,255,255,0.1) 60px 125px,rgba(255,255,255,0.1) 260px 145px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 50px 155px,rgba(255,255,255,0.1) 150px 273px 0 -2px,rgba(255,255,255,0.1) 50px 555px 0 23px,rgba(255,255,255,0.1) 180px 5px 0 -8px;
    -webkit-animation: circle 30s linear infinite alternate;
    animation: circle 30s linear infinite alternate;
}

@-webkit-keyframes circle {
    0%{
        box-shadow: rgba(255,255,255,0.1) 160px 335px,rgba(255,255,255,0.1) 120px 275px 0 12px,rgba(255,255,255,0.1) 60px 355px 0 23px,rgba(255,255,255,0.1) 230px 445px 0 -8px,rgba(255,255,255,0.1) 60px 125px,rgba(255,255,255,0.1) 260px 145px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 350px 555px,rgba(255,255,255,0.1) 350px 273px 0 -2px,rgba(255,255,255,0.1) 150px 355px 0 23px,rgba(255,255,255,0.1) 180px 205px 0 -8px,rgba(255,255,255,0.1) 0px 0px 0 -8px,rgba(255,255,255,0.1) 100px 555px 0 10px;
    }
    100%{
        box-shadow: rgba(255,255,255,0.1) 70px 10px,rgba(255,255,255,0.1) 300px 205px 0 12px,rgba(255,255,255,0.1) 0px 155px 0 23px,rgba(255,255,255,0.1) 330px 45px 0 -8px,rgba(255,255,255,0.1) 460px 325px,rgba(255,255,255,0.1) 0px 445px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 50px 155px,rgba(255,255,255,0.1) 150px 273px 0 -2px,rgba(255,255,255,0.1) 0px 555px 0 23px,rgba(255,255,255,0.1) 180px 5px 0 -8px,rgba(255,255,255,0.1) 300px 555px 0 -8px,rgba(255,255,255,0.1) 350px 355px 0 10px;
    }
}

@keyframes circle {
    0%{
        box-shadow: rgba(255,255,255,0.1) 160px 335px,rgba(255,255,255,0.1) 120px 275px 0 12px,rgba(255,255,255,0.1) 60px 355px 0 23px,rgba(255,255,255,0.1) 230px 445px 0 -8px,rgba(255,255,255,0.1) 60px 125px,rgba(255,255,255,0.1) 260px 145px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 350px 555px,rgba(255,255,255,0.1) 350px 273px 0 -2px,rgba(255,255,255,0.1) 150px 355px 0 23px,rgba(255,255,255,0.1) 180px 205px 0 -8px,rgba(255,255,255,0.1) 0px 0px 0 -8px,rgba(255,255,255,0.1) 100px 555px 0 10px;
    }
    100%{
        box-shadow: rgba(255,255,255,0.1) 70px 10px,rgba(255,255,255,0.1) 300px 205px 0 12px,rgba(255,255,255,0.1) 0px 155px 0 23px,rgba(255,255,255,0.1) 330px 45px 0 -8px,rgba(255,255,255,0.1) 460px 325px,rgba(255,255,255,0.1) 0px 445px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 50px 155px,rgba(255,255,255,0.1) 150px 273px 0 -2px,rgba(255,255,255,0.1) 0px 555px 0 23px,rgba(255,255,255,0.1) 180px 5px 0 -8px,rgba(255,255,255,0.1) 300px 555px 0 -8px,rgba(255,255,255,0.1) 350px 355px 0 10px;
    }
}

#reminder {
    position: absolute;
    top: 230px;
    left: 40px;
    width: 296px;
    height: 50px;
    border-top: 1px solid #86E2F0;
    border-bottom: 1px solid #86E2F0;
    line-height: 50px;
    font-weight: 400;
    opacity: 0;
    -webkit-animation: reminder .1s linear forwards 15s;
    animation: reminder .1s linear forwards 15s;
}
#reminder div:first-child {
    background: #fff;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    position: absolute;
    top: 18px;
}
#reminder div:nth-child(2) {
    position: absolute;
    left: 30px;
}
#reminder div:last-child{
    position: absolute;
    left: 251px;
    font-size: 11px;
    color: #86E2F0;
}

@-webkit-keyframes reminder {
    100% {
        opacity: 1;
    }
}

@keyframes reminder {
    100% {
        opacity: 1;
    }
}


#awwwards {
    position: absolute;
    bottom: 30px;
    left: 70px;
}
#awwwards a {
    color: #444;
    text-decoration: none;
    border-bottom: 1px solid #888;
}

#coolors {
    position: absolute;
    bottom: 30px;
    right: 30px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #888;
    -webkit-animation: coolors 1s infinite;
    animation: coolors 1s infinite;
    opacity: 1;
}
@-webkit-keyframes coolors {
    50% { right: 40px; }
}
@keyframes coolors {
    50% { right: 40px; }
}

那么它看起来像这样：

当然，可能我更喜欢在“手机”的屏幕上放置图片，那就要对上面的html、css进行少许的修改了（顺便删除一些不需要的css），我后面再整理咯。先到这。



葡萄干是个程序员
关注
专栏目录
苹果html5插件,纯CSS打造各种超逼真的苹果（Apple）设备模型
weixin_29258297的博客
06-22 690
CSSDevices是一款使用纯CSS制作的各种超逼真的苹果(Apple)设备模型。这些CSS苹果设备模型中可以嵌入图片、文字、视频等HTML元素，并且非常容易的就可以制作出轮播图的效果。使用方法使用该CSS苹果设备模型特效需要在页面中引入devices.min.css文件，可以选择引入jQuery和devices.js文件。iphone设备模型iphone设备模型的基本HTML结构如下：可选的i...
Biaofun用CSS-画一个iPhone12
标梵互动
11-19 894
iPhone12发布一个月了，作为还没有拥有过一个苹果设备的穷B程序员。这次，依旧还是买不起。 于是，使用css给自己画了一个。 先看效果： 需求分析： 1、分别画出6个面，然后组成一个立方体。 2、圆角部分使用多个div依次旋转一个角度，组成圆弧 一、画iPhone背面 先画一个圆角长方形；左下到右上渐变；增加border和内阴影使得看起来更立体。 .back { position: absolute; width: 307px; height: 633px; background: l
CSS绘画iPhone 14 带动态岛
m0_49569569的博客
03-14 431
CSS绘画苹果14灵动岛页面可以换颜色
纯CSS3实现苹果iphone6手机模型特效特效代码
03-20
纯CSS3实现苹果iphone6手机模型特效是一款通过简单HTML代码配合CSS3渐变等效果，制作出逼真的iphone6手机模型效果。
CSS写一个手机
杨青青个人博客（青青本人）
03-04 1728
手机外形上来说就是长方形，然后加上圆角边框，如果是简单的平面图形，几分钟就可以用html标签和css写一个手机模型。但如果有高光，菱角等让手机展示的更逼真，可以用到css背景渐变属性。
css模拟手机iphone14Pro
最新发布
1234Wu--Blog
06-17 1299
【代码】css模拟手机iphone14Pro。
纯CSS3制作iphone 6手机模型特效特效代码
03-20
本特效源码是一款使用纯CSS3制作的逼真的iphone 6手机模型效果的代码。该特效中通过简单HTML代码配合CSS3渐变等效果，制作出逼真的iphone6手机模型效果。本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、...
纯CSS3制作iphone 6手机模型特效源码.zip
11-09
在“纯CSS3制作iphone 6手机模型特效源码.zip”这个压缩包里，你将找到实现这一效果的完整代码。 首先，让我们深入了解CSS3中的关键特性： 1. **选择器**：CSS3引入了更强大的选择器，如属性选择器、伪类和伪元素...
利用纯CSS绘制iPhone X
wilL-my的博客
09-03 1759
<div class="device iphone-x"> <!-- 外部轮廓 --> <div class="frame"> <div class="content"> <div class="time">10:19</di...
纯CSS画iphone
qq_42582773的博客
02-05 361
纯CSS画iphone
纯CSS打造各种超逼真的苹果（Apple）设备模型
12-13
CSSDevices是一款使用纯CSS制作的各种超逼真的苹果（Apple）设备模型。这些CSS苹果设备模型中可以嵌入图片、文字、视频等HTML元素，并且非常容易的就可以制作出轮播图的效果。
纯CSS3实现苹果iphone6手机模型特效.zip
07-03
纯CSS3实现苹果iphone6手机模型特效是一款通过简单HTML代码配合CSS3渐变等效果，制作出逼真的iphone6手机模型效果。
html5 css3绘制苹果Apple产品模型样式代码
11-24
html5 css3绘制苹果Apple产品模型样式代码
纯css3绘制白色iPhone6苹果手机样式代码
11-24
纯css3绘制白色iPhone6苹果手机样式代码
WEB前端纯 CSS 画 iphone，网友：我卖一个肾来买你这台iPhone
weixin_43955769的博客
05-21 766
画iPhone小意思的啦！ 纯CSS画iPhone，话不多说上效果图！ 代码如下: html: <div class="container"> <div class="round"></div> <div class="longround"></div> <div class="screen">ipho...
CSS 画 iPhone XR
qq_41777791的博客
05-29 515
用CSS简单实现 iPhone XR 低仿图
CSS高级篇之纯CSS绘制iPhone界面
哆啦A瑶的博客
10-31 460
https://www.zubach.com/blog/how-i-made-an-iphone-4-in-css
html实现画苹果,纯CSS画出来的iPhone和iPad图形
weixin_39710288的博客
06-30 3138
CSS语言：CSSSCSS确定* {position: absolute;/* lets me position all elements separately without affecting others */}body {background-color: #e4e4e4;margin: 100px 150px;text-align: center;}/* iPhone */#iphone...
CSS3打造逼真iPhone 6模型特效教程
总结，"纯CSS3制作iphone 6手机模型特效源码.zip"是一个面向前端开发者的资源包，提供了利用CSS3实现的iPhone 6手机模型特效源码，通过纯CSS3技术，开发者可以在网页上创建具有高度视觉逼真度的iPhone 6效果，并通过...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值