隨著css3的主鍵強大,以前很多用javascript寫的特效好多都能用css來寫了,這里給js不好的同學帶來的很多方便,
話不多說,直接來上一個demo.
html部分
<div className="animate box">
<span>不一樣的WEB前端工程師</span></div>123
css部分
.animate { font-size: 40px; margin: 100px 0 0;}.animate span { display: inline-block;}.box span { color: #fff; opacity: 0; transform: translate(-150px, 0) scale(.5); animation: leftRight 1s forwards;}@keyframes leftRight {
40% { transform: translate(30px, 0) scale(.7); opacity: 1; color: #000; }
60% { color: #fff; }
80% { transform: translate(0) scale(2); opacity: 0; }
100% { transform: translate(0) scale(1); opacity: 1; }}1234567891011121314151617181920212223242526272829303132333435
自己復制在編輯器打開看看效果吧.