-1
我添加了这个纯CSS的cookie酒吧到我的网站和所有工作正常,唯一的问题是,当你在网站进入,你可以看到第一个cookie栏,和饼干吧最后上去。自动cookie酒吧纯粹的CSS工作正常,但需要延迟
当我进入我的网站时,如何才能看到我的曲奇条只有下去,我想改变de动画延迟,增加设置时间....但没有任何变化!
原来这里是codepen,你可以看到我想要改变它
www.codepen.io/natewiley/pen/uGtcD
这里是我的代码
<input class="checkbox-cb" id="checkbox-cb" type="checkbox" />
<div class="cookie-bar">
<div class="message">
This website uses cookies to give you an incredible experience. By using
this website you agree to the
<div class="buttoncookies-container">
<a style="letter-spacing: 1px;" class="buttoncookies" id="modalcookieslinken" onclick="toggleOverlay()">terms</a>
</div>
</div>
<div class="mobile">
This website uses cookies,
<div class="buttoncookies-container">
<a style="letter-spacing: 1px;" class="buttoncookies" id="modalcookiesshortlink" onclick="toggleOverlay()">
learn more
</a>
</div>
</div>
<label for="checkbox-cb" class="close-cb">X</label>
</div>
</div>
这里是我的CSS
.cookie-bar { z-index:9996; position: fixed; width: 100%; top: 0; right: 0; left: 0; height: auto; padding: 20px; line-height:20px; text-align: center; background: #d2c6af; transition: .8s; animation: slideIn .8s; animation-delay: .8s; display: inline-block; }
.mobile { display: none; }
@keyframes slideIn { 0% { transform: translateY(-1000px); } 100% { transform: translateY(0); } }
.close-cb { border: none; background: none; position: absolute; display: inline-block; right: 20px; top: 10px; cursor: pointer; }
.close-cb:hover { color:#fff;; }
.checkbox-cb { display: none;}
#checkbox-cb:checked + .cookie-bar { transform: translateY(-1000px); }
它工作正常,如果我想不能直接看到它,例如2秒后? – coolio83000
更新了评论 –
完美先生; D – coolio83000