Transition属性实现触摸动画变大，实现从中心扩大特效

最新推荐文章于 2021-09-24 09:58:34 发布

dingjingchao

最新推荐文章于 2021-09-24 09:58:34 发布

阅读量3.1k

点赞数

分类专栏：即兴知识点

本文链接：https://blog.csdn.net/dingjingchao/article/details/77367529

版权

即兴知识点专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test{

            /*必须设置 否则没动画*/
            width: 210px;

            transition: all 1s;

            /*transition-duration:0.6s;*/
            /*!*     以下三值为默认值，稍后会详细介绍 *!*/
            /*transition-property: all;*/
            /*transition-timing-function: ease;*/
            /*transition-delay: 0s;*/

        }
        .test:hover{
            /*
            设置变动后的宽度。
            设置图片位置可实现图片从中间放大
            */
            width: 500px;
            margin-top: -100px;
            margin-left: -100px;
        }
    </style>
</head>
<body>
<!--自己实现   +css-->
<div style="overflow: hidden; height: 250px; width: 210px;" ><img class="test"   src="http://mat1.gtimg.com/www/images/qq2012/guanjia2.png"/></div>





<!--百度的答案-->
<div style=" width:300px; height:300px;margin-left:auto; margin-right:auto; overflow:hidden; margin-top:100px;">
    <img id="img" οnmοuseοver="bigger()" οnmοuseοut="smaller()" src="http://mat1.gtimg.com/www/images/qq2012/guanjia2.png" style="cursor:pointer;width:300px;height:300px; transition:all 1s ease-out 0s; perspective-origin:bottom;"/>
    <script type="text/javascript">
        var img = document.getElementById('img');
        function bigger(){
            img.style.width = '400px';
            img.style.height = '400px';
            img.style.marginTop = "-50px";
            img.style.marginLeft = "-50px";
        }

        function smaller(){
            img.style.width = '300px';
            img.style.height = '300px';
            img.style.marginTop = "0px";
            img.style.marginLeft = "0px";
        }

    </script>
</body>
</html>

dingjingchao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Transition属性实现触摸动画变大，实现从中心扩大特效

html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> .test{ /*必须设置否则没动画*/ width: 210px; transition: all 1s； /*tr
复制链接

扫一扫