注册日期：2010-05-08
访问总量：694560次

《好大一棵树》

发表时间：2014-04-14 21:01

一九八九年的4月15日那天，中央电视台文艺部的邹友开在返京的火车上，突然从广播里听到胡耀邦病逝的消息，顿时觉得万分悲痛。他脑海里浮现出一幕幕和耀邦相处的片段。他怎么也控制不了自己的情绪，饱含泪水和真情写下了一首怀念胡耀邦的诗。这首诗后来被谱曲成为一首广为流传的歌《好大一棵树》。胡耀邦在后毛时代拨乱反正解放了无数在暴政下遭受迫害的中国人；他尊重知识、尊重人才；他乐意与知识分子和普通老百姓交朋友。在很多正直的中国人心中，胡耀邦是公认的良师益友！耀邦的突然辞世，犹如一棵大树轰然倒下，使许多知识分子和普通老百姓失去了一颗可以遮荫避雨的“大树”。

那英版本的《好大一棵树》

1990年春晚张晓梅版本的《好大一棵树》

田震版本的《好大一棵树》

毛阿敏版本的《好大一棵树》
http://www.tudou.com/programs/view/9zsKK4YKfSc/

当前共有41条评论
关注恭听：
18:46
<!DOCTYPE html><html class=''><head><script src='http://assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js'></script><script src='http://assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js'></script><script src='http://assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/karpovsystems/pen/mwHKj" /><style class="cp-pen-styles">html { width:100%; height:100%; min-width:440px;}body { margin:0; opacity:0; color:#3584B2; text-align:center; text-shadow:0 1px 1px #FFF; font-family:Palatino Linotype, Book Antiqua, Palatino, serif; background-image:-webkit-radial-gradient(50% 10%, cover, #ACCDE5, #56A8E2); background-image:-moz-radial-gradient(50% 10%, cover, #ACCDE5, #56A8E2); background-image:-ms-radial-gradient(50% 10%, cover, #ACCDE5, #56A8E2); background-image:-o-radial-gradient(50% 10%, cover, #ACCDE5, #56A8E2); background-image:radial-gradient(50% 10%, cover, #ACCDE5, #56A8E2); -webkit-transition:opacity 0.3s ease; -moz-transition:opacity 0.3s ease; -ms-transition:opacity 0.3s ease; -o-transition:opacity 0.3s ease; transition:opacity 0.3s ease;}header { height:80px;}h1 { font-size:46px; margin:10px 0 0 0; font-weight:normal; }h2 { font-size:24px; margin:28px 0 0 0; font-weight:normal; }p { width:320px; margin:0 auto; font-size:13px; }i { display:block; margin:0 0 20px 0;}nav a { color:#FFF; width:120px; font-size:14px; cursor:pointer; overflow:hidden; border-radius:3px; position:relative; background:#40A1DD; display:inline-block; padding:10px 0 10px 0; margin:10px 10px 30px 10px; border:1px solid rgba(255,255,255,.30); text-shadow:1px 1px 2px rgba(0,0,0,.50); font-family:Verdana, Geneva, sans-serif; box-shadow:0 0 0 1px #008ADB, 0 2px 0 1px #008ADB, 0 3px 6px #000; }nav a:active { top:3px; box-shadow:0 0 0 1px #008ADB, 0 0 0 1px #008ADB, 0 0 4px #000;}nav a span { display:block;}</style></head><body><header><h1>textition.js</h1><h2>jQuery plugin</h2><h2>CSS3 text transitions</h2></header><i>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</i><nav><a><span>About</span><span>Axis-X</span></a><a><span>Products</span><span>Axis-Z</span></a><a><span>Contacts</span><span>Axis-Y</span></a></nav><i>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</i> <p>http://dimajt.github.io/textition</p><p>Make your words beautiful</p><script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js'></script><script src='http://code.jquery.com/jquery-1.10.2.min.js'></script><script src='http://dimajt.github.io/textition/js/textition.js'></script><script>var init = function () {$('body').css('opacity', 1);$('header').textition({map: {x: 50,y: 20,z: 500},speed: 0.8,handler: false,autoplay: true,interval: 3});$('nav a:eq(0)').textition({map: {x: 100,y: 0,z: 0},speed: 0.5,handler: 'mouseenter mouseleave'});$('nav a:eq(1)').textition({map: {x: 0,y: 0,z: 100},speed: 0.5,perspective: 50,handler: 'mouseenter mouseleave'});$('nav a:eq(2)').textition({map: {x: 0,y: 40,z: 0},speed: 0.5,animation: 'ease-out',handler: 'mouseenter mouseleave'});};$(document).ready(init);//# sourceURL=pen.js</script></body></html>
屏蔽举报回复
关注恭听：
18:39
<head><script src='//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js'></script><script src='//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js'></script><script src='//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/Zeaklous/pen/IdlHx" />
<style class="cp-pen-styles">.rotator {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color:teal;
}
.transition {
  -webkit-transition: all 1000s linear;
  -moz-transition: all 1000s linear;
  -ms-transition: all 1000s linear;
  -o-transition: all 1000s linear;
  transition: all 1000s linear;
}
.translateAnimationClass {
  -webkit-transform: rotateX(43200deg) rotateY(14400deg);
  -moz-transform: rotateX(43200deg) rotateY(14400deg);
  -ms-transform: rotateX(43200deg) rotateY(14400deg);
  -o-transform: rotateX(43200deg) rotateY(14400deg);
  transform: rotateX(43200deg) rotateY(14400deg);
}
.animation {
  -webkit-animation: rotator 25s linear infinite;
  -moz-animation: rotator 25s linear infinite;
  -ms-animation: rotator 25s linear infinite;
  -o-animation: rotator 25s linear infinite;
  animation: rotator 25s linear infinite;
}
@-webkit-keyframes rotator {
  0%   { -webkit-transform: rotateX(0deg)    rotateY(0deg);    }
  100% { -webkit-transform: rotateX(1080deg) rotateY(360deg);  }
}
@-moz-keyframes rotator {
  0%   { -moz-transform: rotateX(0deg)    rotateY(0deg);    }
  100% { -moz-transform: rotateX(1080deg) rotateY(360deg);  }
}
@-ms-keyframes rotator {
  0%   { -ms-transform: rotateX(0deg)    rotateY(0deg);    }
  100% { -ms-transform: rotateX(1080deg) rotateY(360deg);  }
}
@-o-keyframes rotator {
  0%   { -o-transform: rotateX(0deg)    rotateY(0deg);    }
  100% { -o-transform: rotateX(1080deg) rotateY(360deg);  }
}
@keyframes rotator {
  0%   { transform: rotateX(0deg)    rotateY(0deg);    }
  100% { transform: rotateX(1080deg) rotateY(360deg);  }
}
</style></head><body>
<h3>But... Which is the animation?</h3>
<div class='rotator animation'></div>
<h3>Is it this one?</h3>
<div class='rotator transition'></div>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js'></script>
<script>window.onload = function () {
    document.getElementsByClassName('transition')[0].classList.add('translateAnimationClass');
};
//# sourceURL=pen.js
</script>
</body>
屏蔽举报回复
关注恭听：
18:31
<!DOCTYPE html><html class=''><head><script src='//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js'></script><script src='//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js'></script><script src='//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/SaraSoueidan/pen/bogtz" /><script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script><link rel='stylesheet prefetch' href='//codepen.io/assets/reset/normalize.css'><script src='//codepen.io/assets/libs/prefixfree.min.js'></script><link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css'><style class="cp-pen-styles">*{box-sizing: border-box;}body{height:100%;background-color: #444;}h1{font-size:1em;text-align:center;color: #eee;letter-spacing:1px;text-shadow: 1px 1px 1px rgba(0,0,0,0.5);}.nav-container{width:300px;margin-top:10px;box-shadow: 0 2px 2px 2px black;transition: all 0.3s linear;}.nav{list-style-type:none;margin:0;padding:0;}li{height:50px;position:relative;background: linear-gradient(#292929, #242424);}a {border-top: 1px solid rgba(255,255,255,0.1);border-bottom: 1px solid black;text-decoration:none;display:block;height:100%;width:100%;line-height:50px;color:#bbb;text-transform: uppercase;font-weight: bold;padding-left:25%;border-left:5px solid transparent;letter-spacing:1px;transition: all 0.3s linear;}.active a{color: #B93632;border-left:5px solid #B93632;background-color: #1B1B1B;outline:0;}li:not(.active):hover a{color: #eee;border-left: 5px solid #FCFCFC;background-color: #1B1B1B;}span[class ^= "icon"]{position:absolute;left:20px;font-size: 1.5em;transition: all 0.3s linear;}@media only screen and (max-width : 860px){.text{display:none;}.nav-container , a{width: 70px;}a:hover{width:200px;z-index:1;border-top: 1px solid rgba(255,255,255,0.1);border-bottom: 1px solid black;box-shadow: 0 0 1px 1px black;}a:hover .text {display:block;padding-left:30%;}}@media only screen and (max-width : 480px){.nav-container, a{ width:50px;}span[class ^= "icon"]{ left:8px;}}</style></head><body><h1>Slowly resize screen to see the width transition</h1><div class="nav-container"><ul class="nav"><li class="active"><a href="#"><span class="icon-home"></span><span class="text">home</span></a></li><li><a href="#"><span class="icon-user"></span><span class="text">about</span></a></li><li><a href="#"><span class="icon-headphones"></span><span class="text">Audio</span></a></li><li><a href="#"><span class="icon-picture"></span><span class="text">Portfolio</span> </a></li><li><a href="#"><span class="icon-facetime-video"></span><span class="text">video</span></a></li></ul></div><script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script>$('li').click(function () {$(this).addClass('active').siblings().removeClass('active');});//# sourceURL=pen.js</script></body></html>
屏蔽举报回复
关注恭听：
18:29
<!DOCTYPE html><html class=''><head><script src='//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js'></script><script src='//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js'></script><script src='//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/jeffmccarthyesq/pen/LEEKLZ" /><link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'><style class="cp-pen-styles">body {background: #e6e6e6;width: 100%;height: 100vh;position: relative;}h1 {color: #c7c7c7;font-weight: 200;text-align: center;position: absolute;top: 45%;width: 100%;}h2 {color: #007fed;font-weight: bold;border-bottom: 1px solid #eee;padding-bottom: 15px;margin-bottom: 15px;}p {color: #001818;}.wrap {position: absolute;overflow: hidden;top: 10%;right: 10%;bottom: 85px;left: 10%;padding: 20px 50px;display: block;border-radius: 4px;transform: translateY(20px);transition: all 0.5s;visibility: hidden;}.wrap .content {opacity: 0;}.wrap:before {position: absolute;width: 1px;height: 1px;background: white;content: "";bottom: 10px;left: 50%;top: 95%;color: #fff;border-radius: 50%;-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);}.wrap.active {display: block;visibility: visible;box-shadow: 2px 3px 16px silver;transition: all 600ms;transform: translateY(0px);transition: all 0.5s;}.wrap.active:before {height: 2000px;width: 2000px;border-radius: 50%;top: 50%;left: 50%;margin-left: -1000px;margin-top: -1000px;display: block;-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);}.wrap.active .content {position: relative;z-index: 1;opacity: 1;transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);}a.button {padding: 11px 11px 13px 13px;outline: none;border-radius: 50%;background: #007fed;color: #fff;font-size: 24px;display: block;position: fixed;left: 50%;bottom: 20px;top: auto;margin-left: -25px;text-decoration: none;transition: transform 0.25s;}a.button:hover {text-decoration: none;background: #2198ff;}a.button.active {transform: rotate(135deg);transition: transform 0.5s;}</style></head><body><h1>Lollipop Transition</h1><div class='wrap'><div class='content'><h2>Well Hello!</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div></div><a class='button glyphicon glyphicon-plus' href='#'></a><script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script>$('a').on('click', function () {$('.wrap, a').toggleClass('active');return false;});//# sourceURL=pen.js</script></body></html>
屏蔽举报回复
关注恭听：
18:27
<head><script src='//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js'></script><script src='//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js'></script><script src='//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/Zeaklous/pen/IdlHx" />
<style class="cp-pen-styles">.rotator {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color:teal;
}
.transition {
  -webkit-transition: all 1000s linear;
  -moz-transition: all 1000s linear;
  -ms-transition: all 1000s linear;
  -o-transition: all 1000s linear;
  transition: all 1000s linear;
}
.translateAnimationClass {
  -webkit-transform: rotateX(43200deg) rotateY(14400deg);
  -moz-transform: rotateX(43200deg) rotateY(14400deg);
  -ms-transform: rotateX(43200deg) rotateY(14400deg);
  -o-transform: rotateX(43200deg) rotateY(14400deg);
  transform: rotateX(43200deg) rotateY(14400deg);
}
.animation {
  -webkit-animation: rotator 25s linear infinite;
  -moz-animation: rotator 25s linear infinite;
  -ms-animation: rotator 25s linear infinite;
  -o-animation: rotator 25s linear infinite;
  animation: rotator 25s linear infinite;
}
@-webkit-keyframes rotator {
  0%   { -webkit-transform: rotateX(0deg)    rotateY(0deg);    }
  100% { -webkit-transform: rotateX(1080deg) rotateY(360deg);  }
}
@-moz-keyframes rotator {
  0%   { -moz-transform: rotateX(0deg)    rotateY(0deg);    }
  100% { -moz-transform: rotateX(1080deg) rotateY(360deg);  }
}
@-ms-keyframes rotator {
  0%   { -ms-transform: rotateX(0deg)    rotateY(0deg);    }
  100% { -ms-transform: rotateX(1080deg) rotateY(360deg);  }
}
@-o-keyframes rotator {
  0%   { -o-transform: rotateX(0deg)    rotateY(0deg);    }
  100% { -o-transform: rotateX(1080deg) rotateY(360deg);  }
}
@keyframes rotator {
  0%   { transform: rotateX(0deg)    rotateY(0deg);    }
  100% { transform: rotateX(1080deg) rotateY(360deg);  }
}
</style></head><body>
<h3>But... Which is the animation?</h3>
<div class='rotator animation'></div>
<h3>Is it this one?</h3>
<div class='rotator transition'></div>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js'></script>
<script>window.onload = function () {
    document.getElementsByClassName('transition')[0].classList.add('translateAnimationClass');
};
//# sourceURL=pen.js
</script>
</body>
屏蔽举报回复
关注恭听：
18:26
<!DOCTYPE html><html class=''><head><script src='//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js'></script><script src='//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js'></script><script src='//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/Zeaklous/pen/IdlHx" /><style class="cp-pen-styles">.rotator {width: 100px;height: 100px;margin: 20px;background-color:teal;}.transition {-webkit-transition: all 1000s linear;-moz-transition: all 1000s linear;-ms-transition: all 1000s linear;-o-transition: all 1000s linear;transition: all 1000s linear;}.translateAnimationClass {-webkit-transform: rotateX(43200deg) rotateY(14400deg);-moz-transform: rotateX(43200deg) rotateY(14400deg);-ms-transform: rotateX(43200deg) rotateY(14400deg);-o-transform: rotateX(43200deg) rotateY(14400deg);transform: rotateX(43200deg) rotateY(14400deg);}.animation {-webkit-animation: rotator 25s linear infinite;-moz-animation: rotator 25s linear infinite;-ms-animation: rotator 25s linear infinite;-o-animation: rotator 25s linear infinite;animation: rotator 25s linear infinite;}@-webkit-keyframes rotator {0% { -webkit-transform: rotateX(0deg) rotateY(0deg); }100% { -webkit-transform: rotateX(1080deg) rotateY(360deg); }}@-moz-keyframes rotator {0% { -moz-transform: rotateX(0deg) rotateY(0deg); }100% { -moz-transform: rotateX(1080deg) rotateY(360deg); }}@-ms-keyframes rotator {0% { -ms-transform: rotateX(0deg) rotateY(0deg); }100% { -ms-transform: rotateX(1080deg) rotateY(360deg); }}@-o-keyframes rotator {0% { -o-transform: rotateX(0deg) rotateY(0deg); }100% { -o-transform: rotateX(1080deg) rotateY(360deg); }}@keyframes rotator {0% { transform: rotateX(0deg) rotateY(0deg); }100% { transform: rotateX(1080deg) rotateY(360deg); }}</style></head><body><h3>But... Which is the animation?</h3><div class='rotator animation'></div><h3>Is it this one?</h3><div class='rotator transition'></div><script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js'></script><script>window.onload = function () {document.getElementsByClassName('transition')[0].classList.add('translateAnimationClass');};//# sourceURL=pen.js</script></body></html>
屏蔽举报回复
关注恭听：
18:25
<!DOCTYPE html><html class=''><head><script src='//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js'></script><script src='//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js'></script><script src='//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/LFeh/pen/ICkwe" /><link rel='stylesheet prefetch' href='//codepen.io/assets/reset/normalize.css'><style class="cp-pen-styles">body {font-family: helvetica;font-size: 18px;text-align: center;}.accordion {display: inline-block;text-align: left;margin: 1%;width: 70%;}.accordion:hover .accordion-content {max-height: 300px;}.accordion-content {-webkit-transition: max-height 1s;-moz-transition: max-height 1s;-ms-transition: max-height 1s;-o-transition: max-height 1s;transition: max-height 1s;background: #e5feff;overflow: hidden;max-height: 0;}.accordion-inner {padding: 0 15px;}.accordion-toggle {-webkit-transition: background .1s linear;-moz-transition: background .1s linear;-ms-transition: background .1s linear;-o-transition: background .1s linear;transition: background .1s linear;background: #00b8c9;border-radius: 3px;color: #fff;display: block;font-size: 30px;margin: 0 0 10px;padding: 10px;text-align: center;text-decoration: none;}.accordion-toggle:hover {background: #00727d;}</style></head><body><div class="accordion"> <a href="#" class="accordion-toggle">Hover for height animate</a><div class="accordion-content"><div class="accordion-inner"> <p>For animate the "height" of element with CSS Transitions you need use "max-height".</p><p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p> </div></div></div><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script></body></html>
屏蔽举报回复
关注恭听：
18:24
<!DOCTYPE html><html class=''><head><script src='//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js'></script><script src='//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js'></script><script src='//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/sashtown/pen/DfdHh" /><script src='//codepen.io/assets/libs/prefixfree.min.js'></script><style class="cp-pen-styles">.button {display: inline-block;margin-top: 10%;padding: 1em 2em;font-size: 2em;color: #fff;font-family: arial, sans-serif;text-decoration: none;border-radius: 0.3em;position: relative;background-color: #ccc;background-image: linear-gradient(to top, #6d8aa0, #8ba2b4);-webkit-backface-visibility: hidden;z-index: 1;}.button:after {position: absolute;content: '';top: 0;left: 0;width: 100%;height: 100%;border-radius: 0.3em;background-image: linear-gradient(to top, #ca5f5e, #d68584);transition: opacity 0.5s ease-out;z-index: 2;opacity: 0;}.button:hover:after {opacity: 1;}.button span {position: relative;z-index: 3;}body {text-align: center;background: #ddd;}</style></head><body><a class="button" href="#"><span>BUTTON</span></a></body></html>
屏蔽举报回复
关注恭听：
18:22
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta name="robots" content="noindex, nofollow"><meta name="googlebot" content="noindex, nofollow"><script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script><link rel="stylesheet" type="text/css" href="/css/result-light.css"><style type="text/css">.quotes {display: none;}</style><title> by jfriend00</title></head><body><h2 class="quotes">first quote</h2><h2 class="quotes">second quote</h2><script type='text/javascript'>//<![CDATA[(function() {var quotes = $(".quotes");var quoteIndex = -1;function showNextQuote() {++quoteIndex;quotes.eq(quoteIndex % quotes.length).fadeIn(2000).delay(2000).fadeOut(2000, showNextQuote);}showNextQuote();})();//]]></script></body></html>
屏蔽举报回复
关注恭听：
18:19
<!DOCTYPE html><html class=''><head><script src='//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js'></script><script src='//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js'></script><script src='//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/AMKohn/pen/EKJHf" /><script src='//codepen.io/assets/libs/prefixfree.min.js'></script><style class="cp-pen-styles">@import url(http://fonts.googleapis.com/css?family=Varela+Round);html, body { background: #333 url("http://codepen.io/images/classy_fabric.png"); }.slides {padding: 0;width: 609px;height: 420px;display: block;margin: 0 auto;position: relative;}.slides * {user-select: none;-ms-user-select: none;-moz-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-webkit-touch-callout: none;}.slides input { display: none; }.slide-container { display: block; }.slide {top: 0;opacity: 0;width: 609px;height: 420px;display: block;position: absolute;transform: scale(0);transition: all .7s ease-in-out;}.slide img {width: 100%;height: 100%;}.nav label {width: 200px;height: 100%;display: none;position: absolute; opacity: 0;z-index: 9;cursor: pointer;transition: opacity .2s;color: #FFF;font-size: 156pt;text-align: center;line-height: 380px;font-family: "Varela Round", sans-serif;background-color: rgba(255, 255, 255, .3);text-shadow: 0px 0px 15px rgb(119, 119, 119);}.slide:hover + .nav label { opacity: 0.5; }.nav label:hover { opacity: 1; }.nav .next { right: 0; }input:checked + .slide-container .slide {opacity: 1;transform: scale(1);transition: opacity 1s ease-in-out;}input:checked + .slide-container .nav label { display: block; }.nav-dots { width: 100%; bottom: 9px; height: 11px; display: block; position: absolute; text-align: center;}.nav-dots .nav-dot { top: -5px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6);}.nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8);}input#img-1:checked ~ .nav-dots label#img-dot-1,input#img-2:checked ~ .nav-dots label#img-dot-2,input#img-3:checked ~ .nav-dots label#img-dot-3,input#img-4:checked ~ .nav-dots label#img-dot-4,input#img-5:checked ~ .nav-dots label#img-dot-5,input#img-6:checked ~ .nav-dots label#img-dot-6 { background: rgba(0, 0, 0, 0.8);}</style></head><body><ul class="slides"><input type="radio" name="radio-btn" id="img-1" checked /><li class="slide-container"> <div class="slide"> <img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" /></div> <div class="nav"> <label for="img-6" class="prev">‹</label> <label for="img-2" class="next">›</label> </div></li><input type="radio" name="radio-btn" id="img-2" /><li class="slide-container"><div class="slide"><img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" /></div> <div class="nav"> <label for="img-1" class="prev">‹</label> <label for="img-3" class="next">›</label> </div></li><input type="radio" name="radio-btn" id="img-3" /><li class="slide-container"><div class="slide"><img src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" /></div> <div class="nav"> <label for="img-2" class="prev">‹</label> <label for="img-4" class="next">›</label> </div></li><input type="radio" name="radio-btn" id="img-4" /><li class="slide-container"><div class="slide"><img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" /></div> <div class="nav"> <label for="img-3" class="prev">‹</label> <label for="img-5" class="next">›</label> </div></li><input type="radio" name="radio-btn" id="img-5" /><li class="slide-container"><div class="slide"><img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" /></div> <div class="nav"> <label for="img-4" class="prev">‹</label> <label for="img-6" class="next">›</label> </div></li><input type="radio" name="radio-btn" id="img-6" /><li class="slide-container"><div class="slide"><img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" /></div> <div class="nav"> <label for="img-5" class="prev">‹</label> <label for="img-1" class="next">›</label> </div></li><li class="nav-dots"><label for="img-1" class="nav-dot" id="img-dot-1"></label><label for="img-2" class="nav-dot" id="img-dot-2"></label><label for="img-3" class="nav-dot" id="img-dot-3"></label><label for="img-4" class="nav-dot" id="img-dot-4"></label><label for="img-5" class="nav-dot" id="img-dot-5"></label><label for="img-6" class="nav-dot" id="img-dot-6"></label></li></ul></body></html>
屏蔽举报回复