css3满屏动画效果

在网页设计中，动画效果能够极大地增强用户体验，而使用CSS3制作动画效果，可以让我们做到自主控制动画，易于实现，而且不需要JS的介入。

/* 创建一个全屏动画效果 */.fullscreen {
    width: 100vw;
      /* 100%视窗宽度 */height: 100vh;
     /* 100%视窗高度 */position: relative;
}
/* 创建一个收缩动画的容器 */.shrink {
    transform: scale(0);
    transition: all 1s ease;
}
/* 创建一个放大动画的容器 */.expand {
    transform: scale(1.5);
    transition: all 1s ease;
}
/* 让容器动态改变大小 */.fullscreen:hover .shrink {
    transform: scale(1);
}
.fullscreen:hover .expand {
    transform: scale(2);
}
    

上面的代码实现了一个简单的收缩动画和放大动画。将这些代码应用到想要添加动画效果的HTML对象中即可，例如：

div class="fullscreen">
    img src="example.jpg" class="shrink expand">
    /div>
    

这段代码创建了一个全屏容器，并添加了一个图片对象。图片对象同时拥有收缩和扩大的功能，当鼠标悬停在全屏容器上时，图片对象像拔河比赛一样收缩和扩大。

以上这个例子只是CSS3动画效果的冰山一角。CSS3提供了很多强大的动画效果，例如淡入淡出、旋转、翻转、滑动、旋转等等。敬请尝试！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！