最近在学习CSS动画,发现一种比较有趣的动画效果是两个图片交替扩散。在这篇文章里,我将会介绍如何使用CSS实现这种动画效果。/* 代码片段1 */ @keyframes ripple { 0% { t
最近在学习CSS动画,发现一种比较有趣的动画效果是两个图片交替扩散。在这篇文章里,我将会介绍如何使用CSS实现这种动画效果。
/* 代码片段1 */ @keyframes ripple { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(15); opacity: 0; } } .ripple { position: absolute; border-radius:50%; opacity: 0; animation-name: ripple; animation-duration: 1s; animation-timing-function: ease-out; } .ripple.blue { background: blue; } .ripple.green { background: green; }
代码片段1是实现该动画效果的核心代码。该代码定义了一个名为ripple的类,其中包含一个用于波纹扩散动画的keyframes。如果你想让波纹扩散成另一种颜色,你只需要更改.ripple类的background属性即可。
/* 代码片段2 */ .container { position: relative; width: 300px; height: 300px; } .image { position: relative; } .image img { position: absolute; width: 100%; height: 100%; object-fit: cover; } .image:hover .ripple:first-child { animation-delay: 0s; opacity: 1; } .image:hover .ripple:last-child { animation-delay: 0.5s; opacity: 1; } .image:hover .ripple { left: 50%; top: 50%; } .image:hover .ripple.blue:first-child { border: 3px solid blue; } .image:hover .ripple.green:last-child { border: 3px solid green; }
代码片段2是用于实现两个图片交替扩散的代码。我们需要将两个图片放在一个容器里面,然后在每个图片上分别增加一个波纹扩散元素。
当鼠标在图片上悬停时,我们需要让波纹扩散元素透明度变为1,并且以0.5s的时间差依次扩散。
如果每个图片的扩散波纹颜色不同,我们需要为每个波纹扩散元素增加不同的样式。你可以参考代码片段2中的.blue和.green类。
好了,以上就是实现两个图片交替扩散动画的所有代码。如果你发现了什么问题,欢迎在评论区中提出。
粉丝
0
关注
0
收藏
0