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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3 由小变大然后一直旋转的动画怎么做相关的知识，希望对你有一定的参考价值。

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

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

<!DOCTYPE html>  
<html>  
<head>  
    <title>HTML5</title>  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />  
    <style type="text/css">
        imgwidth: 200px;
        .div1width: 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的动画时间，你可以根据情况作出适当的时间调整。

 参考技术A 这个要分成两个css3动画去做
小变大是最外层父级，例如它执行了1s；
内层的负责旋转，延迟1s执行 参考技术B 主要需要使用-webkit-animation如：-webkit-animation:gogogo2sinfinitelinear;其中gogogo是自己定义的动画帧，2s是整个动画的秒数，infinite是永久循环linear是线性变化(step-end则是无线性变化，直接输出结果)代码如下：CSS:@-webkit-keyframesgogogo0%-webkit-transform:rotate(0deg);border:5pxsolidred;50%-webkit-transform:rotate(180deg);background:black;border:5pxsolidyellow;100%-webkit-transform:rotate(360deg);background:white;border:5pxsolidred;.loadingborder:5pxsolidblack;border-radius:40px;width:28px;height:188px;-webkit-animation:gogogo2sinfinitelinear;margin:100px; 参考技术C <!DOCTYPE html>
<html>
<head>
<style> 
div

width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */


@keyframes myfirst

0%   background:red; left:0px; top:0px;
25%  background:yellow; left:200px; top:0px;
50%  background:blue; left:200px; top:200px;
75%  background:green; left:0px; top:200px;
100% background:red; left:0px; top:0px;


@-moz-keyframes myfirst /* Firefox */

0%   background:red; left:0px; top:0px;
25%  background:yellow; left:200px; top:0px;
50%  background:blue; left:200px; top:200px;
75%  background:green; left:0px; top:200px;
100% background:red; left:0px; top:0px;


@-webkit-keyframes myfirst /* Safari and Chrome */

0%   background:red; left:0px; top:0px;
25%  background:yellow; left:200px; top:0px;
50%  background:blue; left:200px; top:200px;
75%  background:green; left:0px; top:200px;
100% background:red; left:0px; top:0px;


@-o-keyframes myfirst /* Opera */

0%   background:red; left:0px; top:0px;
25%  background:yellow; left:200px; top:0px;
50%  background:blue; left:200px; top:200px;
75%  background:green; left:0px; top:200px;
100% background:red; left:0px; top:0px;

</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>

 参考技术D <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*
padding: 0;
margin: 0;


.circle
width: 200px;
height: 200px;
text-align: center;
background-color: #fc3;
border-radius: 50%;
animation: sizeAnimate 1s ease-in, rotateAnimate 1s infinite linear 1s;


.animate-show
width: 20px;
height: 20px;
background-color: #000;
display: inline-block;


@keyframes sizeAnimate
from
width: 20px;
height: 20px;

to
width: 200px;
height: 200px;



@keyframes rotateAnimate
from
transform: rotate(0deg);

to
transform: rotate(360deg);


</style>
</head>

<body>
<div class="circle"><span class="animate-show"><span></div>
</body>

</html>
随便写了一个

CSS3动画之3D旋转

今天分享一下一个用3d效果写出来的小demo

效果展示

这个做出来的效果没有预想中的那么好看，不过还是勉勉强强可以看吧嘤嘤嘤。
在这里插入图片描述

实现前想说一下

  • 在做一个项目或者是小demo之前一定要好好构思，哪个盒子和哪个盒子放在一起，思考完成项目的个大概思路，然后再进行操作，否则会浪费很多时间在不必要的东西上。
  • 布局之前一定要经过思考！！设想出你各种操作所会产生的各种不同结果，一个好的布局真滴可以省好多时间，真就亲身实践得出的经验555，如果了完成了一个很好的布局，当你在写css或者是js的时候真的能感受到什么叫做 高效率 ！！！

实现思路

  1. 首先当然就是布局啦，看gif图很容易可以看出来这里面有3层，所以应该是让上面的大图片和背后的图片有一个正负相反，值相等的的translateZ值，然后将下面的4张小图片再往上移。
  2. 给父元素设置perspective和transform-style的属性值，让demo看起来有3d效果。
/*这个是父元素*/
.container {        
        perspective: 1000px;
        transform-style: preserve-3d;
    }

3.接下来就是js部分，js的话，主要是通过鼠标的位置来改变旋转的方向和和角度。我这里是通过pageX、pageY实现的，这个方法可能会导致在缩放的时候有bug，在这里我只说一下大概思路。
通过对鼠标移动位置的监听，获取鼠标的位置，然后，1120和450分别是图片中心的位置，在这里是要以图片为中心来建立直角坐标系，然后通过鼠标移动的x和y值的改变量，换算成图片在x轴或者y轴旋转的角度

var body = document.querySelector('body');
        var container = document.querySelector('.container');
        var word = body.querySelector('p');
        body.addEventListener('mousemove', function (e) {
            // console.log(e.pageX, e.pageY);
            // 找出角度和鼠标位置的关系
            var x = e.pageX - 1120;  // 减去图片中心位置，以图片中心，建立直角坐标系
            var y = e.pageY - 450;  // 这里只是算出了一个大概的值
            x = x / 50;
            y = -(y / 40);
            container.style.transform = 'rotateX(' + y + 'deg)rotateY(' + x + 'deg)';
            word.style.transform = 'translate3d(' + x * 2 + 'px,' + y * 2 + 'px,350px)'
        })

html

<div class="container">
        <div class="front">
            <div class="main"><img src="./img/red.jpg" alt=""></div>
            <p>驰骋江南</p>
            <div class="imgDiv">
                <ul>
                    <li><img src="./img/gray.jpg" alt=""></li>
                    <li><img src="./img/forest.jpg" alt=""></li>
                    <li><img src="./img/blue.jpg" alt=""></li>
                    <li><img src="./img/purple.jpg" alt=""></li>
                </ul>
            </div>
        </div>
        <div class="behind"></div>
    </div>

这次的demo做得还不是很完善，就不把全部的代码放出来啦！之后完善之后会回过头来编辑修改滴！

如果对这类demo感兴趣的话，还可以参考一下下面这几篇博客~
UI设计高级感之视差滚动
canvas炫彩小球+爱心
简易网页版贪吃蛇

以上是关于css3 由小变大然后一直旋转的动画怎么做的主要内容，如果未能解决你的问题，请参考以下文章

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

MySQL架构由小变大的演变过程

mysql架构由小变大的演变过程

CSS3动画之3D旋转

CSS3 从 0 旋转到 90，然后从 90 旋转到 180

css3动画怎么实现旋转效果