css3.0动画

最新推荐文章于 2024-11-17 21:03:46 发布
最新推荐文章于 2024-11-17 21:03:46 发布
阅读量118 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/gb2013-shangduoduo/p/3903948.html
版权

一般做动画都使用javascript中的setTimeout()和setInterval()2个函数来制作。现在可以使用css3中的动画来制作动画了，而且css3.0中的动画使用了GPU来加速会让动画看起来更加平滑，顺畅。由于css3.0中的动画并不是所有浏览器都支持，因此会有这样的写法:@-moz-keyframes 动画名、@-webkit-keyframes 动画名 、@-o-keyframes 动画名、@-ms-keyframes 动画名.

css3.0动画浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

  下面创建一个让div从左到右再回到左边的动画例子:

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#box{border:1px solid #000; width:1200px; height:500px; position:relative;}
#move{position:absolute; left:0; top:100px; width:100px; height:100px; background-color:#900; -webkit-animation:moveLeft 1s 3;-ms-animation:moveLeft 1s 3;-o-animation:moveLeft 1s 3;animation:moveLeft 1s 3;}

@keyframes moveLeft
{
0%   {left:0px;}
25%  {left:100px;}
50%  {left:200px;}
100% {left:300px;}
}

@-moz-keyframes moveLeft /* Firefox */
{
0%   {left:0px;}
25%  {left:100px;}
50%  {left:200px;}
100% {left:300px;}
}

@-webkit-keyframes moveLeft /* Safari 和 Chrome */
{
0%   {left:0px;}
25%  {left:100px;}
50%  {left:200px;}
100% {left:300px;}

}

@-o-keyframes moveLeft /* Opera */
{
0%   {left:0px;}
25%  {left:100px;}
50%  {left:200px;}
100% {left:300px;}

}

</style>
</head>

<body>
<div id="box">
    <div id="move"></div>
</div>

</body>
</html>

首先创建一个moveLeft的动画.

在要引用的元素的css里面增加 -webkit-animation:moveLeft 1s 3;-ms-animation:moveLeft 1s 3;-o-animation:moveLeft 1s 3;animation:moveLeft 1s 3;

animation: myfirst 5s linear 2s infinite alternate;
animation:动画名 动画缓动时间 动画方式 动画时间 执行次数 动画方向；

转载于:https://www.cnblogs.com/gb2013-shangduoduo/p/3903948.html

weixin_30826095
关注
CSS 3.0实现时光轴加载动画
越陌度阡
05-09 534
给大家分享一个用CSS 3.0实现时光轴加载动画，效果如下： 以下是代码实现，欢迎大家复制、粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS 3.0实现时光轴加载动画</title> <style> html { height: 100%.
CSS3.0动画特效
weixin_30302609的博客
12-02 247
一、变形transform1.浏览器支持Internet Explorer 9 需要前缀 -ms-。 Firefox 需要前缀 -moz-。 Chrome 和 Safari 需要前缀 -webkit-。 Opera 需要前缀 -o-。2.平移 translate X轴，Y轴 px transform:translate(100px,-100px);3.拉伸 skew X轴， Y轴 ...
css3.0动画,CSS 3.0 常用动画收集
weixin_36337122的博客
08-03 542
先说一个今天在开发过程中遇到的问题。对同一个元素同时使用transform和animation，transform会失效。解决办法：就是在这个元素的外层再加一层div，对外层的div进行transform，对内层div进行animation就可以解决了。CSS常用动画库一，CSS常用代码/*边框圆角*/border-radius: 6px;/*圆型*/border-radius: 50%;/*边框...
css3.0动画属性
Aoject
03-18 791
css3.0动画效果的实现：过渡和动画 过渡：transition transition-property 规定应用过渡的 CSS 属性的名称。 transition-duration 定义过渡效果花费的时间。默认是 0。 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 transition-delay 规定过渡效果何时开始。默认
css3.0 动画
Aoject
03-02 1009
最近在学习css3.0动画（Animate）相关的，感觉很有意思，css3.0的出现实现了不用 js 就可以完成的很炫的效果。昨天在网上看到一个网站其中有个 Animate.css 搜集的很多常用的动画（animate），感觉很方便推荐给大家  Animate.css 项目地址 http://www.bootcdn.cn/animate.css/  Animate.css 演示效果  ht
CSS3.0（过渡、动画、弹性盒、响应式）总结（2）
m0_63851202的博客
11-04 213
过渡属性 transition:属性 时间 延迟时间 效果 property duration delay timing-function 过渡属性谁变给谁加，使用复合写法只需要写时间即可生效，属性默认是all 动画属性 定义动画： @keyframes 动画名｛from{} 50%{} to{}｝ 使用动画： animation:动画名 时间 延迟时间 效果 次数 交替 停止 停在哪一帧 动画时间及延迟 animation-duration/delay：s/ms 动画效果属...
css3.0动画,回顾 css3.0 动画结合贝塞尔曲线
weixin_39655160的博客
08-03 369
1.css 3.0 动画有哪一些属性1.transform 形状变换rotate 旋转 角度 默认是以Z轴scale (X,Y) 进行缩放操作skew (X,Y) 进行倾斜扭转translate (X,Y) 可以移动的距离。相对于自身的位置(经常在各种场景中，特别是居中对齐)。transform-origin 变换原点设置了 transform-style: preserve-3d 的元素，...
css3.0
04-21
5. **动画（Animation）**：结合`@keyframes`规则，CSS3.0实现了动画效果，让元素在不同时间点展现出不同的样式。 6. **过渡（Transition）**：`transition`属性使得元素在两个样式之间平滑过渡，增加了用户体验。 ...
CSS2.0+CSS3.0的chm文档
08-08
《CSS2.0+CSS3.0的chm文档》是一个综合性的资源，包含了CSS2.0和CSS3.0的详细技术指南。这个压缩包提供了两个CHM（Compiled HTML Help）文件，分别是《CSS2.0中文手册.chm》和《css3.0参考手册.chm》，旨在为开发者...
CSS3.0.rar_css3.0
09-23
**CSS3.0详解** CSS3.0，全称Cascading Style Sheets Level 3，是Web样式表语言的主要版本，用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档的呈现。CSS3.0引入了许多新的特性和功能，极大地增强了网页设计...
CSS3.0手册
06-24
**CSS3.0手册——网页开发者的必备指南** 在网页设计和开发领域，CSS（Cascading Style Sheets）是用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档呈现的重要技术。随着互联网的发展，CSS也不断进化，CSS...
运用css样式实现动画效果
qq_45762293的博客
10-26 483
过度：transition 在规定时间内，把元素从元素1过度到元素2，展现出来 CSS属性：在一定时间内，从一个字变化到另一个值。 书写代码： transition-property：属性 ； transition-duration：过度时间；（秒s、毫秒ms） 缺点： 1，可能会改变布局。 2，只能从状态1到状态2 过度类型：文本、颜色（背景）、尺寸、透明度。 设置渐变函数： transitio...
CSS3实现过渡效果 (transition)
热门推荐
actorWen的博客
12-14 4万+
CSS3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的 动画。
如何编译 Cesium 源码
ismartcube的博客
11-13 1136
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
从零开始快速构建Vue3项目
欧唯薇
11-13 894
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
【Node.js】Node.js 和浏览器之间的差异
佚名程序员
11-16 858
Node.js 是一个基于 Chrome V8 引擎构建的开源 JavaScript 运行时，它使开发者能够在服务端运行 JavaScript 代码。Node.js 提供了高效的事件驱动和非阻塞 I/O 模型，广泛应用于构建快速、可扩展的网络应用。核心特性单线程：使用事件循环机制实现并发。非阻塞 I/O：适合高并发应用。模块化：采用 CommonJS 模块系统。浏览器是前端开发的主要运行环境。其核心任务是解析 HTML、CSS 和 JavaScript，并呈现网页内容。
Vue常用加密方式
m0_51431448的博客
11-13 161
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
React中事件绑定和Vue有什么区别？
最新发布
m0_75074819的博客
11-17 221
React使用事件代理（Event Delegation）技术，将所有事件监听器绑定到document上，而不是直接绑定到具体的DOM元素上。：React将所有原生DOM事件封装成合成事件，通过统一的接口暴露给开发者。：Vue提供了丰富的事件修饰符（如.stop、.prevent等），方便开发者处理复杂的事件逻辑。如果你在类组件中使用事件处理函数，通常需要显式绑定 this，或者使用箭头函数来自动绑定。：Vue通过指令（如v-on）来绑定事件，指令内部会处理事件的监听和分发。因此，不需要额外的绑定。
Nuxt2和Nuxt3 对于SEO优化的区别
书山有路_邓
11-14 567
nuxt
CSS3.0权威手册：查询与实例使用指南
同时，CSS3.0还新增了盒模型、文字阴影、边框圆角、渐变效果、动画等特性，这些都可以帮助开发者创建更加美观和动态的网页。 3. CSS3.0的使用方法： CSS3.0的使用方法与传统CSS相似，通过在HTML文件中的标签内添加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值