CSS圖片動畫效果PPT是一種非常實用的技巧,它可以用來制作各種視覺效果,使你的PPT更加吸引人。下面我們介紹一些常用的CSS圖片動畫效果。
首先是淡入淡出。可以使用以下代碼:
.fade-in { animation: fadeIn ease 3s; -webkit-animation: fadeIn ease 3s; -moz-animation: fadeIn ease 3s; -o-animation: fadeIn ease 3s; -ms-animation: fadeIn ease 3s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
接下來是彈跳效果:
.bounce { animation: bounce 1s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } }
最后是旋轉效果:
.rotate { animation: rotate 2s infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
以上就是三種常用的CSS圖片動畫效果,可以讓你的PPT更加有趣和吸引人。
上一篇css圖片原始尺寸
下一篇css圖片占全屏不重復