css动画从上到下弹出下载按钮

html-css012

css动画从上到下弹出下载按钮,第1张

主要思路是利用hover来进行功能实现,transition-duration:来实现过度动画;

css这样实现

html如下

.download-block{

width:90%

height:100px

background:#0b0e32

/*margin:  100px  auto 0*/

    margin:0 auto

position:absolute

left:0

right:0

transition-duration:2s

opacity:0.7

}

.download-block1{

background:transparent

height:100px

overflow:hidden

position:relative

left:0

top:-100px

right:0

padding-top:100px

transition-duration:2s

opacity:0.7

cursor:pointer

}

.download-block1:hover{

padding-top:0

transition-duration:2s

opacity:0.7

}

1、利用样式实现小程序动画(用法和css用法相识)

wxml 文件

<image class="aniamtion" src="../../images/page4.jfif" style="width:200rpxheight:200rpx  position:  relative"></image>

wxss文件

.aniamtion {

animation: mymove 5s infinite

/* //infinite属性是表示无限循环的意思,没有这个属性的话动画只执行一次。 */

}

@keyframes mymove {

from {

  /* left: 0px*/

/* transform: rotate(7deg) skew(50deg) translate(30rpx,30rpx)*/

transform: rotate3d(100,200,300,0deg)

}

to {

 /* left: 200px*/

/* transform: rotate(7deg) skew(5deg) translate(100rpx,100rpx)*/

transform: rotate3d(200,300,400,360deg)

}

}

2、 用小程序的API来实现动画

用wx.createAnimation(object) 来创建一个动画 -->返回一个animation对象

创建一个动画实例 animation。

onReady: function () {

this.animation = wx.createAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

调用实例的方法来描述动画。

Animation.step() 表示一组动画的完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画

rotate(){

this.animation.rotate(150).step() //对动画进行简单的描述

this.setData({

         animation:this.animation.export()

})

},

最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

this.animation.export() 导出动画队列。export 方法每次调用后会清掉之前的动画操作

rotate(){

this.animation.rotate(150).step() //对动画进行简单的描述

this.setData({ // 在setData({}) 导出动画数据数据给组件

         animation:this.animation.export()

})

},

完整的wxml

<view class="container">

<view animation="{{animation}}" class="view">

将做动画的块

</view>

</view>

<button type="default" size="mini" bindtap="rotate">

旋转

</button>

完整的wxjs

Page({

data: {

animation:''

},

onReady: function () {

this.animation = wx.createAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

rotate(){

this.animation.rotate(150).step().translate(100).step()

this.setData({

animation:this.animation.export()

})

}

})

3、用选择器来绑定组件来来实现组件的动画(小程序2.9.0 的库可用,版本不够会报this.animate不是一个方法)

<text>pages/index7/index7.wxml</text>

<view id="container" style="height: 100pxwidth: 100pxbackground-color: blue">

container

</view>

<view class="block" style="height: 100pxwidth: 100pxbackground-color: #ccc">

block

</view>

用选择器选择相应的组件进行相应的动画

进行关键帧的处理

onLoad: function () {

  this.animate('#container', [

    { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },

    { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00' },

    { opacity: 1.0, rotate: 90, backgroundColor: '#FF0000' },

  ], 5000)

  this.animate('.block', [

    { scale: [1, 1], rotate: 0, ease: 'ease-out' },

    { scale: [1.5, 1.5], rotate: 45, ease: 'ease-in'},

    { scale: [2, 2], rotate: 90 },

  ], 5000)

},

}

4、用第三方的库 animation.css

需要做的有

从https://daneden.github.io/animate.css/下载css动画文件

把 .css 文件 改名成 .wxss文件(可进行相应的需改,毕竟小程序的大小限制摆在那里)

把它引入到你的app.wxss文件中

@import “动画文件的相对目录”

在用的时候把他和你的样式绑定

<view class="swing" style="height: 100pxwidth: 100pxbackground-color: #ccc">

block

</view>

// 给类名为swing 的文件绑定swing 的动画

.swing{

animation: swing 5s infinite

}

animate.css是一个css3动画库,可以到github上去下载,里面预设了很多种常用的动画,可以先在本页看下演示效果,使用也很简单,因为它是把不同的动画绑定到了不同的类里,所以我们想要使用哪种动画的时候,只需要简单的把那个相应的类添加到元素上就行了:

首先在head中引入下载的animate.css文件

然后你想要哪个元素进行动画,就给那个元素添加上animated类 以及特定的动画类名,animated是每个要进行动画的元素都必须要添加的类。

假设使用jquery,要给一个id为demo的元素添加一个摇动的动画,因为摇动的动画类名为shake

这样载入页面,元素就能动起来了。你也可以在动画完成后,把动画类移除,以便可以再次进行同一个动画。

至于动画的配置参数,比如动画持续时间,动画的执行次数等等,你可以在你的的元素上自行定义,覆盖掉animate.css里面所定义的就行了。

注意这些属性还要记得加上各浏览器的前缀。

总之是很灵活的,说到底不就是一个css文件吗,一看就懂的,你在里面想怎么整就怎么整,不想用它提供的类名,就在里面改掉就行了。如果你只想用里面的部分动画,也可以把那些要使用的动画分离出来,它的官网也提供了这样的功能。