CSS3实现旋转与放大缩小

CSS3实现旋转与放大缩小

开发工具与关键技术:Abobe Dreamweaver 动画旋转与放大缩小
作者:李国旭
撰写时间:2019年1月26日

一、 我们来简单认识一下动画,动画是使元素从一种样式逐渐变化为另一种样式效果。
二、 CSS3首先就要定下@keyframes规则,这个@keyframes规则是用于创建动画。在@keyframes中规定某项CSS的样式,就能把你原来的样式慢慢变成新的样式或者你想要的效果。简单的CSS3的效果有“扭曲、放大、旋转、缩放” 下面我是用一个大的div容器container来装这些图片,然后里面是img图片标签。
~~
CSS3实现旋转与放大缩小_第1张图片
~
三、 接着给它写样式给第一张图片宽和高设置跟屏幕一样大小,让它有一种像背景图片的感觉,如果不想设置背景图片也可以,那就是以原始的屏幕为开始来进行编辑图片的样式;一定要选择到第一张图片,给它设置相对定位为下面的图片做下铺垫,避免出现找不到图片的尴尬。
~~
CSS3实现旋转与放大缩小_第2张图片
~~

注意:当我们在@keyframes中创建动画时,一定要把它绑定达到某个选择器上,否则不会产生动画效果。通过规定俩个CSS3动画属性:第一规定动画的名称;第二规定动画的时长,就可以将动画绑定到选择器上了。

1、 实例:
~~
CSS3实现旋转与放大缩小_第3张图片

~~
上图中的0%-100%就相当于from和to ,0%是动画的开始,100%是动画的完成。开始为原始的大图;100%是放大1倍之后的效果。

下面我分别给这些图片设置了宽和高,再给它绝对定位、一个百分之三十六的圆角效果;这里面最重要的是那句animation这句起着关键的作用,然后给他绑定元素并且设置时间五秒,让它运动五秒保持一样的速度来进行无限循环的运动。

~~
CSS3实现旋转与放大缩小_第4张图片

~~

效果图;
~~

~~
最大的那张就是背景图片左右俩张为放大与缩小的效果,而中间的俩张是同时旋转的,最下面的那张是一张底图为承接图片的

2、 实例:核心代码
~~
CSS3实现旋转与放大缩小_第5张图片


~~
这些代码则是这个动画效果的核心代码都是根据这个@keyframes的规则来运行的,如果不给 它创建动画,那么他只是一些简单的图片在上面,不会出现你想要的那种效果,动画的效果就是让人感觉到一种立体会动;任它千变万化,但是万变不离其宗 都是由一句重点的代码来控制的,那就是“transform”。

你可能感兴趣的:(前端)