制作动画

最新推荐文章于 2024-08-09 01:41:31 发布
最新推荐文章于 2024-08-09 01:41:31 发布
阅读量433 收藏
点赞数

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style>
    /*最外层容器样式*/

    .wrap {
        width: 100px;
        height: 100px;
        margin: 150px;
        position: relative;
    }
    /*包裹所有容器样式*/

    .cube {
        width: 50px;
        height: 50px;
        margin: 0 auto;
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(-80deg);
        animation: rotate linear 20s infinite;
    }

    @-webkit-keyframes rotate {
        from {
            transform: rotateX(0deg) rotateY(0deg);
        }
        to {
            transform: rotateX(360deg) rotateY(360deg);
        }
    }

    .cube div {
        position: absolute;
        width: 200px;
        height: 200px;
        opacity: 0.8;
        transition: all .4s;
    }
    /*定义所有图片样式*/

    .pic {
        width: 200px;
        height: 200px;
    }

    .cube .out_front {
        transform: rotateY(0deg) translateZ(100px);
    }

    .cube .out_back {
        transform: translateZ(-100px) rotateY(180deg);
    }

    .cube .out_left {
        transform: rotateY(-90deg) translateZ(100px);
    }

    .cube .out_right {
        transform: rotateY(90deg) translateZ(100px);
    }

    .cube .out_top {
        transform: rotateX(90deg) translateZ(100px);
    }

    .cube .out_bottom {
        transform: rotateX(-90deg) translateZ(100px);
    }
    /*定义小正方体样式*/

    .cube span {
        display: block;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 50px;
    }

    .cube .in_pic {
        width: 100px;
        height: 100px;
    }

    .cube .in_front {
        transform: rotateY(0deg) translateZ(50px);
    }

    .cube .in_back {
        transform: translateZ(-50px) rotateY(180deg);
    }

    .cube .in_left {
        transform: rotateY(-90deg) translateZ(50px);
    }

    .cube .in_right {
        transform: rotateY(90deg) translateZ(50px);
    }

    .cube .in_top {
        transform: rotateX(90deg) translateZ(50px);
    }

    .cube .in_bottom {
        transform: rotateX(-90deg) translateZ(50px);
    }
    /*鼠标移入后样式*/

    .cube:hover .out_front {
        transform: rotateY(0deg) translateZ(200px);
    }

    .cube:hover .out_back {
        transform: translateZ(-200px) rotateY(180deg);
    }

    .cube:hover .out_left {
        transform: rotateY(-90deg) translateZ(200px);
    }

    .cube:hover .out_right {
        transform: rotateY(90deg) translateZ(200px);
    }

    .cube:hover .out_top {
        transform: rotateX(90deg) translateZ(200px);
    }

    .cube:hover .out_bottom {
        transform: rotateX(-90deg) translateZ(200px);
    }
    </style>
</head>

<body>
    <div class="newsItem">
        <div id="blog-news">
            <!-- 外层最大容器 -->
            <div class="wrap">
                <!--包裹所有元素的容器-->
                <div class="cube">
                    <!--前面图片 -->
                    <div class="out_front">
                        <img src="https://i.loli.net/2018/05/03/5aeb0eef73838.jpg" class="pic">
                    </div>
                    <!--后面图片 -->
                    <div class="out_back">
                        <img src="https://i.loli.net/2018/05/03/5aeb0f2fb9a83.jpg" class="pic">
                    </div>
                    <!--左面图片 -->
                    <div class="out_left">
                        <img src="https://i.loli.net/2018/05/03/5aeb0f55411f0.jpg" class="pic">
                    </div>
                    <!--右面图片 -->
                    <div class="out_right">
                        <img src="https://i.loli.net/2018/05/03/5aeb0f79a1124.jpg" class="pic">
                    </div>
                    <!--上面图片 -->
                    <div class="out_top">
                        <img src="https://i.loli.net/2018/05/03/5aeb0f98a8b66.jpg" class="pic">
                    </div>
                    <!--下面图片 -->
                    <div class="out_bottom">
                        <img src="https://i.loli.net/2018/05/03/5aeb0fdd51b7e.jpg" class="pic">
                    </div>
                    <!--小正方体 -->
                    <span class="in_front">
                        <img src="https://i.loli.net/2018/05/03/5aeb100223dd0.jpg" class="in_pic">
                    </span>
                    <span class="in_back">
                         <img src="https://i.loli.net/2018/05/03/5aeb101c2c24b.jpg" class="in_pic">
                    </span>
                    <span class="in_left">
                        <img src="https://i.loli.net/2018/05/03/5aeb1038127b5.jpg" class="in_pic">
                    </span>
                    <span class="in_right">
                        <img src="https://i.loli.net/2018/05/03/5aeb0dce1ca55.jpg" class="in_pic">
                    </span>
                    <span class="in_top">
                        <img src="https://i.loli.net/2018/05/03/5aeb1057bb167.jpg" class="in_pic">
                    </span>
                    <span class="in_bottom">
                        <img src="https://i.loli.net/2018/05/03/5aeb107514579.jpg" class="in_pic">
                    </span>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

PeiSylon
关注
用计算机做动画,如何制作动画
weixin_30759991的博客
07-03 3002
电脑动画制作完全不同于传统的动画制作。特别是三维电脑动画，是个在计算机中生成数字图形，设置它的运动，并用真实感的各种处理方法来生成逼真图像并转换成视频信号的过程。三维电脑动画制作过程通常由以下几个阶段组成：输入素材；造型；调整材质和贴图；设置动画、相机和灯光；着色生成图像文件；输出结果。下面以近年来国外最流行的影视制作软件Ａｌｉａｓ为例，介绍一下具体实施过程。我们以做一个中文字幕“专业动画”四个字...
如何用python制作动画电影_动画电影是如何制作的？
weixin_39669133的博客
12-17 3284
本文主要聊聊国内三维动画电影公司的制作流程分工。主要从岗位名称、主要职责、技能要求、软件工具四个方面对国内主流三维动画电影公司制作流程和岗位进行介绍。文章尽量用动图来更加形象地展现制作流程，建议连好WiFi浏览。(土豪随意)三维动画的制作是一个漫长的过程，一部动画电影从前期构思到后面成片产出往往需要集合大量的资金、人员、与时间。比如最近爆火的《哪吒魔童降世》从2016年开始进行制作，而前期剧本的创...
动画制作
11-22
动画制作
CSDN博客中的演示动画怎么做
秋风的博客
12-01 5549
有很多有耐心，而且乐于分享的博友，不管是自己学习的经验还是研究成果都喜欢分享知识，尤其是技术的分享。看来我们都崇尚开源。对于技术类的文章，多数人喜欢先看到技术实现的效果，而后研究代码。文字的描述总没有图片演示来得直接。这里说说怎么制作博客中的演示动画，其实像这类的功能直接用一些小工具就可以了。有朋友问到我动画是怎么做的，其实只是我用了工具而已1、（生成动画的工具：Ulead GIF Animato
blender动画制作知识点（简陋学习版）
最新发布
lll1766128031的博客
08-09 649
我们要做的呢就是在普通键上设置好与基键不同的动作，然后对这个普通键设置关键帧，然后通过曲线编辑器的内置函数啥的（有很多种类型，也可以是某些脚本之类的，看情况选择吧），来设置这个循环应该怎么来运动（就是在左侧列表菜单栏那里选定要设置的形态键，这个形态键一定要设置好关键帧！要注意的是，如果想要选定一个具体的属性的变化来做动画的话，那么就要在设置两个关键帧的时候都要勾选那个小菱形，不然的话，就会出现物体不按照选定的属性变化来运动的尴尬情况。那么选择尾部的话，那么新的骨骼与原来的骨骼是同级的。
简单的动画制作
用于记录、查询和分享
07-26 513
制作动画比较简单的就是使用ObjectAnimator类来制作，顾名思义，类的动画制作器，这个类特指View类及其子类，算是制作视图的动画类。     ObjectAnimator按照动画的动作有很多种类型，比如滑动动画float型的，属性变化型的int型的，具体的ObjectAnimator类型在创建实例时指定，比如：     ObjectAnimator exampleAnimator =
3DMax人物动画制作
【AI机器学习与知识图谱】的博客
10-09 5450
3DMax中对于人物动画制作方法有很多，此篇博客将介绍一种对于简单人物动画的制作方法。首先理解3DMax中形成动画的原理。3DMax中的动画是一系列静态图像以足够快的帧速播放，使得肉眼看上去他们是连续的，即形成了运动图像。接下来将详细介绍如何3D动画制作: 1、打开需要制作动画的人物模型，将demo放在坐标中心。 2、首先对将要做的动画需要有一定的了解，例如可以观看一些那些动画的视频，然后通过观
超简单动画制作软件——ATani
07-27
超简单动画制作软件——ATani 超简单动画制作软件——ATani 超简单动画制作软件——ATani 超简单动画制作软件——ATani 超简单动画制作软件——ATani 超简单动画制作软件——ATani 超简单动画制作软件——ATani
威纶通触摸屏动画功能的制作
08-03
1. 设计动画效果：在威纶通的编辑软件中，选择需要制作动画的对象，然后在其属性设置中找到动画选项，设定动画类型、方向、速度等参数。 2. 编程控制：在工程的脚本编辑器中编写控制动画播放的代码。例如，你可以...
Labview三维动画演示.zip_ivabobo.com_labview动画演示_labview编程演示_such986_动画
07-15
利用labview编程实现三维动画演示。运行interface文件夹下的main.vi即可看到演示效果。
如何用python做动画_如何使用python制作简单的动画？
weixin_35784267的博客
02-05 1万+
Python真的是无穷的好用，涉及内容非常广泛，比如接下来给大家介绍的制作动画，就可以利用python实现，相信小伙伴们听到这些内容肯定是非常感兴趣的，至于怎么去实现？大家想不想了解呢？下面小编就给大家整理出来了，一起来看吧~制作步骤：在一开始导入我们的库，turtle (绘制几何图形)，random (产生随机颜色和高度值)importturtleast#导入turtle库，并该起了个外...
学习动画制作动画哪家好
wnf521317的博客
07-08 277
在动画行业前景比较不错，预示着我过动画即将迎来新的高峰，那么提高我国动画行业的技术水平以及引进新时代特色就刻不容缓。 当然，既然市场前景非常不错，那在这场时代浪潮中，肯定会有几家突起，成都艺点动画就比较不错，为什么这么说呢，我们先来谈谈一家动画公司所需要的基本要求，首先底蕴得丰富，其次技术水准要高，要学会跟进时代的潮流符合大众的口味。有句话不错，得民心者得天下，拿在这同样适用。 现在我们来谈谈艺点动画究竟符合这几点要求吗 一，公司核心团队在行业内工作10余年，曾参与制作王者荣耀、天涯明月刀、剑侠情缘叁等国内
动漫网站的制作
chouren6279的博客
10-23 3365
第1章 任务研究分析 1.1开发本系统的必要性 动漫产业在美国、英国、韩国等国家已经成为他们的重要支柱产业，它不仅利润高，而且还能促进其他行业的发展。如网络业、影视、IT等。而中国的动漫产业只是刚刚起步。为了加快中国的发展，去年国家已经将动漫产业列入“十一五”期间重点扶持和发展的产业。预计...
使用Animation组件制作动画的具体流程
起个名字好难啊
09-17 3596
动画制作流程：   1：如何搭配环境   a：导入NGUI包后，按Ctrl+S保存场景，在菜单栏显示NGUI菜单；   b：选择NGUI——Create——Sprite后，在场景中创建NGUI界面，并在上面出现一个Sprite组件；     c：选择Sprite，选择图集（Atlas）后,在上面添加一张图片，     4：设置Sprite中Size的宽度与Game视图分辨率的宽
AE 制作一个简单的动画
sinat_24196195的博客
07-10 1万+
创建一个简单的动画 常用快捷键：command + 3 打开预览界面；空格键 直接预览 1、 command + N 创建一个工作空间，尺寸选择 720 x 1280 或者如图在当前工作空间右键 New Composition 2、在下方工作空间中右键New –> Solid –> ok,新建一个正方形于工作区间。如图3、打开刚刚新建图层的选项，直至最后一级，我们可以看到Anchor Poi
盘点：12种动画制作工具让游戏角色栩栩如生
思依_vr 的专栏
01-09 1万+
转自 http://chanye.ptbus.com/299041/ 　这是一份顶尖游戏动画技术指南。 　　无缝衔接的角色动画是确保游戏代入感的重要因素，为了能帮助开发者创造出最逼真的动画角色，我们盘点了十二种动画制作工具。如果您有其它优秀的工具推荐，请告诉我们，我们会进一步完善这份列表。 　　一、Morpheme with Euphoria 　　所属公司: NaturalMotion
【CocosCreator入门】Animation动画的制作和使用（上）
热门推荐
bark2003的专栏
01-17 3万+
原文地址：https://www.jianshu.com/p/7d9574f179eb 在CocosCreator中，想要播放序列帧动画，通常使用Animation来完成。 什么是序列帧动画？ 如下图： 在游戏中，把上面这组图一张一张地播放，最后会形成动画的效果，如下： 上面的素材可以在这个链接下载：http://p
Matlab制作动画：替代GIF的途径与avi文件生成方法
本文主要介绍了在MATLAB中使用其他方法制作GIF动画的过程和技术细节。尽管MATLAB本身并不直接支持GIF动画的创建，但可以通过一些间接方式实现这一目标。文章首先概述了MATLAB制作动画的基本概念，然后详细描述了几个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值