当前位置:首页>>百创新闻>>微信开发知识 >微信小程序——几个有趣的CSS3动画

先看下效果:

除了有点快,动画效果还可以。常熟微信平台开发在弹出的移动应用创建窗口,填写相关应用的信息。填写完毕,点击下一步,然后继续去填写平台信息,然后提交,等待审核通过。常熟微信小程序一种不需要下载安装即可使用的应用,由腾讯于2017年1月9日首次推出。这一应用形式能使用户不用再关心应用安装太多的问题,实现了应用“触手可及”的梦想,也体现了“用完即走”的理念。常熟微信开发将企业信息、服务、活动等内容通过微信网页的方式进行表现,用户通过简单的设置,就能生成微信3G网站。通过微信公众平台将企业品牌展示给微信用户,减少宣传成本,建立企业与消费者、客户的一对一互动和沟通,将消费者接入企业CRM系统,进行促销、推广、宣传、售后等。形成了一种主流的线上线下微信互动营销方式。

它是怎么实现的?

以第一部双人舞动画为例,对其进行研究。

mxml:

View class = "sk-wandering-cubes" view class = "sk-cube sk-cube 1" / view view class = "sk-cube sk-cube2" / view

css:

Sk WanderingCube.sk cube background color: 67cf22; width: 10px; height: 10px; position: absolute; top: 0; left: 0; - WebKit animation: sk WanderingCube 1.8s Ease In Out-1.8s Infinite; anion: sk WanderingCube 1.8s Ease In Out-1.8s Both;.InfInfinisk WanderingCube 2-IT animation delay: -0.8s 9s; Animation Delay: -0.9s; @-Webkit Key Frame sk WanderingCube 0%-Webkit Conversion: Rotation; Conversion: Rotation; 25%-Webkit Conversion: Translatix Rotation Ratio; Conversion: Translatix Rotation Ratio; 50%/* Hacker Makes FF Rotate to Right*/-Webkit Tra Conversion: Transx Translational Rotation; Conversion: Transx Translational Rotation Tate; 50.1% - WebKit transform: translatex translatey rotate; transform: translatex translatey rotate; 75% - WebKit transform: translatex translatey rotate scale; transform: translatex translatey rotate scale; 100% {- WebKit transform: rotation; transform: rotation;

它是用css3动画风格实现的。skWandering立方是一个自定义的动画名称,而不是css3的定义。

把两个正方形加到三个怎么样?

添加一个sk-cube3,以及相应的新风格?

View class= "sk cube sk-cube 3"/view.sk-wandering-cubes.sk-cube 3-webkit animation delay: -0.45s; animation delay: -0.45s;

运行一下,不失所望:

如果你放慢动画的速度,让三个方块平均分布。让它们在空间中均匀分布,即平均动画时间。

为了达到这一效果,修改每帧0.6秒的间隔:

.sk-wandering-cubes .sk-cube {background-color:#67cf22;Width: 10px; Height: 10px; Position: Absolute; Top: 0; Left: 0; -webkit-animation: sk-wanderingCube 1.8s easy- In-out -1.8s infinite both;}. Sk-wandering-cubes .sk-cube2 {-webkit-animation-delay:-0.6s;}. Sk-wandering- cube .sk-cube3 {-webkit-animation-delay:-1.

做网站设计选百创!
18136402553