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

最新推荐文章于 2024-07-27 10:37:47 发布

就像风1样

最新推荐文章于 2024-07-27 10:37:47 发布

阅读量5.7k

点赞数 1

分类专栏： css CSS样式专栏文章标签： css3 动画效果完整代码

本文链接：https://blog.csdn.net/qq_42221334/article/details/98594119

版权

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

摘要由CSDN通过智能技术生成

过渡渐隐

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


<!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: