html做出便签效果,便签菜单.html

CSS3隐藏悬浮网站左侧标签式导航栏代码

a:link,

a:hover,

a:visited,

a:active {

color: #fff;

text-decoration: none;

}

body {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

background: #fff;

}

.card-holder {

position: fixed;

width: 0px;

overflow: visible;

}

.card-wrapper {

display: inline-block;

float: right;

clear: both;

}

.card {

position: relative;

left: 32px;

padding: 16px 32px 16px 64px;

margin: 8px;

x-box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.5);

box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.5);

background: #fff;

transition: all 0.3s ease-in-out 0.1s;

}

.card:hover {

position: relative;

left: 100%;

margin-left: -32px;

box-shadow:

0 -8px 8px -8px rgba(0, 0, 0, 0.5),

0 8px 8px -8px rgba(0, 0, 0, 0.5);

transition: all 0.3s ease-in-out;

}

.card-content {

display: inline-block;

color: #fff;

font-family: 'Droid Sans', sans-serif;

font-size: 16px;

font-weight: bold;

white-space: nowrap;

}

.bg-01 { background: #539770; }

.bg-02 { background: #4B7D74; }

.bg-03 { background: #8DC2BC; }

.bg-04 { background: #EDD6B4; }

.bg-05 { background: #BE7467; }

.bg-06 { background: #E2AE63; }

标题1

标题2

标题3

标题4

标题5

长标题1

————————————————

版权声明：本文为CSDN博主「小小鱼儿小小林」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_27471405/article/details/78106019

一键复制

编辑

Web IDE

原始数据

按行查看

历史