手机html5浏览,HTML5 手机短信息滚动浏览动画

最新推荐文章于 2025-08-11 14:18:26 发布

蒋咔咔

最新推荐文章于 2025-08-11 14:18:26 发布

阅读量124

点赞数

文章标签：手机html5浏览

本文详细定义了一套使用CSS和SCSS编写的手机界面样式，包括屏幕、按钮等元素的具体样式设置，通过精确的尺寸和颜色配置展示了如何构建一个逼真的手机外观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

语言：

CSSSCSS

确定

body {

background: #667385;

}

*:before,

*:after {

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.clear {

clear: both;

}

.phone {

margin: 10px auto 50px auto;

box-shadow: 10px 10px 10px #415260;

}

.phone {

height: 428px;

width: 226px;

background: #415260;

border-radius: 5px;

position: relative;

overflow: hidden;

}

.phone .phone-shade {

position: absolute;

height: 500px;

width: 200px;

left: 50%;

background: #555f6b;

-webkit-transform: rotate(18deg);

-ms-transform: rotate(18deg);

transform: rotate(18deg);

}

.phone .phone-speaker {

height: 8px;

width: 42px;

border-radius: 4px;

background: #3e4752;

position: relative;

top: 23px;

left: 50%;

margin-left: -21px;

}

.phone .phone-button {

height: 40px;

width: 40px;

background: #49525b;

border-radius: 50%;

position: absolute;

left: 50%;

margin-left: -20px;

bottom: 10px;

}

.phone .phone-screen {

height: 302px;

width: 208px;

background: #f2ebe2;

position: absolute;

left: 9px;

top: 58px;

overflow: hidden;

}

.phone .phone-screen .phone-header {

width: 100%;

height: 30px;

background: #1e1e1e;

position: relative;

z-index: 3;

color: white;

}

.phone .phone-screen .phone-header .phone-menu {

position: absolute;

right: 10px;

top: 9px;

background: white;

width: 15px;

height: 2px;

}

.phone .phone-screen .phone-header .phone-menu:before {

content: "";

width: 15px;

height: 2px;

top: 5px;

background: #f2ebe2;

position: absolute;

}

.phone .phone-screen .phone-header .phone-menu:after {

content: "";

width: 15px;

height: 2px;

top: 10px;

background: #f2ebe2;

position: absolute;

}

.phone .phone-post {

padding: 15px 10px;

border-bottom: 2px solid #62605d;

overflow: hidden;

height: 60px;

position: relative;

-webkit-transform: translateY(-60px);

-ms-transform: translateY(-60px);

transform: translateY(-60px);

z-index: 2;

}

.phone .phone-post.active {

-webkit-animation: new-post 1s ease infinite;

animation: new-post 1s ease infinite;

}

.post-thumb {

height: 29px;

width: 27px;

background: #b0b0b0;

position: absolute;

margin-right: 5px;

}

.post-title-1 {

height: 4px;

width: 15px;

margin-top: 3px;

background: #dadada;

position: absolute;

left: 44px;

}

.post-title-2 {

height: 4px;

width: 30px;

margin-top: 3px;

background: #dadada;

position: absolute;

left: 65px;

}

.post-line-1 {

height: 4px;

width: 150px;

background: #b0b0b0;

position: absolute;

top: 27px;

left: 44px;

}

.post-line-2 {

height: 4px;

width: 100px;

background: #b0b0b0;

position: absolute;

top: 36px;

left: 44px;

}

#first-post .line {

width: 0;

}

#first-post.active .post-thumb {

-webkit-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

-webkit-animation: box-grow 500ms ease 500ms forwards;

animation: box-grow 500ms ease 500ms forwards;

}

#first-post.active .line {

-webkit-transition: width 500ms ease;

transition: width 500ms ease;

-webkit-transition-delay: 600ms;

transition-delay: 600ms;

}

#first-post.active .post-title-1 {

width: 15px;

}

#first-post.active .post-title-2 {

width: 30px;

}

#first-post.active .post-line-1 {

width: 150px;

}

#first-post.active .post-line-2 {

width: 100px;

}

@-webkit-keyframes new-post {

0% {

-webkit-transform: translateY(-100%);

transform: translateY(-100%);

}

100% {

-webkit-transform: translateY(0px);

transform: translateY(0px);

}

@keyframes new-post {

0% {

-webkit-transform: translateY(-100%);

transform: translateY(-100%);

}

100% {

-webkit-transform: translateY(0px);

transform: translateY(0px);

}

@-webkit-keyframes box-grow {

0% {

-webkit-transform: scale(0) rotate(25deg);

transform: scale(0) rotate(25deg);

}

60% {

-webkit-transform: scale(1.2) rotate(-10deg);

transform: scale(1.2) rotate(-10deg);

}

100% {

-webkit-transform: scale(1) rotate(0);

transform: scale(1) rotate(0);

}

@keyframes box-grow {

0% {

-webkit-transform: scale(0) rotate(25deg);

transform: scale(0) rotate(25deg);

}

60% {

-webkit-transform: scale(1.2) rotate(-10deg);

transform: scale(1.2) rotate(-10deg);

}

100% {

-webkit-transform: scale(1) rotate(0);

transform: scale(1) rotate(0);

}