css - CSS过渡口吃
问题描述
我不知道如何在 Dreamwidth 之外复制问题，所以我将提供完整的代码。
https://testjournalpublic.dreamwidth.org/
将光标悬停在页面顶部会显示控制条 (#lj_controlstrip)。文字过渡不流畅；它在过渡的最后阶段结结巴巴。
我正在使用 Chrome。
/* ********** Tooltip ********** */
.tooltip {
color: #fd37d2;
width: 79px;
position: relative;
top: -15px;
left: 355px;
border-bottom: 0px dotted black;
cursor: text;
}
.tooltip .tooltiptext {
width: 200px;
background-color: none;
text-align: left;
border-radius: 0px;
padding: 5px 0;
/* Fade in tooltip */
opacity: 0;
transition: opacity .25s;
/* Position the tooltip */
position: absolute;
top:18px;
left:-82px;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* ********** Tooltip end ********** */
body { padding: 0; margin: 0; text-align: center; color: #000;
background-color: #000; background-image: url();
image-rendering: -webkit-optimize-contrast;
background-repeat: no-repeat;
background-size: 37.12%;
background-position: bottom left;
background-attachment: fixed;
font-family: font-family: bookman; }
h1 a:link { font-family: IM Fell English; text-decoration: none; color: #000 }
h1 a:visited { color: #000 }
h1 a:hover { color: #e1ba51}
a, a:active { text-decoration: none; color: #586ea4;
}
a:visited { color: #586ea4;
}
a:hover { color: #e1ba51;
}
q { font-style: normal; }
#canvas {
margin: 0em auto 4em auto;
text-align: justify;
padding: 0;
}
}
#content { padding: 0; margin: 0; }
#primary { width: 100%; margin: 0 auto; z-index: 0; padding: 0; }
#tertiary { display: none; }
/*--- header + footer ---*/
#header { width: 60%; margin: 0 auto 0em auto; background-color: transparent;
}
#header>.inner { padding-top: 0em;
padding-right: 2em;
padding-bottom: 0em;
padding-left: 2em; }
#footer { display: none; padding-bottom: 0px; clear: both; }
.page-top, div.navigation.bottomnav { display: none; width: 60%; margin: 0 auto; text-transform: lowercase; text-align: center; font-weight: bolder; letter-spacing: 3pt; font-size: 1.0em; font-style: normal; }
.navigation { text-transform: uppercase; text-align: right; width: 100%; }
li.page-back, li.page-forward { display: inline; list-style: none; padding: 0; margin: 0 0 0 0.3125em; }
li.page-separator { display: none; }
div.navigation ul { display: inline; padding: 0; margin: 0; }
div.navigation.topnav { display: none; }
/*--- header texts ---*/
div#header h1#title { display: none; text-transform: uppercase; font-weight: 100; text-align: center; letter-spacing: 3pt; padding: 0; margin: 0; color: inherit; font-family: inherit; font-style:normal; font-size: 2,0em; }
div#header h2#subtitle { display: none; text-transform: lowercase; font-weight: 600; text-align: center; letter-spacing: 3pt; padding: 0; margin: 0; color: inherit;
font-family: inherit; font-style:normal; font-size: 1em; }
div#header h2#pagetitle { display: none; }
/*--- navigation links ---*/
div.module-navlinks, div.module-navlinks ul.module-list, div.module-navlinks ul.module-list li { display: none; }
/*--- modules ---*/
#secondary, #secondary>.inner, #secondary .module, #secondary .module-header, #secondary .module-header a, #secondary .module-header, #secondary .separator-after, .module-tags_cloud, .module-tags_cloud .module-content, .module-tags_cloud li, .tags_cloud li, ul.userlite-interaction-links.icon-links, ul.userlite-interaction-links.icon-links li, .module-calendar td a, .module-credit dt, .module-search .search-form, .module-search .search-box, #secondary .module-content, #secondary .module-content ul, #secondary .module-content li { display: none; }
/*--- entry ---*/
div.entry { padding: 0; margin: 0 0 0em 0; color: #221922;
background-color: transparent !important;
}
div.entry-content { margin: 1em 1em 0em 1em; }
div.entry-content a, a.active, a.visited, a.hover {font-weight: 800; font-style: normal; background-color: #d2d1d2;}
div.header { padding: 0; margin: 0 0 1em 0; }
h3.entry-title { font-weight: normal; letter-spacing: 2pt; padding: 0; margin: 0; font-family: inherit; font-size: 1.8em; color: #099aaf; font-style:normal;
}
h3.entry-title a { color: #000;
}
h3.sticky-entry-title.entry-title { font: inherit; color: inherit; text: inherit; }
h3.sticky-entry-title.entry-title img { -webkit-filter: grayscale(1); }
.datetime { display: none; } .datetime { font-size: 0.80em; font-weight: normal; text-transform: lowercase; letter-spacing: 2px; font-style: normal; padding: 5px 0; color: #999999;
}
.datetime a { color: #999999;
}
.userpic { display: hidden; display: none; }
.userpic img {
padding: 16px;
background-color: #ffffff;
border-radius: 50%;
margin-left: -120px;
height: 100px; width: 100px; }
span.poster.entry-poster{ font-size: 0.9em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0; color: #c8c8c8;
}
img.ContextualPopup-trigger { margin-bottom: 2px; padding: 0 2px; width: 12px; height: 12px; }
span.cuttag_container img { display: none; }
/* To prevent overlapping when icon's on the left */
/* and list is the first thing in content */
.entry-content li,
.comment-content li {
list-style-position: inside;
}
.metadata { margin: 2em 0 0 0; }
.metadata.top-metadata { margin: 1em 0 2em 0; }
div.metadata ul { padding: 0; margin: 0; }
div.metadata ul li { list-style: none; font-size: 0.9em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0; color: #c8c8c8;
}
span.metadata-label-location, span.metadata-label-mood, span.metadata-label-music { display: none; }
span.metadata-item-location { padding: 0 0 0 1.3em; }
span.metadata-item-mood { padding: 0 0 0 1.3em; }
span.metadata-item-music { padding: 0 0 0 1.3em; }
span.tag-text { display: none; }
div.tag ul { padding: 0 0 0 1.3em; margin: 0; display: inline; }
div.tag ul li { display: inline; list-style: none; font-size: 0.9em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0; color: #c8c8c8;
}
ul.entry-management-links { opacity:0;transition:opacity 0.5s ease; padding: 0; margin: 0em 0 0 0; -webkit-filter: grayscale(0); text-align: center; }
ul.entry-management-links:hover { opacity:1;
}
ul.entry-management-links li { display: inline; list-style: none; font-size: 11px; font-family: bookman; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0 5px 0 0; color: #c8c8c8;
}
ul.entry-interaction-links { opacity:0;transition:opacity 0.5s ease; padding: 0 0 0.5em 0; margin: 0em 0 0 0; text-align: center; padding-bottom: 0em; border-bottom: 0px solid #999999; }
ul.entry-interaction-links:hover { opacity:1;
}
ul.entry-interaction-links li { display: inline; list-style: none; font-size: 11px; font-family: bookman; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0 5px 0 0; color: #c8c8c8;
}
/*--- comments ---*/
.comment-title {
font-family: inherit;
}
.comment-title h4 {
font-size: inherit;
font-weight: inherit;
margin: 0;
padding: 0;
}
hr.above-entry-interaction-links, hr.below-reply-container { display: none; }
input, textarea { padding: 5px; font: 1em Helvetica, Arial, 'Arial Narrow', sans-serif; line-height: 1.8em; color: #888888;
background-color: #ffffff;
border: solid 1px #eeeeee;
}
textarea.textbox { width: 100% !important; }
.comment { margin: 0 auto 2em auto; padding: 40px 20px; border-left: 20px solid #f2ebd7; color: #888888;
background-color: #ffffff;
}
.comment-wrapper { margin: 2em 0; padding: 0; }
.bottomcomment, .comments-message { margin: 0 auto 2em auto; padding: 4em 2em; border-left: 20px solid #f2ebd7; color: #888888;
background-color: #ffffff;
}
.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; list-style: none; }
.comment-management-links li, .comment-interaction-links li { display: inline; }
#qrform table { border: 0!important; }
/*--- archive ---*/
li.active { list-style: none; display: inline; text-transform: uppercase; padding: 0; margin: 0; text-align: center; color: #d58d0f;
}
.month { margin: 0 auto 2em auto; padding: 4em 2em; border-left: 20px solid #f2ebd7; color: #888888;
background-color: #ffffff;
}
.month h3 { font-size: 1em; font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding: 0; margin: 0; text-align: right; color: #099aaf;
}
div.navigation ul { display: inline; }
div.navigation li { display: inline; list-style: none; }
.month th { font-size: 0.9em; font-weight: normal; text-transform: uppercase; padding: 5px; text-align: center; color: #6c6c6c;
background-color: #eeeeee;
}
.month table { width: 100%; border: 0; margin: auto; }
.month caption { display: none; }
td.day { padding: .5em; border: .1em solid #eeeeee; }
/*--- tags ---*/
.page-tags .tags-container h2 { font-size: 1em; font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding: 0; margin: 0; text-align: right; color: #099aaf;
}
.page-tags .tags-container { margin: 0 auto 2em auto; padding: 4em 2em; border-left: 20px solid #f2ebd7; color: #888888;
background-color: #ffffff;
}
.page-tags .tags-container ul { margin: 1em; padding: 0; }
.page-tags .tags-container ul li { margin: 0 0 0 1em; padding: 0; list-style: none; }
.userpic { float: left; margin: 0 10px 10px 0; }
/* ENTRY TINYICON REPLACEMENTS */
#canvas img[src*="user.png"] {
width: 0 !important;
height: 0 !important;
background: transparent!important;
background-image: url(http://i.imgur.com/yBoBLMj.png) !important;
background-repeat: no-repeat !important;
background-position: 0; !important; !important;
padding:16px 16px 0 0 !important; }
#canvas img[src*="community.png"] {
width: 0 !important;
height: 0 !important;
background: transparent!important;
background-image: url(http://i.imgur.com/AdEJonv.png) !important;
background-repeat: no-repeat !important;
background-position: 0; !important; !important;
padding:16px 16px 0 0 !important; }
#canvas img[src*="locked.png"] {
float: left;
width: 0 !important;
height: 0 !important;
background: transparent!important;
background-image: url(http://i.imgur.com/Ju8zWZA.png) !important;
background-repeat: no-repeat !important;
background-position: 0; !important; !important;
margin: 2px 0 5px 5px;
padding:16px 16px 0 0 !important; }
#canvas img[src*="private.png"] {
float: left;
width: 0 !important;
height: 0 !important;
background: transparent!important;
background-image: url(http://i.imgur.com/LYPYXaM.png) !important;
background-repeat: no-repeat !important;
background-position: 0; !important; !important;
margin: 2px 0 5px 5px;
padding:16px 16px 0 0 !important; }
/*--- Navigation Bar ---*/
#lj_controlstrip {
color: #fd37d2;
border-bottom: 0px solid #c8c8c8;
background-color: #000;
background-image: none;
height: 43px;
align-items: unset;
opacity:0;
transition:opacity 0.5s ease;
}
#lj_controlstrip:hover {
opacity:1;
}
#lj_controlstrip_userpic {
padding-top: 5px;
padding-left: 5px;
height: 45px;
}
#lj_controlstrip td {
font-size: 11px;
line-height: 18px;
letter-spacing: normal;
color: #e1ba51;
}
#lj_controlstrip_statustext {
color: #e1ba51;
font-weight: normal;
font-size: 14px;
}
#lj_controlstrip a, #lj_controlstrip .ljuser a b{
color: #fd37d2;
padding: 0px 2px 2px 2px;
}
#lj_controlstrip a:hover {
background: # ;
color: #586ea4;
text-decoration: none;
}
#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks {
border-right: 0px !important; color: #000;
}解决方案
推荐阅读
- python - 在 XGBoost 中为可视化指定特征名称列表时，为什么会出现“ValueError: feature_names mismatch”？
- linux - 从 GitHub 迁移到 GitLab（作为 POSIX 环境中的遥控器）
- ajax - Primefaces 组件在 ajax 事件期间未更新
- c++ - 错误：哈希函数必须可以使用键类型的参数调用
- spring-boot - Spring Boot 执行器可选参数，默认值
- python - Python替换字符串数据
- python - Python：确定第一个，第二个，第一个生日
- java - 附加文件java时更新校验和（MD5，SHA1）
- python-3.x - 在python中撤消“导入数学”？
- php - PHP - MySQL 查询不完全工作