css3动画方块移动翻转代码（css 翻转动画）

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

本文目录一览：

• 1、css3 由小变大然后一直旋转的动画怎么做
• 2、css3的常用变形方法有哪些?写出核心代码
• 3、css3圆环旋转效果动画怎么做
• 4、要使用js或者css3做一个网页动画，代码怎么打？
• 5、css3 如何让一个图片不断翻转
• 6、CSS3动画中怎么一边移动一边旋转？

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的动画时间，你可以根据情况作出适当的时间调整。

css3的常用变形方法有哪些?写出核心代码

css3中的变形

Chrome和safai需前缀加-webkit-，Foxfire需加前缀-moz-

1,旋转 rotate()

div{

width: 300px;

height: 300px;

transform:rotate(20deg);

}

2,扭曲 skew()

div {

width: 300px;

height: 300px;

transform:skew(45deg,-10deg);

}

3,缩放 scale()

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

也可以只缩放 x轴，或只缩放y轴。

div {

width: 200px;

height: 200px;

background: orange;

}

.wrapper div:hover {

opacity: .5;

transform: scale(0.8);

}

4,位移 translate()

translate()函数可以将元素向指定的方向移动，类似于position中的relative。

或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，

而不影响在X、Y轴上的任何Web组件。

5，原点 transform-origin

CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。

但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素

原点不在元素的中心位置，以达到需要的原点位置。

div {

transform: skew(45deg);

transform-origin:top;

}

6,过渡

div {

width: 200px;

height: 200px;

background: red;

margin: 20px auto;

-webkit-transition-property: all;

transition-property: all; //指定过渡或动态模拟的css属性 （all是指所有）

-webkit-transition-duration:5s;

transition-duration:5s; //指定完成过渡的时间

-webkit-transition-timing-function: linear;

transition-timing-function: linear; //指定过渡的函数 linear/ease/ease-in/ease-out/ease-in-out/cubicbezier(n,n,n,n) n为0-1

-webkit-transition-delay: .18s;

transition-delay:.18s; //指定开始出现的延迟时间

}

div:hover {

width: 400px;

height:400px;

}

7，Keyframes被称为关键帧，css3中以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{...}”

@keyframes changecolor{

0%{

background: red;

}

20%{

background:blue;

}

40%{

background:orange;

}

60%{

background:green;

}

80%{

background:yellow;

}

100%{

background: red;

}

}

div {

width: 300px;

height: 200px;

}

div:hover {

animation: changecolor 5s ease-out .2s;

}

等价于

div:hover{

animation-name:changecolor;

animation-duration:5s;

animation-timing-function:ease-out;

animation-delay:1;

animation-iteration-count:infinite;//动画播放次数 整数。

animation-play-state:paused;//主要用来控制元素动画的播放状态。

animation-direction:alternate;//动画方向，normal每次循环向前，alternate偶次向前，奇数相反。

animation-fill-mode: both; //设置动画时间外属性none、forwards、backwords和both

}

css3圆环旋转效果动画怎么做

1、首先新建一个html空白文档，取名字叫做css3动画，保存一下。

2、然后写html结构，只需要一个div元素即可，class名字叫做img

3、设置其边框为不同的颜色，边框宽度设置成100px。

4、因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。

5、接下来就是关键的步骤了，也就是添加动画效果。输入以下代码

6、来看一下最后的效果，还是不错的。

要使用js或者css3做一个网页动画，代码怎么打？

这个可以用 js 实现 但是需要旋转的js插件 如果不旋转 可以不用插件就能实现

css3 如何让一个图片不断翻转

/* css3 让一个图片不断翻转示例代码 */

#gavinPlay{

/* background:color url x y repeat 图片来自百度图片，按需要更换 */

background:red url(";fm=80") center no-repeat;

/* background-size:auto auto || cover 代表以宽或高填满元素背景 */

background-size:cover;

/* 随便设置宽高值，测试 */

width:200px;

height:200px;

/* 设置默认样式，开启3d硬件加速 */

-webkit-transform:translate3d(0,0,0);

-moz-transform:translate3d(0,0,0);

transform:translate3d(0,0,0);

/* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放; */

-webkit-animation:play 3s linear infinite;

-moz-animation:play 3s linear infinite;

animation:play 3s linear infinite;

}

@-webkit-keyframes play{

0%  {

/*

水平翻转

*/

-webkit-transform:rotateY(0deg);

/*

垂直翻转

-webkit-transform:rotateX(0deg);

顺时针旋转

-webkit-transform:rotate(0deg);

逆时针旋转

-webkit-transform:rotate(0deg);

*/

}

100% {

/* 水平翻转 */

-webkit-transform:rotateY(360deg);

/* 垂直翻转

-webkit-transform:rotateX(360deg);

顺时针旋转

-webkit-transform:rotate(360deg);

逆时针旋转

-webkit-transform:rotate(-360deg);

*/

}

}

@-moz-keyframes play{

0%  {

-moz-transform:rotateY(0deg);

/*

-moz-transform:rotateX(0deg);

-moz-transform:rotate(0deg);

-moz-transform:rotate(0deg);

*/

}

100% {

-moz-transform:rotateY(360deg);

/*

-moz-transform:rotateX(360deg);

-moz-transform:rotate(360deg);

-moz-transform:rotate(-360deg);

*/

}

}

@keyframes play{

0%  {

transform:rotateY(0deg);

/*

transform:rotateX(0deg);

transform:rotate(0deg);

transform:rotate(0deg);

*/

}

100% {

transform:rotateY(360deg);

/*

transform:rotateX(360deg);

transform:rotate(360deg);

transform:rotate(-360deg);

*/

}

}

!-- html 布局代码 --

div id="gavinPlay"/div

CSS3动画中怎么一边移动一边旋转？

你的代码里面只有位置移动的top,left。没有写旋转的代码。

在动画帧时加入rotate(角度)就可以旋转并移动，可以参考下面代码。

相关示例如下：

style

.ani{animation:box 1s linear 0s infinite;width:100px;height:100px;background:green;border-radius:50%;}

@keyframes box{0%   {transform:rotate(0deg)translate(0,0);}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)translate(-300px,0);}75%{transform:rotate(270deg);}100% {transform:rotate(360deg)translate(0,0);}}

/style

div class="ani"/div

CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

css3动画方块移动翻转代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css 翻转动画、css3动画方块移动翻转代码的信息别忘了在本站进行查找喔。