搜索
首页web前端html教程CSS3 skew倾斜、rotate旋转动画_html/css_WEB-ITnose

css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂;

若需要实现倾斜、旋转之类的动画难度将更高(我还没试过用JavaScript或Jquery如何实现),而且即使能实现估计花的时间代价及维护难度是很大的,很多时候只能依靠画图工具制作此类动画文件;

有时候在想如果不用脚本语言,也不用画图工作制作动画文件,就能在网页上实现倾斜、旋转之类的动画效果多好。

 

最近挤出一些业余时间学习CSS3,其中就包含很多动画示例,花了点时间学习和整理

今天分享使用html+css3实现skew倾斜、rotate旋转动画,我们先看最终效果图(我这里为了演示效果,就用QQ屏幕截成多张图片,然后制作成gif动画给大家简单展示下,效果不好请大家多多包涵)

图1

具体步骤如下:

1、放置两个div,一个作为容器(图1中绿色背景部分 id="warp"),另一个作为动画元素(图1中黄色背景部分 id="box")

HTML代码:

<div id="warp">    <div id="box">WEB</div></div>

 

CSS代码(设置容器及动画元素默认样式):

#warp { width: 320px; height: 320px; background: #6FDE82; margin: 20px auto;}#box { height: 40px; width: 40px; background: yellow; position: relative; top: 280px; left: 0;                }

注意:#box{position: relative;}是为该元素接下来做动画做准备,因为动画过程中需要改变其位置,故这里使用相对定位

上述代码为基本的html css,大家应该没问题吧

此时效果如下:

2、使用CSS3 @keyframes自定义动画

CSS代码:

@keyframes move { 0% { top: 280px; left: 0; transform: skewX(0deg); width: 40px; height: 40px;    } 20% { top: 0; left: 0; transform: skewX(50deg); width: 60px; height: 20px; background: red;    } 22% { top: 0; left: 0; transform: skewX(0deg); width: 40px; height: 40px;    } 30% { top: 0; left: 0; transform: skewX(0deg); width: 320px; height: 40px;    } 40% { top: 0; left: 280px; transform: skewX(0deg); width: 40px; height: 40px; background: green;    } 50% { top: 0; left: 280px; transform: skewX(0deg); width: 20px; height: 320px;    } 55% { top: 280px; left: 280px; transform: skewX(0deg); width: 40px; height: 40px; background: blue;    } 60% { transform: rotate(-90deg); transform-origin: left bottom;    } 65% { transform: rotate(-180deg); transform-origin: left top;    }}

代码解析:

  1. css3自定义动画需要使用@keyframes规则,具体请看CSS3 @keyframes 规则

  2. 设置动画执行进度

    本示例中定义了 0% 20%  22% 30% 40% 50% 55% 60% 65%几个动画进度,

    百分比到底代表什么意思?

    举例说明:如果整个动画执行10秒,那么20%就代表当动画执行到2秒时的效果。所以整个自定义动画翻译过来就是在每个执行进度中定义css样式(比如 width,height,color等),这样就形成了连贯的动画效果。执行进度百分比根据实际情况可自行调整。

    注意:该执行进度并非一定要设置100%,如本示例中仅设置到65%,这就意味着剩下的35%就由css3自行完成动画回归到原始状态(大家可以试试)

  3. 元素倾斜(元素变形)、旋转(元素不变形)

    本示例中用到倾斜及旋转动画,倾斜使用skew(),参数为倾斜度数;旋转使用rotate(),参数为旋转度数;

    倾斜原理示意图如下:

X轴逆时针转为正;Y轴顺时针转为正;

举例:

skew(30deg),在本示例中效果将成这样

skew(-30deg),在本示例中效果将成这样

Y轴的这里就不举例了,根据上述提示大家可自行测试效果

transform-origin,元素倾斜或转动中心点,具体属性值可看CSS3 transform-origin 属性

这里的中心点,指的是动画元素的中心点,元素围绕该点转动或倾斜,该点坐标是不会改变的;个人觉得这里需要头脑中产生一些几何图形以便于理解,或者用一张纸(手机之类的物品)放在桌子上,用手固定该物品的某个点演示一下转动效果,就明白了

3、执行自定义动画

CSS代码:

#box { height: 40px; width: 40px; background: yellow; position: relative; top: 280px; left: 0; animation: move 5s infinite;}

 

代码解析:

animation: move 5s infinite;

 

代表该自定义动画完成耗时5秒,并且无限循环执行

animation属性的详细说明请看这里CSS3 animation(动画) 属性

 

 

 

OK,上述步骤及原理大家都清楚了吧。本示例完整代码如下,各位可以直接复制去执行看看效果

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>HTML5+CSS3 skew倾斜、rotate旋转动画</title>        <style type="text/css"> #warp { width: 320px; height: 320px; background: #6FDE82; margin: 20px auto;            } #box { height: 40px; width: 40px; background: yellow; position: relative; top: 280px; left: 0; animation: move 5s infinite;                            } @keyframes move { 0% { top: 280px; left: 0; transform: skewX(0deg); width: 40px; height: 40px;                } 20% { top: 0; left: 0; transform: skewX(50deg); width: 60px; height: 20px; background: red;                } 22% { top: 0; left: 0; transform: skewX(0deg); width: 40px; height: 40px;                } 30% { top: 0; left: 0; transform: skewX(0deg); width: 320px; height: 40px;                } 40% { top: 0; left: 280px; transform: skewX(0deg); width: 40px; height: 40px; background: green;                } 50% { top: 0; left: 280px; transform: skewX(0deg); width: 20px; height: 320px;                } 55% { top: 280px; left: 280px; transform: skewX(0deg); width: 40px; height: 40px; background: blue;                } 60% { transform: rotate(-90deg); transform-origin: left bottom;                } 65% { transform: rotate(-180deg); transform-origin: left top;                } } </style>    </head>    <body>        <div id="warp">            <div id="box">WEB</div>        </div>    </body></html>

 

好了,今天分享就到这里,以后还有更多哟,请大家一起来交流下,有兴趣的朋友给我的文章评论下嘛

 

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
什么是自我关闭标签?举一个例子。什么是自我关闭标签?举一个例子。Apr 27, 2025 am 12:04 AM

self-closingtagsinhtmlandxmlaretagsthatclosethem hexpthementneedingAseparateCloseTag,SightifyingmarkingmarkupStrupupStruptoReanDenhancingCodingsifice.1)shemeSsentialInxmmllforelementsswithcontentsswithcontent contentcontent,可确保wellwell-formedDocuments.2)Inhtmlible5,inhtmlibut forfix

超越HTML:网络开发的基本技术超越HTML:网络开发的基本技术Apr 26, 2025 am 12:04 AM

要构建一个功能强大且用户体验良好的网站,仅靠HTML是不够的,还需要以下技术:JavaScript赋予网页动态和交互性,通过操作DOM实现实时变化。CSS负责网页的样式和布局,提升美观度和用户体验。现代框架和库如React、Vue.js和Angular,提高开发效率和代码组织结构。

HTML中的布尔属性是什么?举一些例子。HTML中的布尔属性是什么?举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性,不需要值即可激活。1.布尔属性通过存在与否控制元素行为,如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性,高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值,正确写法应简洁。5.最佳实践是保持代码简洁,合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码?如何验证您的HTML代码?Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript:比较Web技术HTML与CSS和JavaScript:比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

HTML作为标记语言:其功能和目的HTML作为标记语言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容,其目的在于提供一种标准化的方式来展示信息。1)HTML通过标签和属性组织网页的各个部分,如标题和段落。2)它支持内容与表现分离,提升维护效率。3)HTML具有可扩展性,允许自定义标签增强SEO。

HTML,CSS和JavaScript的未来:网络开发趋势HTML,CSS和JavaScript的未来:网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能