本文共 1998 字，大约阅读时间需要 6 分钟。
CSS
语言：
CSSSCSS
确定
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300);
h2 {
color: #607d8b;
font-weight: 300;
margin-top: 0;
}
.container {
font-family: 'Roboto', sans-serif;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #fff;
-webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.container.clicked {
background-color: #512da8;
}
.papersheet {
position: relative;
display: block;
text-decoration: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
line-height: 1.7;
color: #8a9199;
display: table;
height: auto;
width: 100%;
max-width: 40%;
overflow: auto;
margin: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
cursor: pointer;
font-weight: 400;
-webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #fff;
}
.papersheet:hover {
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}
.papersheet.clicked {
-webkit-transform: scale(1.3, 1.3);
-ms-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
padding-bottom: 3rem;
box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22);
}
.papersheet-content {
padding: 2rem;
}
.papersheet-controls {
background-color: red;
opacity: 0;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
position: absolute;
left: 0;
right: 0;
bottom: 1rem;
padding: 0 2rem;
text-align: center;
background-color: #fff;
}
.clicked .papersheet-controls {
pointer-events: auto;
opacity: 1;
}
.papersheet-controls__button {
background-color: #fff;
padding: 0.5rem 1rem;
outline: none;
-webkit-transition: all 200ms;
transition: all 200ms;
color: #263238;
border: none;
}
.papersheet-controls__button:hover {
background-color: #eceff1;
}
.papersheet-controls__button.-primary {
color: #00bcd4;
}
转载地址：https://blog.csdn.net/weixin_32667433/article/details/117813796 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
