当前位置： 移动技术网 > IT编程>网页制作>HTML > css简单的动画

css简单的动画

2020年07月22日  | 移动技术网IT编程  | 我要评论

简单滴动画效果,鼠标移到图片就能执行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 400px;
            height: 600px;
            position: relative;
        }
        
        .img1,
        .img2 {
            width: 300px;
            height: 400px;
            position: absolute;
            top: 0px;
            left: 0px;
            transition: all 3s;
            backface-visibility: hidden;
            /*让页面上背面的元素不可见**/
        }
        
        .img2 {
            transform: rotateY(180deg);
        }
        
        #box:hover .img1 {
            transform: rotateY(180deg);
        }
        
        #box:hover .img2 {
            transform: rotateY(0deg);
        }
    </style>

</head>

<body>
    <div id="box">
        <img src="./img/你的名字2.jpg" alt="没有啦!咋办" class="img1">
        <img src="./img/你的名字1.jpg" alt="没有啦!咋办" class="img2">
    </div>

</body>

</html>

在这里插入图片描述

本文地址：https://blog.csdn.net/weixin_46474458/article/details/107483863

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网