CSS动画

最新推荐文章于 2022-07-29 17:31:21 发布
最新推荐文章于 2022-07-29 17:31:21 发布
阅读量252 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/phone13144830339/article/details/78688513
版权

index1.html

<html>
	<head>
	<title>动画</title>
	<meta name="author" content="text/html;charset=UTF-8" />
	<style>
		body{font-family: 楷体;}
		span{display:block;height:50px;margin-top:50px;}
		
		.a1{
			transform:translate(60px);
			text-align:center;font-size:25px;
			/*
			动画特效 
			animation:animations1 2s ease-out 0.5s 2 alternate-reverse forwards;
			参数1 animation-name:对象应用的动画名称 
			参数2 animation-duration:动画持续时间 
			参数3 animation-timing-function:对象的过渡类型 
			参数4 animation-delay:动画延迟时间
			参数5 animation-iteration-count:动画循环次数 
			参数6 animation-direction（normal、reverse、alternate、alternate-reverse）:是否反向运行
			参数7 animation-play-state（none、forwards、backwards、both）:对象设置动画之外的状态
			*/
			animation:animations1 2s ease-out 0.5s 2 alternate-reverse forwards;
		}
		@keyframes animations1{
			0%{transform:translate(0);opacity:0;}
			50%{transform:translate(30px);opacity:1;}
			70%{transform:translate(60px);opacity:1;}
			100%{transform:translate(90px);opacity:0;}
		}
		
		.a2{
			opacity: 0;
			text-align:center;font-size:75px;
			animation:animations2 5s ease-in-out 4s 2 alternate-reverse forwards;
		}
		@keyframes animations2{
			0%{opacity:0;}
			40%{opacity:.8;}
			45%{opacity:.3;}
			50%{opacity:.8;}
			55%{opacity:.3;}
			60%{opacity:.8;}
			100%{opacity:0;}
		}
		
		.a3{
			opacity: 0;
			text-align:center;font-size:50px;
			transform:translate(100px);
			animation:animations3 2s ease-out 2s forwards;
		}
		@keyframes animations3{
			0%{transform:translate(200px);opacity:0;}
			50%{transform:translate(150px);opacity:1;}
			70%{transform:translate(100px);opacity:1;}
			100%{transform:translate(50px);opacity:0;}
		}
	</style>
	</head>
	<body>
	<div>
		<span class="a1">飘呀飘</span>
		<span class="a2">蒲公英</span>
		<span class="a3">摇啊摇</span>
	</div>
	</body>
</html>

index2.html

<html lang="zh-cmn-Hans">
<head>
<title>动画</title>
<meta name="author" content="text/html;charset=UTF-8"/>
<style>
body {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
.cube {
    position: relative;
    font-size: 80px;
    width: 2em;
    margin: 1.5em auto;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(30deg);
}
.cube > div {
    position: absolute;
    width: 2em;
    height: 2em;
    background: rgba(0, 0, 0, .1);
    border: 1px solid #999;
    color: white;
    text-align: center;
    line-height: 2em;
}
.front {
    transform: translateZ(1em);
	opacity:0;
	animation:animations1 2s ease-out 5s forwards;
}
.top {
    transform: rotateX(90deg) translateZ(1em);
	opacity:0;
	animation:animations1 2s ease-out 6s forwards;
}
.right {
    transform: rotateY(90deg) translateZ(1em);
	opacity:0;
	animation:animations1 2s ease-out 3s forwards;
}
.left {
    transform: rotateY(-90deg) translateZ(1em);
	opacity:0;
	animation:animations1 2s ease-out 4s forwards;
}
.bottom {
    transform: rotateX(-90deg) translateZ(1em);
	opacity:0;
	animation:animations1 2s ease-out 1s forwards;
}
.back {
    transform: rotateY(-180deg) translateZ(1em);
	opacity:0;
	animation:animations1 2s ease-out 2s forwards;
}
@keyframes animations1{
	0%{opacity:0;}
	25%{opacity:0.25;}
	50%{opacity:0.5;}
	75%{opacity:0.75;}
    100%{opacity:1;}
}
</style>
</head>
<body>
<div class="cube">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="right">3</div>
    <div class="left">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
</div>
</body>
</html>


index3.html

<html lang="zh-cmn-Hans">
<head>
<title>动画</title>
<meta name="lucheng" content="text/html;charset=UTF-8"/>
<style>
body {
    perspective: 1000px;
}
.cube {
    position: relative;
    font-size: 80px;
    width: 2em;
    margin: 5em auto;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(30deg);
}
.cube > div {
    position: absolute;
    width: 2em;
    height: 2em;
    background: rgba(0, 0, 0, .1);
    border: 1px solid #999;
    color: white;
    text-align: center;
    line-height: 2em;
}
.front {
    transform: translateZ(1em);
	animation:animations5 2s ease-out 1s forwards;
}
.top {
    transform: rotateX(90deg) translateZ(1em);
	animation:animations1 2s ease-out 1s forwards;
}
.right {
    transform: rotateY(90deg) translateZ(1em);
	animation:animations3 2s ease-out 1s forwards;
}
.left {
    transform: rotateY(-90deg) translateZ(1em);
	animation:animations4 2s ease-out 1s forwards;
}
.bottom {
    transform: rotateX(-90deg) translateZ(1em);
	animation:animations6 2s ease-out 1s forwards;
}
.back {
    transform: rotateY(-180deg) translateZ(1em);
	animation:animations2 2s ease-out 1s forwards;
}
@keyframes animations1{
	0%{transform:rotateX(90deg) translateZ(5em);}
	25%{transform:rotateX(90deg) translateZ(4em);}
	50%{transform:rotateX(90deg) translateZ(3em);}
	75%{transform:rotateX(90deg) translateZ(2em);}
    100%{transform:rotateX(90deg) translateZ(1em);}
}
@keyframes animations2{
	0%{transform:rotateY(-180deg) translateZ(5em);}
	25%{transform:rotateY(-180deg) translateZ(4em);}
	50%{transform:rotateY(-180deg) translateZ(3em);}
	75%{transform:rotateY(-180deg) translateZ(2em);}
    100%{transform:rotateY(-180deg) translateZ(1em);}
}
@keyframes animations3{
	0%{transform:rotateY(90deg) translateZ(5em);}
	25%{transform:rotateY(90deg) translateZ(4em);}
	50%{transform:rotateY(90deg) translateZ(3em);}
	75%{transform:rotateY(90deg) translateZ(2em);}
    100%{transform:rotateY(90deg) translateZ(1em);}
}
@keyframes animations4{
	0%{transform:rotateY(-90deg) translateZ(5em);}
	25%{transform:rotateY(-90deg) translateZ(4em);}
	50%{transform:rotateY(-90deg) translateZ(3em);}
	75%{transform:rotateY(-90deg) translateZ(2em);}
    100%{transform:rotateY(-90deg) translateZ(1em);}
}
@keyframes animations5{
	0%{transform: translateZ(5em);}
	25%{transform: translateZ(4em);}
	50%{transform: translateZ(3em);}
	75%{transform: translateZ(2em);}
    100%{transform: translateZ(1em);}
}
@keyframes animations6{
	0%{transform:rotateX(-90deg) translateZ(5em);}
	25%{transform:rotateX(-90deg) translateZ(4em);}
	50%{transform:rotateX(-90deg) translateZ(3em);}
	75%{transform:rotateX(-90deg) translateZ(2em);}
    100%{transform:rotateX(-90deg) translateZ(1em);}
}
</style>
</head>
<body>
<div class="cube">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="right">3</div>
    <div class="left">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
</div>
</body>
</html>


phone13144830339
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3动画animation讲解
zxh的专栏
08-28 789
CSS动画基础 种类：  变形(transformation)、变换(transition)和动画(animation) 核心：动画名、关键帧 关键帧：   描述在整个动画过程中，会发生变化的属性列表（也就是，哪些属性会改变，如何改变以及什么时候改变）。 主要步骤：定义动画 、将其赋给指定的HTML元素（或元素）。 定义动画： 1、使用@keyframes 规则来声明关
CSS初入门：动画实现-animation和2D转换模块
lalala_dxf的博客
03-23 2735
CSS中的动画 简介 目前由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作。 过渡（transition）与动画（animation）之间的区别 （1）不同点：
八.CSS之animation(动画)
scyllake的博客
11-22 381
1. 过渡 过渡（transition） 通过过渡可以指定一个属性发生变化时的切换方式 通过过渡可以创建一些非常好的效果，提升用户的体验 1.1 transition-property: 指定要执行过渡的属性 ​ 多个属性间使用,隔开 ​ 如果所有属性都需要过渡，则使用all关键字 ​ 大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡（auto不是有效数值，过渡动画效果不会生效）
CSS3动画和文本的溢出显示省略号
web_hxx的博客
05-16 910
CSS3动画知识点 目前浏览器都不支持 @keyframes 规则。 Firefox 支持替代的 @-moz-keyframes 规则。 Opera 支持替代的 @-o-keyframes 规则。 Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。 帧的动画的语法设置 @keyframes animationname {keyframes-selector ...
CSS3动画animation
m0_72943141的博客
07-29 403
animation动画简介 animation实现动画主要由两个部分组成 1.通过类似Flash动画的关键帧来声明一个动画 2.在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
CSS 动画
12-13
CSS 动画 定义和用法 一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。 动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。 浏览器支持 表格中的数字表示支持该...
CSS动画21个小案例
07-06
这个“CSS动画21个小案例”集合涵盖了多种实用且创意的动画效果，旨在帮助开发者深入理解和掌握CSS动画的使用。下面我们将详细探讨这些案例涉及的关键知识点。 1. **关键帧动画（@keyframes）**：CSS动画的核心在于...
css动画 - 把你喜欢css动画嵌入到浏览器中
06-01
本文将深入探讨如何利用CSS动画技术，将各种动态效果嵌入到浏览器中，提升用户体验。我们将围绕七个不同的主题进行讨论： 一、齿轮Loading 齿轮加载动画是一种常见的网页加载指示器，它通过旋转的齿轮形象地展示...
常见css动画-解压直用
最新发布
09-18
"常见css动画-解压直用"这个资源包可能包含了一系列预设好的CSS动画效果，方便开发者直接应用到自己的项目中。 首先，我们来深入理解CSS动画的基本概念。CSS动画由两部分组成：关键帧（Keyframes）和动画属性。关键...
css 动画 大合集酷炫特效
01-06
CSS动画则是CSS3的一个重要特性，它为网页元素提供了丰富的动态效果，使得网站交互更加生动有趣。本资源包"css 动画 大合集酷炫特效"汇聚了一系列高级且实用的CSS动画效果，适用于各种网页设计项目。 首先，我们来...
CSS3常用动画效果
Lewis_1993的博客
05-18 1671
在做CSS3动画时, 除了原生动画以外, 经常要实现一些更复杂, 更符合物体运动规律的动画效果.像很多网站有回到顶部的功能，有的是点击按钮，瞬间就回到顶部了，有的则是匀速回到顶部，而最符合运动规律的，则是匀加速回到顶部。
css3动画有哪3种,手写CSS3动画的几种流派
weixin_34219634的博客
08-03 173
阳春三月,人好,物好,心情好. 差不多也是get新技能的时期. 作为一名能力者,我们将目标锁定到了css3 animation中. 众所周知, 自从css3 加入了 3d硬件加速 就变的叼的一b 动画执行线程单独独立执行,使得我们触碰到了GPU这个神奇的东西, 性能一下子提高八度. 众多场景应用 微应用 营销活动 充斥在我们的朋友圈中. css3动画虽然 上手简单 随便都能搞一发 , 但是想要...
css3d动画案例,CSS3动画animation小案例-各种进度条效果
weixin_35942549的博客
08-03 516
CSS语言：CSSSCSS确定body {background: #161616;}* {margin: 0; padding: 0; outline: none;}.container {width: 960px; margin: 0 auto; overflow: hidden;}/* PROGRESS BAR */#progress {list-style:none;width:125px;...
css3过度动画网页加载中,加载css3过渡动画？
weixin_42356958的博客
08-03 177
您可以在页面加载时运行CSS动画而无需使用任何JavaScript;你只需要使用CSS3关键帧。我们来看一个例子......以下是仅使用CSS3滑动到位的导航菜单的演示：@keyframesslideInFromLeft{0%{transform:translateX(-100%);}100%{transform:translateX(0);}}header{/*Thissec...
CSS3动画：动画文本
路漫漫其修远兮，吾将上下而求索。
02-27 617
动画文本 实现思路： 使用了css3的animation 动画属性 用js将文本拆分为字符数组["今", "天", "不", "学", "习", " ", "~", " ", "明", "天", "变", "垃", "圾", " ", "~", " "] 循环数组，创建span元素，内容分别设为每个字符，并设置不同的css属性animationDelay(动画开始时间) 最后将span元素加入...
animation
易天海
11-22 808
和其他CSS3属性类似，animation包含很多子属性，我们一起看看： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fi...
html帧动画效果,利用css3-animation实现逐帧动画效果
weixin_32183427的博客
06-04 348
本文分享了用css3-animation来制作逐帧动画的实现方法，供大家参考，具体内容如下常见用法：CSS Code复制内容到剪贴板:hover{animation:mymove4sease-out1sbackwards;}@-webkit-keyframesmymove/*SafariandChrome*/{from{left:0px;}to{left:200px;}...
css animation学习
u012137648的博客
05-22 328
css animation学习 上一篇写了transition的用法，其实animation也是做动画利器，相比于transition，animation可以做出更多更大的动画效果 今天就来学一下css的animation的用法 用法 如下所示animation属性可以有8个值，当然这8个值可以分开写 .someclass { /*[animation-name] [animation-duration] [animation-timing-function] [animation-delay]
css动画
05-28
CSS动画是通过CSS属性的变化来实现动画效果的一种技术。可以使用CSS动画来实现各种效果，比如旋转、缩放、移动、渐变等等。以下是一个简单的CSS动画示例： ```css .box { width: 50px; height: 50px; background...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值