css3 transition \u548c animation\u5b9e\u73b0\u6a2a\u5411\u3001\u7eb5\u5411 \u6eda\u52a8\u3001\u8d70\u9a6c\u706f( marquee \u5728H5\u5df2\u88ab\u5e9f\u5f03)<\/p>\n
\u6a2a\u5411\uff1a<\/p>\n
transition\u5199\u6cd5<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>marquee<\/title>\r\n<style type=\"text\/css\">\r\nbody{\r\npadding: 0;\r\nmargin: 0;\r\n}\r\n#demo{\r\nwidth: 100%;\r\nheight: 50px;\r\nbackground: #eee;\r\nposition: fixed;\r\n}\r\n#demo>#spa{\r\nword-break:keep-all;\r\nwhite-space:nowrap;\r\nposition: absolute;\r\nleft: 100%;\r\nfont-size: 30px;\r\nline-height: 50px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"demo\"><span id='spa' >\u8d70\u9a6c\u706f\u6548\u679c<\/span><\/div>\r\n<\/body>\r\n<script type=\"text\/javascript\">\r\n var spa = document.getElementById(\"spa\");\r\n var spaw = spa.offsetWidth;\r\n var bodyw = document.body.clientWidth;\r\n var w = 0-(spaw+bodyw);\r\n spa.style.transform = 'translate(' + w + 'px, 0px)';\r\n spa.style.transition = 'transform 5s linear';\r\n window.setInterval(function(){\r\n spa.style.transform = 'translate(0px, 0px)';\r\n spa.style.transition = 'transform 0s linear';\r\n window.setTimeout(function(){\r\n spa.style.transform = 'translate(' + w + 'px, 0px)';\r\n spa.style.transition = 'transform 5s linear';\r\n },100)\r\n },5000)\r\n<\/script>\r\n<\/html><\/pre>\nanimation\u5199\u6cd5<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>marquee<\/title>\r\n<style type=\"text\/css\">\r\n#demo{\r\nwidth: 100%;\r\nheight: 50px;\r\nbackground: #eee;\r\nposition: fixed;\r\n}\r\n#demo>span{\r\nword-break:keep-all;\r\nwhite-space:nowrap;\r\nposition: absolute;\r\nleft: 100%;\r\nfont-size: 30px;\r\nline-height: 50px;\r\n}\r\n#demo>.a{\r\n-webkit-animation:demo 5s infinite;\r\n-webkit-animation-timing-function:linear;\r\n}\r\n<\/style>\r\n<style id='asty'><\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"demo\"><span id='spa' class='a'>\u8d70\u9a6c\u706f\u6548\u679c<\/span><\/div>\r\n<\/body>\r\n<script type=\"text\/javascript\">\r\n var spa = document.getElementById(\"spa\");\r\n var width = 0-(spa.offsetWidth);\r\n var style = document.getElementById(\"asty\");\r\n style.innerHTML = '@-webkit-keyframes demo{from {left: 100%;}to {left: '+width+'px;}}';\r\n spa.className = 'a';\r\n<\/script>\r\n<\/html><\/pre>\n <\/p>\n
<\/p>\n
\u7eb5\u5411\uff1a<\/p>\n
\u4e00\u3001\u9010\u6761\u65e0\u7f1d\u6eda\u52a8\uff08\u65e0\u95ea\u52a8\uff09<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>marquee<\/title>\r\n <style type=\"text\/css\">\r\n @-webkit-keyframes scrollText1 {\r\n 0%{\r\n -webkit-transform: translateY(0px);\r\n }\r\n 20%{\r\n -webkit-transform: translateY(-30px);\r\n }\r\n 40%{\r\n -webkit-transform: translateY(-60px);\r\n }\r\n 60%{\r\n -webkit-transform: translateY(-90px);\r\n }\r\n 80%{\r\n -webkit-transform: translateY(-120px);\r\n }\r\n 100%{\r\n -webkit-transform: translateY(-150px);\r\n }\r\n }\r\n\r\n @keyframes scrollText1 {\r\n 0%{\r\n transform: translateY(0px);\r\n }\r\n 20%{\r\n transform: translateY(-30px);\r\n }\r\n 40%{\r\n transform: translateY(-60px);\r\n }\r\n 60%{\r\n transform: translateY(-90px);\r\n }\r\n 80%{\r\n transform: translateY(-120px);\r\n }\r\n 100%{\r\n transform: translateY(-150px);\r\n }\r\n }\r\n\r\n .box3{\r\n position: relative;\r\n top: 20px;\r\n left: 20px;\r\n width: 200px;\r\n height: 30px;\r\n overflow: hidden;\r\n border:1px solid #ccc;\r\n }\r\n\r\n .border3{\r\n top: 0px;\r\n -webkit-animation:scrollText1 8s infinite cubic-bezier(1,0,0.5,0) ;\r\n animation:scrollText1 8s infinite cubic-bezier(1,0,0.5,0) ;\r\n }\r\n\r\n .border3 div{\r\n height: 30px;\r\n }\r\n\r\n .border3:hover{\r\n animation-play-state:paused;\r\n -webkit-animation-play-state:paused;\r\n }\r\n <\/style>\r\n\r\n<\/head>\r\n<body>\r\n<div class=\"box3\">\r\n <div class=\"border3\">\r\n <div>This is a test 1.<\/div>\r\n <div>This is a test 2.<\/div>\r\n <div>This is a test 3.<\/div>\r\n <div>This is a test 4.<\/div>\r\n <div>This is a test 5.<\/div>\r\n <div>This is a test 1.<\/div>\r\n <\/div>\r\n<\/div>\r\n<\/body>\r\n\r\n<\/html><\/pre>\n <\/p>\n
\u4e8c\u3001<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>marquee<\/title>\r\n <style type=\"text\/css\">\r\n .marquee div {\r\n display: block;\r\n width: 100%;\r\n text-align: center;\r\n position: absolute;\r\n overflow: hidden;\r\n -webkit-animation: marquee 5s linear infinite;\r\n animation: marquee 5s linear infinite;\r\n }\r\n @keyframes marquee {\r\n 0% {\r\n transform: translateY(-50);\r\n }\r\n 100% {\r\n transform: translateY(-230px); \/\/ \u6bcf\u884c\u9ad850\r\n }\r\n }\r\n <\/style>\r\n\r\n<\/head>\r\n<body>\r\n<div class=\"marquee\">\r\n <div>\r\n <p class=\"label_txt\">\u6211\u662f\u6700\u540e\u4e00\u4e2a<\/p>\r\n <p>\u8ba9\u6211\u6389\u4e0b\u773c\u6cea\u7684 \u4e0d\u6b62\u6628\u591c\u7684\u9152<\/p>\r\n <p>\u8ba9\u6211\u4f9d\u4f9d\u4e0d\u820d\u7684 \u4e0d\u6b62\u4f60\u7684\u6e29\u67d4<\/p>\r\n <p>\u4f59\u8def\u8fd8\u8981\u8d70\u591a\u4e45 \u4f60\u6525\u7740\u6211\u7684\u624b<\/p>\r\n <p>\u8d70\u5230\u7389\u6797\u8def\u7684\u5c3d\u5934 \u5750\u5728(\u8d70\u8fc7)\u5c0f\u9152\u9986\u7684\u95e8\u53e3<\/p>\r\n <p class=\"label_txt\">\u6211\u662f\u6700\u540e\u4e00\u4e2a<\/p>\r\n <\/div>\r\n<\/div><\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"