css多媒体竖屏,CSS3 手机横竖屏切换效果模拟动画

CSS

语言：

CSSSCSS

确定

body {

background-color: #51203a;

}

ul,

li {

margin: 0;

padding: 0;

list-style: none;

}

.center {

margin: auto;

top: 0;

left: 0;

bottom: 0;

right: 0;

width: 90px;

height: 155px;

/* Smartphone */

}

.smartphone {

width: 80px;

height: 120px;

margin: 40px 0 0 0;

border: 5px #e1e1e1 solid;

border-top-width: 15px;

border-bottom-width: 20px;

border-radius: 4px;

-webkit-animation: smartphone 2s ease-in-out infinite;

animation: smartphone 2s ease-in-out infinite;

}

@-webkit-keyframes smartphone {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

opacity: 0;

}

25% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

opacity: 1;

}

50% {

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

}

75% {

opacity: 1;

}

100% {

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

opacity: 0;

}

@keyframes smartphone {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

opacity: 0;

}

25% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

opacity: 1;

}

50% {

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

}

75% {

opacity: 1;

}

100% {

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

opacity: 0;

}

.smartphone:before {

content: '';

display: block;

width: 10px;

height: 3px;

margin: -9px auto;

background: #c8c8c8;

border-radius: 4px;

}

.smartphone:after {

content: '';

display: block;

width: 12px;

height: 12px;

margin: 4px auto;

background: #c8c8c8;

border-radius: 10px;

}

.smartphone .content {

width: 60px;

height: 100px;

margin: 15px 0 0 0;

padding: 10px;

background: #9b3c6f;

color: #762e55;

font-size: 0.5em;

overflow: hidden;

}

.smartphone ul li {

height: 6px;

margin: 0 0 5px 0;

border-color: #762e55;

background: #762e55;

}

.smartphone ul {

-webkit-animation: screen 2s ease-in-out infinite;

animation: screen 2s ease-in-out infinite;

}

@-webkit-keyframes screen {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

opacity: 0;

}

25% {

opacity: 1;

-webkit-transform-origin: left;

transform-origin: left;

-webkit-transform: rotate(0deg) translateY(0%) translateX(0%) scaleX(1);

transform: rotate(0deg) translateY(0%) translateX(0%) scaleX(1);

}

50% {

-webkit-transform-origin: left;

transform-origin: left;

-webkit-transform: rotate(90deg) translateY(-1%) translateX(-217%) scaleX(1.7);

transform: rotate(90deg) translateY(-1%) translateX(-217%) scaleX(1.7);

}

75% {

opacity: 1;

}

100% {

-webkit-transform-origin: left;

transform-origin: left;

-webkit-transform: rotate(90deg) translateY(-1%) translateX(-217%) scaleX(1.7);

transform: rotate(90deg) translateY(-1%) translateX(-217%) scaleX(1.7);

opacity: 0;

}

@keyframes screen {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

opacity: 0;

}

25% {

opacity: 1;

-webkit-transform-origin: left;

transform-origin: left;

-webkit-transform: rotate(0deg) translateY(0%) translateX(0%) scaleX(1);

transform: rotate(0deg) translateY(0%) translateX(0%) scaleX(1);

}

50% {

-webkit-transform-origin: left;

transform-origin: left;

-webkit-transform: rotate(90deg) translateY(-1%) translateX(-217%) scaleX(1.7);

transform: rotate(90deg) translateY(-1%) translateX(-217%) scaleX(1.7);

}

75% {

opacity: 1;

}

100% {

-webkit-transform-origin: left;

transform-origin: left;

-webkit-transform: rotate(90deg) translateY(-1%) translateX(-217%) scaleX(1.7);

transform: rotate(90deg) translateY(-1%) translateX(-217%) scaleX(1.7);

opacity: 0;

}

css多媒体竖屏,CSS3 手机横竖屏切换效果模拟动画相关推荐

移动端判断手机横竖屏状态
禁用用户自动缩放功能: <meta name="viewport" content="width=device-width, initial-scale=1.0, ...
移动端判断手机横竖屏状态及加载相应样式或内容的解决方案
移动端的开发过程中,免不了要判断横竖屏,然后在执行其他操作,比如分别加载不同样式或内容等等. 首先在做移动端开发的时候,在HTML页面head中加入如下代码 <meta name="v ...
html5禁止手机横竖屏,【Web前端问题】js 能禁止手机横竖屏切换吗
js 能禁止手机横竖屏切换吗回答: js判断手机横屏模式方法名称:orientation 实例: if(window.orientation!=0){ var obj=document.getE ...
WebView网页视频统一全屏播放及横竖屏切换
WebView 支持 Html5 video 进行全屏播放及横竖屏自动切换 1.检查AndroidManifest.xml清单文件,WebView控件所在的Activity配置信息;检查Activit ...
计算机手机原理是什么,什么是手机投屏，手机投屏到电脑上的原理
由于手机屏幕太小,感觉看电影.打游戏都不太舒服很多人并不满足于现状,所以想要将手机屏幕看看能不能投射到电脑或电视屏幕上,这样的话既能在大屏上体验游戏的快感又不会对自己的眼睛有所损伤真是一举两得的好处. ...
js 判断手机横竖屏的实现方法（不依赖任何其他库）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
Android 手机横竖屏切换
竖屏与横批切换手机有竖屏与横屏两种模式,两种屏幕方向不但造成App界面的展示差异,而且竖屏和横屏切换之际,甚至会打乱App的生命周期. 系统配置变更的处理机制为了避免横竖屏切换时重新加载界面的情况 ...
android 横屏竖屏设置,Android中强制设置横屏与竖屏，与横竖屏生命周期的设置
许多小的知识点,是面试中经常会被提问到的,面试题也方式也会不一样,比如,让你在配置文件中设置Activity 为竖屏模式,答题方式是把相关的配置节点代码也给写出来,多少有点懵逼... 全屏在Acti ...
手机横竖屏相关设置：动态关闭横竖屏切换、指定横竖屏切换
方式一:通过重力感应开关来关闭/开启横竖屏切换关闭横竖屏切换:Settings.System.putInt(context.getContentResolver(), Settings.System ...

css多媒体竖屏,CSS3 手机横竖屏切换效果模拟动画

css多媒体竖屏,CSS3 手机横竖屏切换效果模拟动画相关推荐

最新文章

热门文章