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

最新推荐文章于 2024-04-24 14:22:30 发布
最新推荐文章于 2024-04-24 14:22:30 发布
阅读量6.2k 收藏 15
点赞数 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），我后面再整理咯。先到这。



葡萄干是个程序员
关注
  • 8
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
手机充电效果-css手写
08-10
css手写的手机充电效果，使用了伪元素，translate，transform,animation等。
纯html+css3 绘制iphone7 模型和常用app图标
xdlumia的博客
09-08 277
纯css写的iphone7 和常用app图标。 你所能看到的都是div+css写出来,没用任何图片和字体图标。 先看个图 ![image.png](https://xdlumia.oss-cn-beijing.aliyuncs.com/blog/images/2021/09/1631114858332.png) 对你没有看错，你所看到的全是css实现， [纯css实现iphone7模型](http://www.dreamwq.com:8001/html/iphone7/index.html) 其实这个项..
纯CSS3制作iphone 6手机模型特效源码.zip
11-09
纯CSS3制作iphone 6手机模型特效源码.zip
纯CSS3实现苹果iphone6手机模型特效.zip
07-03
纯CSS3实现苹果iphone6手机模型特效是一款通过简单HTML代码配合CSS3渐变等效果，制作出逼真的iphone6手机模型效果。
纯CSS3实现苹果iphone6手机模型特效特效代码
03-20
纯CSS3实现苹果iphone6手机模型特效是一款通过简单HTML代码配合CSS3渐变等效果，制作出逼真的iphone6手机模型效果。
纯css3绘制白色iPhone6苹果手机样式代码
11-24
纯css3绘制白色iPhone6苹果手机样式代码
利用纯CSS绘制iPhone X
wilL-my的博客
09-03 1646
<div class="device iphone-x"> <!-- 外部轮廓 --> <div class="frame"> <div class="content"> <div class="time">10:19</di...
纯CSS画iphone
qq_42582773的博客
02-05 266
纯CSS画iphone
苹果html5插件,纯CSS打造各种超逼真的苹果（Apple）设备模型
weixin_29258297的博客
06-22 640
CSSDevices是一款使用纯CSS制作的各种超逼真的苹果(Apple)设备模型。这些CSS苹果设备模型中可以嵌入图片、文字、视频等HTML元素，并且非常容易的就可以制作出轮播图的效果。使用方法使用该CSS苹果设备模型特效需要在页面中引入devices.min.css文件，可以选择引入jQuery和devices.js文件。iphone设备模型iphone设备模型的基本HTML结构如下：可选的i...
手机还可以这么玩--css3绘制苹果手机
qq_24047659的博客
10-15 516
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
三步用CSS写一个商城卡券
12-14
今天是618 ，各大商城都在搞促销活动，今天我们就来用css做一个商城卡卷，具体如下：   还在为上面这样格式各样的商城卡券的样式而发愁？CSS 不熟，canvas 太难，怎么办？ 用 CSS 写一个商城卡券需要几步？ 一共需要三步： 打开这个网址（浏览器输入 https://qishaoxuan.github.io/css_tricks/hollowOut/ ） 找到需要的样式 复制粘贴 交给测试后，我们来分析下 CSS 卡券。 我们来准备一下基础知识 radial-gradien: background: radial-gradient(shape size a
纯CSS打造各种超逼真的苹果（Apple）设备模型
12-13
CSSDevices是一款使用纯CSS制作的各种超逼真的苹果（Apple）设备模型。这些CSS苹果设备模型中可以嵌入图片、文字、视频等HTML元素，并且非常容易的就可以制作出轮播图的效果。
纯css3绘制超逼真iPhone6动画效果
12-13
这是一款使用纯css3制作的非常逼真的iPhone6动画效果。这款iPhone6动画效果中没有使用任何图片，所有的图像和动画都使用css3完成。
纯CSS3制作iphone 6手机模型特效特效代码
03-20
本特效源码是一款使用纯CSS3制作的逼真的iphone 6手机模型效果的代码。该特效中通过简单HTML代码配合CSS3渐变等效果，制作出逼真的iphone6手机模型效果。本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗，不支持IE8及以下浏览
如何通过cURL库实现远程控制插座
tyanzhiqi的专栏
04-24 562
如何通过cURL库实现远程控制插座呢？本文描述了使用cURL库调用HTTP接口，实现控制插座，即插即用，先插入插座，再接电器，实现远程控制。
微软Phi-3，3.8亿参数能与Mixtral 8x7B和GPT-3.5相媲美，量化后还可直接在IPhone中运行
deephub
04-24 3847
Phi-3系列，尤其是Phi-3-mini模型，代表了语言模型领域的一大进步，证明了高级AI能力可以在移动设备上有效实施。这一系列模型，包括Phi-3-mini、Phi-3-small和Phi-3-medium，在一系列基准测试中展示了令人印象深刻的性能，与甚至有时超越了GPT-3.5和Mixtral 8x7B等较大的模型。其性能的关键在于使用经过精心策划的训练数据集的创新使用，该数据集结合了经过严格过滤的网络数据和合成数据，使这些较小的模型能够实现高效率和高效能。
axios使用
最新发布
weixin_45618535的博客
04-24 384
Axios是一个基于promise的HTTP库 ，可以用在浏览器和node中CSRF（有时也称为XSRF）是一类相关的攻击。攻击者使用户的浏览器在用户不知情的情况下向网站的后端发送请求。攻击者可以使用XSS载荷发起CSRF攻击。
AppleWatch是真的能够减少我iPhone的使用时长
weixin_44188796的博客
04-24 195
所以，我想试试AppleWatch，因为它涵盖了智能手机的许多关键功能，即使你的iPhone不在身边，它也可以用来打电话、发短信、在Spotify上听音乐，用苹果支付访问你的卡，用地图导航。然后，我就去买了AppleWatchSeries9蜂窝款，并试用了一周，我想知道它是否能帮助我减少使用iPhone的时间，从而花更多的时间在自己的身体健康护理上。在我开始使用Series 9之前，我每天的平均iPhone屏幕时间是9小时3分钟是，虽然，我也一直在努力减少使用时长，但我每天使用手机的时间还是很长。
6、使用CSS3制作动画效果。
07-08
当使用CSS3制作动画效果时，你可以使用`@keyframes`规则定义动画的关键帧，并使用`animation`属性将它们应用到元素上。下面是一个简单的示例： ```css /* 定义动画的关键帧 */ @keyframes myAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } /* 将动画应用到元素上 */ .element { animation-name: myAnimation; animation-duration: 2s; animation-timing-function: ease-in-out; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: alternate; } ``` 在上面的示例中，我们定义了一个名为`myAnimation`的动画，它从透明度为0（0%）到透明度为1（100%）。然后，我们将该动画应用到一个名为`.element`的元素上。通过设置不同的动画属性，你可以控制动画的持续时间、缓动效果、延迟时间、循环次数和播放方向。 当然，CSS3还提供了许多其他属性和特性，可以用来制作更复杂和炫酷的动画效果，如过渡（transition）、变形（transform）和关键帧动画（animation）。你可以根据具体的需求和创意来运用它们。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值