css3动画文字自动缩放图片自动移动效果的制作

最新推荐文章于 2024-02-01 13:45:13 发布

原创最新推荐文章于 2024-02-01 13:45:13 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css3

本文介绍了一种使用CSS实现的旋转和倾斜动画效果，通过关键帧动画控制元素的旋转和位移，展示了如何为网页元素添加生动的动态效果。

布局就不写了直接上样式

    	.p_tx a{animation: rotate 0.3s ease-in-out alternate infinite;margin-left:20px;}
    	.p_tx1 img{animation: skew 1.5s ease-in-out alternate infinite;display:inline-block;}
    	@keyframes rotate{
    		from{
    			transform:rotateY(-40deg);
    		}to{
    			transfrom:rotateX(40deg);
    		}
    	}
    		@keyframes skew{
    		0%{
    			transform:translateX(200PX);
    		}50%{
    			transfrom:translateX(1000PX);
    		}10%{
    			transform:translateX(200PX);
    		}
    	}