css3动画放大图片代码（css图片放大动画效果代码）

今天给各位分享css3动画放大图片代码的知识，其中也会对css图片放大动画效果代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、css3 由小变大然后一直旋转的动画怎么做
• 2、用css的 a:hover img 放大图片时怎么让放大后的图片 从原图片的中心放大
• 3、跑马灯似的图片滚动代码，如何做鼠标onmouse的悬停放大？代码怎么写？非要js或者css么？
• 4、css3使用animation让页面加载进来时图片从中心放大

css3 由小变大然后一直旋转的动画怎么做

这个只用css不能完全实现，的配合js的定时器来完成，下面是代码：

!DOCTYPE html  

html  

head  

    titleHTML5/title  

    meta charset="utf-8"

    meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /  

    style type="text/css"

        img{width: 200px;}

        .div1{width: 200px;height: 200px;border:1px solid #000;margin: 150px auto;}

        .animate1{

            -webkit-animation:  move1 2s infinite;

        }

        .animate2{

            -webkit-animation:  move2 1s infinite;

        }

        @-webkit-keyframes move1{

            0%{

                -webkit-transform:scale(1);

            }

            100%{

                -webkit-transform:scale(1.5);

            }

        }

        @-webkit-keyframes move2{

            0%{

                -webkit-transform: rotateZ(0deg) scale(1.5);

                -webkit-transform:;

            }

            100%{

                -webkit-transform: rotateZ(360deg) scale(1.5);

            }

        }

    /style

/head  

body 

    div class="div1 animate2"/div

    script type="text/javascript"

        window.onload=function(){

            var oDiv=document.querySelector(".div1");

            oDiv.className="div1 animate1";

            setTimeout(function(){

                oDiv.className="div1 animate2";

            },2000);

        }

    /script  

/body  

/html

原理是：当animate1执行完后，把这个class去掉，换成animate2。其中animate1的执行时间，刚好是js定时器的时间。

当然这里有个问题，js定时的时间不一定会非常的吻合css的动画时间，你可以根据情况作出适当的时间调整。

用css的 a:hover img 放大图片时怎么让放大后的图片 从原图片的中心放大

用CSS3中的transfrom:scale{x,y}来放大，如下：

style

*{margin:0;padding:0;}

div{border:solid 1px #333;width:40px;height:40px;}

div img{width:40px;height:40px;transition:all 0.3s;}

div img:hover{transfrom:scale{2,2};}//从中心放大两部

/style

divimg src="图片地址" alt=""//div

扩展资料：

注意事项

transfrom是利用线性代数来存放一个控件(或许是图片)的具体信息.(由于可以通过transfrom直接操作控件.所以肯定直接或者间接的存储着点的信息和控件的大小等信息)

1、移动.左移右移或者上移下移:

CGAffineTransformMakeTranslation(X偏移量, Y偏移量);

CGAffineTransformTranslate(在某个transform的基础上-一般为自身, X偏移量, Y偏移量);

2、改变大小(形变):

CGAffineTransformMakeScale(宽缩放的倍数, 高缩放的倍数);

CGAffineTransformScale(在某个transform的基础上-一般为自身, 宽缩放的倍数, 高缩放的倍数);

跑马灯似的图片滚动代码，如何做鼠标onmouse的悬停放大？代码怎么写？非要js或者css么？

首先是必须要有js跟CSS配合起来的，当然两者都不一定，例如js也可以实现动画效果，只是麻烦，要简单点直接用JQ里面的animate()方法配合css控制动画，又或者直接一点使用CSS3实现动画，注意是css3，但就你的代码写的是走马灯这种早就没人用的写法，目测你是个初学者，所以我的回答你并不会采纳，因为你看不懂，现在一般都用脚本写轮播图，没人用走马灯的了。

CSS3的悬停我可以写给你，JQ目测写出来对你也没多大用处,到时还得绑定什么的你一搞不出觉得我瞎说不采纳我那更悲剧

给img标签加上class或者给marquee加上class，否则怎么搞，我这里就以直接给img加上class="animate"写给你了

.animate:hover{-webkit-transform:scale(1.25,1.25);transform:scale(1.25,1.25);box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4);-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;-ms-transition:all .4s;transition:all .4s;}

里面的大小什么都是可以控制的，包括时间，这些就拜托您上W3C看看，我已经打了很多东西了，你要有良心就采纳，采纳后可以追问，否则别追问我问题了哈，我是web前端，语气有点叼，因为我被迫来问答里混，原谅我一个技术人员被叫来干这些鸟不拉屎的工作，所以带点脾气

css3使用animation让页面加载进来时图片从中心放大

这个简单,先讲一下原理

先设置图片垂直水平居中(position：absolute与translate3d 相结合)    class为img

2.可以编写自定义animation    0的时候width为0，100%的时候width为你想要的宽度,高一样，其他的改设置的都设置一下  class为img active(这里是两个class) 来使用这个animation

3.在window.onload的事件下执行   只需给  img再加一个active的class就ok了

注意：我之前有在写自定义动画的时候在微信端执行不了动画，之后找到原因，给animation加一个延迟  100ms就行了   如果你遇到这种问题可以试试。

关于css3动画放大图片代码和css图片放大动画效果代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。