一款CSS3中国风水墨动画效果,文字陪有声朗读,同步!
使用方法
页面需要用到的CSS3样式
*{ padding: 0; margin: 0; } #box{ width: 100%; height: 100%; position: relative; animation: run1 8s; } @keyframes run1{ from{ opacity: 0; } to{ opacity: 1; } } #box img.bj{ width: 100%; } #box img.sc1{ width: 15%; position: absolute; top: 60%; left: 85%; animation: run2 78s linear infinite 6s; } @keyframes run2{ from{ left:85%; } to{ left: 25% } } #box img.sc2{ width: 12%; position: absolute; top: 30%; left: 50%; animation: run3 20s linear infinite 4s; } @keyframes run3{ 0%{ width: 12%; } 50%{ width: 15%; } 100%{ 12% } } #box img#lsm{ position: absolute; top: 0; left: -900px; animation: run4 80s linear infinite 4s; } @keyframes run4{ from{ left: -900px; } to{ left: 0px; } }