整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

卓象科技:移动端页面开场动画

卓象科技:移动端页面开场动画

不是还在为网页交互感不友好而拍着键盘找特效?其实在咱们学习的过程当中就已经可以写出好玩、炫酷的特效了,只是你还没有发现。当细心的操作过后,不仅要拍着大腿说自己怎么没想到,更要进行反思,怎样学习才能将知识点熟练的进行应用。那么现在,我们就一起动手来做一个网页开始的动画效果吧。


一、分析

任何时候我们都要善于进行分析,尤其在解决问题之前最重要的一步就是分析。

1、首先页面开场的特效是由Css3动画来完成的。所有我们一定要使用animation动画属性,并且配合@keyframes动画规则来进行实现。

2、在动画执行过程当中,我们操作的css样式分别为放大、颜色、旋转。其中颜色包括背景颜色和字体颜色

3、打开后文字位置不会随分辨率大小发生改变,那么我们需要用到flexbox弹性布局。


二、知识点梳理

1、Css3的animation用法:

之前的时候我们应用简写的方式比较多,由于我们需要同时设置多个动画,所以这里需要分开使用animation。一个属性名后,可以写多个动画名或执行时间,记得用逗号隔开。


2、Css3的transform用法:

Transform一共有4种变形状态。

旋转:transform:rotate(Ndeg)

放大:transform:scale();

倾斜:transform:skew(Ndeg);

平移:transform:translate(px);

那这里我们应用前两个就可以了。


3、一种优雅的布局方式 Flexbox弹性盒模型

将容器设置好display:flex;后,主轴居中对齐、交叉轴居中对齐即可。


三、动手做一做

1、首先我们要写好HTML结构,将标签自带的填充去掉,对HTML标签进行normalize。

*{margin:0;padding:0;}


2、对main标签进行设置。

设置动画名称、设置动画的持续时间、设置”豪横”两字的摆放位置


3、三种动画的@keyframes规则

@keyframes规则有两种写法,两种方法都有自己的优点。第一种更简单,第二种更加细节。


1)第一种 from to的方式


2) 第二种 百分比 的方式


动画scale:


动画colors:


动画rotate:

4、设置一下字号、字体



四、结语

经过编写后,大家是不是觉得其实并没有那么复杂呢?前端的入门门槛较低。可以很快的通过简单的逻辑写出漂亮的页面。但是也希望大家更认真得对待知识,想写出好看的效果首先我们应当有扎实的基本功,配合着丰富的想象力和执行力,我们才能写出更多更好看的特效。

助CSS所提供的动画效果,旋转效果除了能够制作动画及网页页面元素,如按钮之外,还可以使用CSS实现精美的动态片头的制作。本文主要介绍CSS与HTML实现精美的动画片头制作实例。

如何使用CSS实现精美片头制作


CSS动态片头设计实例

本例设计使用烟雾粒子效果与动态文本结合,实现动态片头效果,文字内容随着烟雾而动态生成、展示,案例最终效果要求描述如下:

动态片头实现效果描述

本例设置实现动态效果描述如上图所示,主要内容包括三部分,实现效果要求如下:

1、动态烟雾效果

动态烟雾部分主要借助视频资源MP4实现,通过在页面指定位置定义video视频标签,设置src资源属性,自动播放烟雾部分视频即可。

2、主标题部分

主标题部分主要通过使用animation属性进行动画设置,使用opacity属性设置其透明度,分别从完全透明到100%不透明,使用单独HTML元素表示每一个字符,在每个字符进行展示时,设置动画延迟时间animation-delay属性,最终展现与烟雾一致的显示效果。

3、副标题部分

副标题部分主要设计效果为随时间字体的透明度与模糊程度发生变化,并且使用元素投影效果,随着时间投影角度发生动态变化。


知识点、技能点说明

1、基本页面布局

本例页面元素主要包括video视频标记、section章节标记、h标题标记、span标记与i标记。按照最终展示效果进行页面的基本布局,页面布局实现代码描述如下:

基本页面布局HTML代码

2、主标题CSS及动画设置

在完成基本页面布局之后可以进一步编写主标题部分,并对主标题部分CSS与动画进行设置。主要涉及到属性包括:

  1. opacity:透明度
  2. rotateY():y轴旋转
  3. filter:blur():模糊程度设置
  4. animation-delay:动画延迟时间设置
  5. letter-spacing:字符间距
  6. nth-child():CSS选择器,用于选择子元素

借助以上基本CSS属性设置,我们可以对主标题部分动画效果进行编码与实现,部分实现代码如下所示:

h span css定义

使用span表示主标题字符延时设置

3、子标题CSS及动画实现

按照设计要求,子标题主要效果包括透明度、模糊度改变、投影及投影角度变化等。主要涉及CSS属性包括以下:

  1. opacity属性
  2. filter:blur()属性
  3. filter: drop-shadow()属性

借助以上CSS效果属性与animation动画属性设置,最终可以实现子标题设计提出的效果要求部分核心代码说明如下:

子标题实现效果代码

子标题部分实现代码如上图所示,其中drop-shadow用于实现投影功能,其中第一个参数与第二个参数可用于实现角度设置,第三个参数用于设置模糊程度,最后一个参数用于描述阴影颜色。以上给出了CSS动态片头效果实现的基本思路与部分核心实现代码。不足之处欢迎大家留言探讨。


本头条号长期关注编程资讯分享;编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见,可在评论区回复。更多程序设计相关教程及实例分享,期待大家关注与阅读!

?在我们显示的页面中动画对于我们来说虽然不是必须的,但是必要的一些动画效果能够提高用户的体验,帮助用户更好的理解页面中的功能。所以本文就来给大伙介绍下动画的基础内容。

Vue 动画

不带动画效果的案例

??我们先来实现一个不带动画效果的显示和隐藏的功能。
案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>

    <div id="app">
        <input type="button" value="开关" @click="flag=!flag">

        <h3 v-if="flag">这是一个h3</h3>
    </div>
    <script>
        var vm=new Vue({
            el: "#app",
            data: {
                flag: false
            },
            methods: {

            }
        })
    </script>
</body>
</html>

效果

在这里插入图片描述

效果虽然实现了,但是效果并不是太好。

过渡类名实现动画

??Vue 在插入、更新或者移除 DOM 时,我们可以在 CSS 过渡和动画中自动应用 class,

在这里插入图片描述

过渡类

说明

v-enter

这是一个时间点,是进入之前,
元素的起始状态,此时还没有开始进入

v-enter-active

入场动画的时间段

v-enter-to

入场结束的时间点

v-leave

离场动画开始的时间点

v-leave-active

离场动画的时间段

v-leave-to

这是一个时间点,是动画离开之后,
离开的终止状态,此时,元素 动画已经结束了

具体使用

1.要使用过渡动画效果的元素 必须被 transition标签包裹

在这里插入图片描述

2.定义对应的样式

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        /**opacity 透明度  transform :https://www.cnblogs.com/xiaomifeng/p/9139632.html**/
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX( 150px )
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease
        }
    </style>
</head>
<body>

    <div id="app">
        <input type="button" value="开关" @click="flag=!flag">
        <transition>
            <h3 v-if="flag">这是一个h3</h3>
        </transition>
    </div>
    <script>
        var vm=new Vue({
            el: "#app",
            data: {
                flag: false
            },
            methods: {

            }
        })
    </script>
</body>
</html>

效果

在这里插入图片描述

定义transition名称

??对于没有定义的transition名称的类名默认前缀是 v-,但如果我们想要自定义前缀,那么可以给transition设置个那么属性,比如:

在这里插入图片描述

在这里插入图片描述

效果还是一样的。

通过第三方类来实现动画

??通过案例中我们需要自定动画效果,这个会显得有点麻烦,这时我们可以使用别人已经定义的动画效果,比如Animate.css来实现,https://daneden.github.io/animate.css/ 官网效果

在这里插入图片描述

是不是提供的效果蛮多的呀,我们就来看看具体怎么用吧。

  • 引入资源样式

在这里插入图片描述

可以自行在官网下载 在transition中添加对应的样式

在这里插入图片描述

https://github.com/daneden/animate.css 具体的样式类可以在此页面选择

在这里插入图片描述

注意:duration="毫秒值" 来统一设置 入场离场 时候的动画时长

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/animate.css">
</head>
<body>

    <div id="app">
        <input type="button" value="开关" @click="flag=!flag">
        <transition 
            enter-active-class="bounceIn" 
            leave-active-class="bounceOut" 
            :duration="{ enter: 200, leave: 400 }">
            <h3 v-if="flag" class="animated">这是一个H3</h3>
        </transition> 
    </div>
    <script>
        var vm=new Vue({
            el: "#app",
            data: {
                flag: false
            },
            methods: {

            }
        })
    </script>
</body>
</html>

效果

在这里插入图片描述

演示效果不是太理想,工具原因,感兴趣的小伙伴可自行运行哦。