css完全参考手册 mac,CSS3 可全方位展示的MACBOOK

最新推荐文章于 2022-04-26 13:26:35 发布
最新推荐文章于 2022-04-26 13:26:35 发布
阅读量305 收藏
点赞数
文章标签： css完全参考手册 mac

CSS

语言：

CSSSCSS

确定

@import "https://fonts.googleapis.com/css?family=Heebo:100";

*,

*:before,

*:after {

box-sizing: border-box;

padding: 0;

margin: 0;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

body {

background-color: white;

font-family: 'Heebo', sans-serif;

font-weight: 100;

}

.animation-wrapper {

width: 100vw;

height: 100vh;

background-color: rgba(0, 0, 0, 0.05);

position: relative;

-webkit-perspective: 600px;

perspective: 600px;

overflow: hidden;

}

.animation-inner {

position: relative;

width: 100%;

height: 100%;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-animation: intro-animation 5s forwards;

animation: intro-animation 5s forwards;

}

.base-top,

.base-bottom,

.base-front,

.base-back,

.base-left,

.base-right {

position: absolute;

top: calc(50% - 25px);

left: calc(50% - 100px);

width: 200px;

height: 150px;

}

.base-top,

.base-bottom {

background-color: #c8c8c8;

}

.base-top {

background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/149229/keyboard.png);

background-size: 190px auto;

background-repeat: no-repeat;

background-position: center 15px;

}

.base-top:after {

position: absolute;

content: "";

width: 60px;

height: 50px;

background-color: #b4b4b4;

border-radius: 2px;

bottom: 5px;

left: calc(50% - 30px);

}

.base-bottom {

-webkit-transform: translateZ(6px);

transform: translateZ(6px);

}

.base-front,

.base-back {

background-color: #bebebe;

height: 6px;

}

.base-front {

-webkit-transform: rotateX(90deg) translateZ(3px) translateY(3px);

transform: rotateX(90deg) translateZ(3px) translateY(3px);

}

.base-back {

-webkit-transform: rotateX(90deg) translateZ(-147px) translateY(3px);

transform: rotateX(90deg) translateZ(-147px) translateY(3px);

}

.base-left,

.base-right {

background-color: #b4b4b4;

height: 6px;

width: 150px;

left: calc(50% - 75px);

}

.base-left {

-webkit-transform: rotateY(90deg) rotateZ(90deg) translateZ(100px) translateX(72px) translateY(3px);

transform: rotateY(90deg) rotateZ(90deg) translateZ(100px) translateX(72px) translateY(3px);

}

.base-right {

-webkit-transform: rotateY(90deg) rotateZ(90deg) translateZ(-100px) translateX(72px) translateY(3px);

transform: rotateY(90deg) rotateZ(90deg) translateZ(-100px) translateX(72px) translateY(3px);

}

.screen {

position: absolute;

top: calc(50% - 175px);

left: calc(50% - 100px);

width: 200px;

height: 150px;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transition: all .5s;

transition: all .5s;

-webkit-transform-origin: bottom left;

transform-origin: bottom left;

-webkit-transform: rotateX(80deg);

transform: rotateX(80deg);

-webkit-animation: intro-screen 5s forwards;

animation: intro-screen 5s forwards;

}

.click .screen {

-webkit-transform: rotateX(180deg);

transform: rotateX(180deg);

}

.screen-front,

.screen-back {

width: 200px;

height: 150px;

position: absolute;

top: 0;

left: 0;

}

.screen-front {

background-color: #3c3c3c;

border: 5px solid black;

background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/149229/macos-sierra-hands-on-0004-1500x938.jpg);

background-size: 100% 100%;

background-position: center center;

overflow: hidden;

}

.screen-front iframe {

width: 100%;

height: 100%;

display: block;

}

.screen-front:before {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

content: "";

z-index: 3;

}

.screen-front:after {

position: absolute;

content: "";

top: 0;

left: 0;

background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));

background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));

width: 300px;

height: 300px;

-webkit-transform: rotate(45deg) translateY(-50px) translateX(-250px);

transform: rotate(45deg) translateY(-50px) translateX(-250px);

}

.screen-back {

background-color: #c8c8c8;

-webkit-transform: translateZ(3px);

transform: translateZ(3px);

background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/149229/Apple-logo-white-md.png);

background-size: 25px 30px;

background-repeat: no-repeat;

background-position: center center;

}

.screen-left,

.screen-right {

width: 3px;

height: 150px;

position: absolute;

top: 0;

left: 0;

background-color: #bebebe;

}

.screen-left {

-webkit-transform: rotateY(90deg) translateX(-1.5px);

transform: rotateY(90deg) translateX(-1.5px);

}

.screen-right {

-webkit-transform: rotateY(90deg) translateX(-1.5px) translateZ(198px);

transform: rotateY(90deg) translateX(-1.5px) translateZ(198px);

}

.screen-top,

.screen-bottom {

width: 200px;

height: 3px;

position: absolute;

top: 0;

left: 0;

background-color: #b4b4b4;

}

.screen-top {

-webkit-transform: rotateX(90deg) translateY(1.5px) translateZ(1px);

transform: rotateX(90deg) translateY(1.5px) translateZ(1px);

}

.screen-bottom {

-webkit-transform: rotateX(90deg) translateY(1.5px) translateZ(-148px);

transform: rotateX(90deg) translateY(1.5px) translateZ(-148px);

}

@-webkit-keyframes intro-animation {

0% {

-webkit-transform: rotateY(0deg) rotateX(-45deg);

transform: rotateY(0deg) rotateX(-45deg);

}

100% {

-webkit-transform: rotateY(180deg) rotateX(-90deg);

transform: rotateY(180deg) rotateX(-90deg);

}

}

@keyframes intro-animation {

0% {

-webkit-transform: rotateY(0deg) rotateX(-45deg);

transform: rotateY(0deg) rotateX(-45deg);

}

100% {

-webkit-transform: rotateY(180deg) rotateX(-90deg);

transform: rotateY(180deg) rotateX(-90deg);

}

}

@-webkit-keyframes intro-screen {

0% {

-webkit-transform: rotateX(180deg);

transform: rotateX(180deg);

}

100% {

-webkit-transform: rotateX(80deg);

transform: rotateX(80deg);

}

}

@keyframes intro-screen {

0% {

-webkit-transform: rotateX(180deg);

transform: rotateX(180deg);

}

100% {

-webkit-transform: rotateX(80deg);

transform: rotateX(80deg);

}

}

footer {

position: fixed;

bottom: 0;

left: 0;

width: 100%;

padding: 20px;

z-index: 2;

text-align: right;

}

footer a {

text-decoration: none;

color: black;

}

header {

position: fixed;

top: 0;

left: 0;

padding: 20px;

z-index: 4;

}

header h1 {

font-weight: 100;

}

weixin_39863017
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 适配mac 字体,CSS：仅在mac上使用字体
weixin_36116366的博客
08-03 1372
如果您不介意使用JavaScript和jQuery，则可以使用jQuery client plugin检测操作系统，然后设置字体。它似乎是旧东西，但它适用于jQuery 1.3.2，如果它适用于jQuery 1.6.1，我不会感到惊讶。if($.client.os == 'Mac')$('body').css('font-family',"'Looks good in Mac'")else if(...
超漂亮的仿MAC的CSS菜单
02-20
超漂亮的仿MAC的CSS菜单 超漂亮的仿MAC的CSS菜单
fonts.googleapis.com的本地包：css和字体（2019年4月更新）
04-22
fonts.googleapis.com 加载慢，360公司也不再提供服务（fonts.useso.com），所以就从google上扒下来，把css和字体文件都放到本地。也可以根据这个例子，自己整理需要的css和fonts。
超漂亮的仿MAC的CSS菜单.rar
07-04
超漂亮的仿MAC的CSS菜单
css滚动条样式设置成mac的样式
蓝色之恋love的博客
04-26 1060
/* 定义滚动条样式 */ ::-webkit-scrollbar { width: 5px; height: 5px; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); border-radius: 10px; background-color: rgba(50, 50, 50, .1); } /*定义滑块 内阴影+圆角*/ ::.
全民Python时代，豆瓣高级工程师告诉你 Python 怎么学
博文视点（北京）官方博客
10-17 2902
Python是如此活跃的一种语言，几乎伴随互联网的发生而创立，又伴随互联网的极速发展而繁荣。使用Python会遇到这样的问题：什么时候该用多进程？怎样提高代码执行效率？Flask为什么流行？学习Python要不要直接学Python 3? Python 3有哪些优点，迁移成本如何？豆瓣这种大厂对Python有何看法？开源中国OSC高手问答请来了《Python Web开发实战》一书作者，豆瓣高级产品开...
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
CSS完全参考手册3.0
04-22
本参考手册是在《完美网页设计CSS快速参考》基础上进行的第3次重要升级，同时参考了W3C官方网站信息、微软DHTML参考资料
HTML5 CSS3 chm中文参考手册_html5_CSS3_css3.chm_参考手册_
10-04
html5+css3 开发参考手册，和大家分享
CSS笔记（完整版）.md
08-17
css基础知识及网页布局
HTML5+CSS3中文参考手册(3手册) chm版中文参考手册打包
12-22
HTML5+CSS3 W3C规范<>参考手册(提供下载) 包含两个chm电子书，一个是HTML5的中文参考手册、一个是CSS3的中文参考手册，经典，必须下载
css3.0参考手册 doc整理版
06-29
1. CSS3 Properties 属性列表 Borders • border-color(See 1.1.1) • border-image(See 1.1.2) • border-radius(See 1.1.3) • box-shadow(See 1.1.4) Backgrounds • background-origin(See 1.2.1) • background-clip(See 1.2.2) • background-size(See 1.2.3) • multiple backgrounds(See 1.2.4) Color • HSL colors(See 1.3.1) • HSLA colors(See 1.3.2) • opacity(See 1.3.3) • RGBA colors(See 1.3.4) Text effects • text-shadow(See 1.4.1) • text-overflow(See 1.4.2) • word-wrap(See 1.4.3) User-interface • box-sizing(See 1.5.1) • resize(See 1.5.2) • outline(See 1.5.3) • nav-up(See 1.5.9) , nav-right(See 1.5.10) , nav-down(See 1.5.11) , nav-left(See 1.5.12) Selectors • attribute selectors(See 2.) Basic box model • overflow-x(See 1.6.2) , overflow-y(See 1.6.3) Generated Content • content(See 1.7.1) Other modules • media queries(See 1.8.1) • multi-column layout(See 1.2.4) • Web fonts(See 1.8.15) • speech(See 1.8.2) 上面截取部分。文档内容类似这样
CSS参考手册3.0
01-25
css3.0参考手册 css3.0样式表参考手册。根据CSS技术发展及各版本浏览器兼容重新修正了一些CSS的定义及用法，不失为一本学习和从事CSS开发的好参考资料。
css中文参考手册
04-12
web前端开发参考CSS参考手册 不会的时候查一下 方便哦
CSS3.0中文完全参考手册
06-28
CSS3.0中文完全参考手册
css3参考手册
05-19
css3参考手册，走过路过不要错过哈。css3参考手册 css3参考手册
CSS完全参考手册3.0chm中文版
06-01
CSS完全参考手册3.0chm版,用起来很方便，下载后自行解压即可
css88 css3参考手册
最新发布
07-25
总之，CSS3参考手册是一个有助于开发者更好地学习和应用CSS3的工具，它提供了详实的信息和示例，能够帮助开发者在网页设计中灵活运用CSS3的新特性，实现丰富多样的页面效果。 ### 回答3： CSS3参考手册是一本关于...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值