今天閒著沒事，看到隔壁老張在用jq寫文字向上的輪播效果，遂想到用css3的動畫也可以做到，然後就隨手寫了點，向上的過渡距離不是很精確，有需要的自行修改，歡迎提出意見。
css部分
div{
width:350px;
height: 150px;
border: 1px solid;
overflow: hidden;
.ul li{
width: 300px;
height: 38px;
.ul {
height:220px;
position:relative;
transition: all 2s;
animation:aaa 15s infinite 2s running;
@keyframes aaa {
0% {
transform:translatey(0px);
15% {
transform:translatey(-38px);
25% {
transform:translatey(-72px);
50% {
transform:translatey(-120px);
75% {
transform:translatey(-220px);
100% {
transform:translatey(-400px);
.ul:hover {
animation-play-state:paused;
cursor:pointer;
html部分：
css3文字效果
text shadow 在css3中我們可以給單調的文字加上陰影效果，賦予文字美感 text shadow h shadow v shadow blur color h shadow 必須 水平陰影的位置，允許負值 v shadow 必需 垂直陰影的位置，允許負值 blur 可選 模糊的距離 銳化陰...
css3 文字陰影
text shadow 基本語法 textshadow none length none shadow shadow textshadow none color color length 表示由浮點數字和單位識別符號組成的長度值，可為負值，指定陰影的水平延伸距離 color 表示顏色。陰影位於左上角...
CSS3 文字陰影
例項 基礎的文字陰影效果 h1語法 text shadow h shadow v shadow blur color 注釋 text shadow 屬性向文字新增乙個或多個陰影。該屬性是逗號分隔的陰影列表，每個陰影有兩個或三個長度值和乙個可選的顏色值進行規定。省略的長度是 0。值描述 h shado...