一个小小Css3动画的案例

                         Css3动画

开发工具与关键技术：Css3动画
作者：沈金凤
年级：18级（5）班
撰写日期：2019年1月17日

在Css3 中有三中属性是我们正常用的：transform，transition，animation。
transform：该属性用于设置变形和支持一个或多个变形函数，主要包括了：rotate（）旋转，skew（）扭曲，scale（）缩放 ……。接下来我的一个案例主要用了 transform 的rotate（）旋转，skew（）扭曲，scale（）缩放和次要用了transition来完成。如下图所示：
rotate(- ,+)旋转：用了顺时针和逆时针的旋转方法：
skew(x,y)扭曲：使元素在水平和垂直方向同时扭曲:
图片：1

scale(0.8): 缩小到原来的0.8倍：
transition-duration：指定完成过渡所需要的时间：
图片：2

但鼠标移进去是图片会触发元素的外观变化，鼠标移出图片变回原来的样子：
图片：3

菜鸟的写作请各位大神多多指教。

一个小小Css3动画的案例相关推荐

小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
css3动画简单案例
简单案例1: <body><div>叶落森</div> </body> div {width:100px;height:100px;background ...
css3案例分析,CSS3动画/动画库以及案例分析（上）
在这html5遍天下的年代,越来越多的网页也用到了css3的动画效果,这让原本我们静态的页面有了更多的活力.最近也一直在做这方面的页面,有些小小的心得,和诸位分享下. CSS3的动画绝对是很赞的,不仅 ...
html图片动态案例,10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互.本文分享了1 ...
18个强大的纯CSS3动画案例分享
编辑整理 | web前端开发在之前,我也分享过很多关于CSS3,HTML5的动画案例,今天我要与你分享的这18个动画案例,也是比较炫酷的,可以实现很多交互,这些CSS3动画,可以给你的网页增添不少趣 ...
css3 动画+奔跑的熊案例
动画的使用 1.先定义动画 2.调用动画用keyframes定义动画 @keyframes 动画名称{ /* 开始状态 / 0%{ } / 结束状态 / 100%{ } } 调用动画 animati ...
css3d动画案例,10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互.本文分享了1 ...
一个栗子上手CSS3动画
最近杂七杂八的事情很多,很多知识都没来得及总结,是时候总结总结,开启新的篇章- 本篇文章不一一列举CSS3动画的属性,若需要了解API,可前往 MDN 在开始栗子前,我们先补补基础知识. css3动画 ...
动漫风html源码,CSS3动画制作一个卡通风格的404错误页面代码
CSS3动画制作一个卡通风格的404错误页面代码(有动画效果) html> Css 404错误页 .error-container { text-align: center; font-size ...

一个小小Css3动画的案例

一个小小Css3动画的案例相关推荐

最新文章

热门文章