animation案例

最新推荐文章于 2023-08-18 08:05:24 发布
最新推荐文章于 2023-08-18 08:05:24 发布
阅读量286 收藏
点赞数
分类专栏： 寒假前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbs311709000127/article/details/104109996
版权

效果：

这是一个动画

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}"/>
		<title></title>
		<style type="text/css">
			div:nth-child(1){
				width: 100px;
				height: 100px;
				background: darkturquoise;
				border-radius: 7px;
				margin: 30px;
				animation: remove 5s forwards;/*引用动画，animation-fill-mode:forwards;保持最后的状态使最后保持粉色*/
				text-align: center;
				line-height: 100px;
				color: #fff;
				font-weight: bold;
				position: relative;
				cursor: pointer;/*把鼠标变成小手*/
			}
			@keyframes remove{/*定义动画*/
				from{transform: rotate(0deg);left: 0;}				/*rotate(25deg)顺时针旋转45deg*/
				25%{transform: rotate(25deg);background: chartreuse;left: 0;}
				50%{transform: rotate(0deg);background: chartreuse;left: 500px;}
				55%{transform: rotate(0deg);background: chartreuse;left: 500px;}
				70{transform: rotate(0deg);background: chartreuse;left: 500px;}
				to{transform: rotate(-360deg);background: salmon;left: 0;}
			}
			div:hover{
				animation-play-state:paused;/*当鼠标浮动到动画上时，动画暂停*/
			}
		</style>
	</head>
	<body>
		<div>哈哈！！</div>
	</body>
</html>

 

小青龙8085
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用 animation实现几个小案列
qq_44820039的博客
04-27 286
学习了animation发现它真的好玩，以前写动画必须要JS才能完成，JS复杂性高，需要对DOM频繁操作会导致页面重绘重新排版，造成阻塞。虽然这里说了JS的缺点但是它也有它的优点，今天不作细讲（请看下回分解）。 今天主要用animation来实现几个小动画。 一、安卓手机充电效果 这个图都不陌生吧，今天将用代码来实现它！ 首先写这个需要那些元素： 最外层div ：g-container 装充电...
CSS3之动画(animation)和四个小案例
al654123的博客
03-08 2436
一、动画(animation) 1.动画概述 可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。 2.语法 1.0%是动画的开始可以用from替代，100%是动画的完成可用to替代。 2.在CSS中用@keyframes中定义动画的样式，在用选择器调用animation调用动画 3.动画是是元素从一种样式逐渐变化成另一种样式的效果。可以任意改变动画节点。 @keyframes...
animation动画实例
CSDN_qiange的博客
07-08 2325
<template> <view> <page-head :title="title"></page-head> <view class="uni-padding-wrap uni-common-mt"> <view class="animation-element-wrapper"> <vie...
animate动画案例_Flutter实现动画
weixin_39716105的博客
11-25 437
对于一个前端的App来说，添加适当的动画，可以给用户更好的体验和视觉效果。所以无论是原生的iOS或Android，还是前端开发中都会提供完成某些动画的API。 Flutter有自己的渲染闭环，我们当然可以给它提供一定的数据模型，来让它帮助我们实现对应的动画效果。一. 动画API认识 动画其实是我们通过某些方式（比如对象，Animation对象）给Flutter引擎提供不同的值，而Flutter可...
css3：animation 动画详解（属性 + 案例）
知之为知之，不知为不知
05-05 993
部分css3的动画效果是在合成线程上实现的，不需要主线程介入，所以省去了重排和重绘的过程，这就大大提升了渲染效率。
CSS变形与动画（三）：animation帧动画 详解（用法 + 四个例子）
Cosmoshhhyyy的博客
08-18 403
本文介绍css中的animation帧动画，同时包含四个例子，更好的理解其用法。
行为活动CircleAnimation案例
04-05
本案例"行为活动CircleAnimation"由notoroid作者创建，是针对iOS8 SDK的一次创新尝试，它旨在实现一个模仿iOS8视图加载行为的动画效果。 首先，让我们了解这个案例的核心知识点： 1. **自定义动画**：Circle...
Animation动画实例
01-29
Android提供了多种动画机制，包括属性动画（Property Animation）、视图动画（View Animation）和过渡动画（Transition Animation）。属性动画是Android 3.0引入的新特性，允许开发者对对象的任何属性进行动画处理，...
animation.7z
03-03
《动画技术深度解析——以"animation.7z"案例集为例》 在计算机科学与信息技术领域，动画技术是一项至关重要的组成部分，尤其在游戏开发、网页设计、影视制作等多个行业中发挥着不可替代的作用。"animation.7z...
Frame Animation
01-15
基本动画案例:Tween Animation, Frame Animation，介绍参考:http://blog.csdn.net/forwardyzk/article/details/42739281
一款CoreAnimation功能案例
04-04
该源码是一个不错的一款CoreAnimation功能案例，源码ShareOfCoreAnimation，为大家带来一款CoreAnimation的示例使用demo，包含多种效果。包含震动，运动，绘图，旋转等等。
jquery经典实例60例-动画实例
06-01
jquery经典实例60例-动画实例 jquery经典实例60例-动画实例 jquery经典实例60例-动画实例
CSS动画animation的简单应用
J_Sky：编程爱好者,又菜又爱玩.
05-04 285
这个css动画包含了animation的常用属性，仔细观察可以了解到各个属性的含义，修改其属性值，观察盒子模型的动画的变化有助于了解这些属性的含义。要在CSS中创建动画，我们可以使用animation属性。该属性允许我们指定动画的关键帧、持续时间、时间函数、延迟和迭代次数。
vue自定义动画 以及animation包在vue中的使用
greed
09-15 1903
vue动画 自定义动画 当vue中，显示隐藏，创建移除，一个元素或者一个组件的时候，可以通过transition实现动画。 如果元素或组件离开，完成一个淡出效果： <transition name="fade"> <p v-if="show">100</p> </transition> .fade-leave { opacity: 1 } .fade-leave-active { transition: all 1s; } .fade-
animation动画案例
weixin_30745553的博客
02-28 493
最近一直苦恼做一个banner的进度条，原先用js改变width值，但明显卡顿。后来用了animation，超级好用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi...
animation动画过渡
weixin_45243726的博客
09-10 471
前言 一个简单的小案例，网页旋转六边形的图片墙 一、animation animation 参数一 参数二参数三参数四参数五 参数六 参数一：需要绑定的动画名称 参数二：完成动画所需要的时间 参数三：动画的速度 linear： 匀速运动 ；ease ：默认值，先慢再快；ease—in：以高速开始，逐渐减慢； ease-out：低速开始，逐渐加快。 参数四：动画开始前需要等待的时间。 参数五：动画循环的次数。 infinite：无限...
android动画例子,Android Animation（动画）实例
weixin_36254537的博客
05-25 372
动画在Android中可以有许多方式。在本章中，我们将讨论一个简单的和广泛使用的动画制作 - 所谓的补间动画方式。补间动画补间动画需要一些参数，如初始值，终值，大小，持续时间，旋转角度等，并对该对象执行所需的动画。它可以应用到任何类型的对象。因此，为了利用这一点，Android已经为我们提供了一个类叫做Animation.为了在android系统进行显示动画，我们将调用AnimationUtil...
animation动画小实例讲解
正在山路上的博客
09-25 295
使用css的animation将静态图实现动画效果
Animation 案例解释
weixin_34034261的博客
11-10 107
Animation 案例解释: ------------摘自W3c 过度动画类型： 　　　　　linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ...
animation.css案例
最新发布
08-30
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，其中包含了很多种常用的动画效果。在vue中使用animate.css的步骤如下： 1. 首先，下载animate.css库。 2. 在vue项目的main.js文件中，使用import语句引入animate.css： ``` import animated from 'animate.css' ``` 3. 接下来，你可以在需要使用动画效果的组件中，使用v-bind:class指令将animate.css中的动画类名绑定到组件的class属性上，从而应用相应的动画效果。 以下是一个使用animate.css的简单案例： ``` <template> <div class="my-component" v-bind:class="animationClass"> <h1>Hello, World!</h1> </div> </template> <script> export default { data() { return { animationClass: 'animate__animated animate__fadeIn', // 使用fadeIn动画效果 } }, } </script> <style> .my-component { /* 可以添加一些自定义样式 */ } </style> ``` 在上面的例子中，我们在data中定义了一个名为animationClass的属性，它的值是animate.css中的fadeIn动画类名。然后，在template中使用v-bind:class将animationClass绑定到组件的class属性上，这样就可以应用fadeIn动画效果了。注意，需要在类名前面添加`animate__animated`前缀。 你可以根据需要选择animate.css中的其他动画效果，并将相应的动画类名绑定到组件的class属性上，以实现不同的动画效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue中使用animate.css](https://blog.csdn.net/qq_45043000/article/details/128465256)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值