css3实现动画效果完整代码demo

最新推荐文章于 2025-06-28 17:06:15 发布

原创

最新推荐文章于 2025-06-28 17:06:15 发布 · 5.8k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #动画效果 #完整代码

本文介绍了如何使用CSS3实现三种动画效果：过渡渐隐，涟漪效果以及元素的放大缩小。提供了相应的完整代码示例，帮助读者理解和应用这些效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

过渡渐隐

适合两张图片调整其中一个透明度，完整代码：


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <title> CSS3实现过渡渐隐动画效果 </title>
	
</head>
<style>
.pics{
    position: relative;
    width: 600px;
    height: 400px;
    margin: 100px auto;
}
.pic1{
    width: 600px;
    height: 400px;
}
@keyframes picDraw {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.pic2{
    position: absolute;
    width: 600px;
    height: 400px;
    left: 0;
    top: 0;
    -webkit-animation: picDraw 5s ease-in-out infinite;
}
</style>
<body>