神奇的Animation

开发工具与关键技术:DW,HTML和CSS
作者:修
撰写时间:2018.1.17
下面我们先看一下HTML的部分:在这里插入图片描述

先用一个类把span标签包起来,在span标签中放一个类来表达你想要的类型。

然后我们看一下css部分的代码
在这里插入图片描述

在css里面给写一些你要的样式,一定要记得加上图中的
animation:关键帧的名字 动画的时间 速度
延迟时间(可不写) 循环次数 。

最后到了最关键的一部了如果没写它动画是动不了的。
在这里插入图片描述

图中的就是关键帧了写了这写代码元素就会自动切换颜色了。当然这只是动画效果的的其中一种,他还有很多种类型
,那么接下来我就介绍一下图画自动旋转

在这里插入图片描述

先建一个类把你想要设置旋转元素放进去(可以是文字、图片······等等)然后写css的代码
在这里插入图片描述

这同样也是animation的属性使元素自动旋转起来的,不过要让它旋转起来还要用到另一个元素——transform 然后选则它的属性rotate()也就是下图关键帧里的属性
在这里插入图片描述

写了transform 要记得把它的属性rotate写上然后在括号里加上你想旋转的度数写完度数一等要加上它的单位deg 这样元素就可以自动转起来了。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值