css3实现多个元素依次显示效果CSS :befor :after 伪元素的巧妙用法详解CSS nth-child与nth-of-type的元素查找方式css判断某元素的子元素个数并分别设置样式的方法CSS 实现元素较宽不能被完全展示时将其隐藏的方法单元素利用css实现多重边框效果示例代码css3之UI元素状态伪类选择器实例演示利用CSS3伪元素实现逐渐发光的方格边框css 获取从第n个开始之后的所有元素

 @keyframes topIn { from { transform: translateY(-50px) } to { transform: translateY(0px) } }

 .topIn { animation: topIn 1s ease; }

 @keyframes topIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0px); opacity: 1; } }

 btn.addEventListener('click', function() { document.querySelector('.target').classList.add('topIn'); }, !1);

 .aninode { visibility: hidden; }

 .animated .aninode { visibility: visible; }

 .animated .topIn { animation: topIn 1s ease; }

showhide
 .container { width: 100px; margin: 0 auto; } .aninode { visibility: hidden; } .animated .aninode { visibility: visible; } .target { width: 100px; height: 100px; background: orange; border-radius: 4px; margin: 20px 0; } .animated .topIn { animation: topIn 1s ease; } .animated .leftIn { animation: leftIn 1s ease; } .btn { width: 100px; height: 30px; border: 1px solid #ccc; outline: none; transition: 0.1s; } .btn:active { border: none; background: orange; color: #fff; } @keyframes topIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0px); opacity: 1; } } @keyframes leftIn { from { transform: translateX(-50px); opacity: 0; } to { transform: translateX(0px); opacity: 1; } } var show = document.querySelector('.show'); var hide = document.querySelector('.hide'); var container = document.querySelector('.container'); show.addEventListener('click', function() { container.classList.add('animated'); }, !1); hide.addEventListener('click', function() { container.classList.remove('animated'); }, !1);

 See the Pen NXKrPg by Ormie (@yangbo5207) on CodePen.

 .delay200 { animation-delay: 200ms; animation-fill-mode: backwards!important; } .delay400 { animation-delay: 400ms; animation-fill-mode: backwards!important; } .delay600 { animation-delay: 600ms; animation-fill-mode: backwards!important; } .delay800 { animation-delay: 800ms; animation-fill-mode: backwards!important; }

 See the Pen mpbEEE by Ormie (@yangbo5207) on CodePen.

春晓
春眠不觉晓
处处蚊子咬
夜来风雨声
<此处请留下你们的才华>
showhide
 .container { width: 200px; margin: 0 auto; } .aninode { visibility: hidden; } .animated .aninode { visibility: visible; } .targets { margin: 20px 0; } .targets .item { border: 1px solid #ccc; margin: 10px 0; line-height: 2; padding: 2px 6px; border-radius: 4px; } .animated .topIn { animation: topIn 1s ease; } .animated .leftIn { animation-name: leftIn; animation-duration: 1s; } .btn { width: 100px; height: 30px; border: 1px solid #ccc; outline: none; transition: 0.1s; } .btn:active { border: none; background: orange; color: #fff; } @keyframes topIn { from { transform: translateY(-50px) } to { transform: translateY(0px) } } @keyframes leftIn { from { transform: translateX(-50px); opacity: 0; } to { transform: translateX(0px); opacity: 1; } } .delay200 { animation-delay: 200ms; animation-fill-mode: backwards!important; } .delay400 { animation-delay: 400ms; animation-fill-mode: backwards!important; } .delay600 { animation-delay: 600ms; animation-fill-mode: backwards!important; } .delay800 { animation-delay: 800ms; animation-fill-mode: backwards!important; } var show = document.querySelector('.show'); var hide = document.querySelector('.hide'); var container = document.querySelector('.container'); show.addEventListener('click', function() { container.classList.add('animated'); }, !1); hide.addEventListener('click', function() { container.classList.remove('animated'); }, !1);

 const styleSheet = getSheet(); var delay = 100; while (delay < 10000) { styleSheet.insertRule(`.animated .delay${delay}{ animation-delay: ${delay}ms; animation-fill-mode: backwards; }`, styleSheet.cssRules.length); delay += delay < 3000 ? 100 : 1000; } function getSheet() { var sheets = document.styleSheets; var len = sheets.length; for(var i = 0; i <= len; i++) { var sheet = sheets.item(i); try { if (sheet.cssRules) { return sheet; } } catch(e) {} } var style = document.createElement('style'); style.type = "text/css"; document.getElementsByTagName('head')[0].appendChild(style); return style.sheet; }