css动画（五）

最新推荐文章于 2024-07-18 17:34:14 发布
最新推荐文章于 2024-07-18 17:34:14 发布
阅读量88 收藏
点赞数
分类专栏： css动画 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43844392/article/details/104015230
版权

推荐动画五

效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
html代码

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3卡片鼠标悬停滑出分享按钮动画DEMO演示</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>
<div class="container">
<!-- Team members structure start -->
	<div class="team-members row">
		<!-- effect-1 html -->
		<div class="single-member effect-1">
			<div class="member-image">
				<img src="images/member_140x145.jpg" alt="Member">
			</div>
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<div class="social-touch">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
		</div>
		<!-- effect-1 html end -->
		
		<!-- effect-2 html -->
		<div class="single-member effect-2">
			<div class="member-image">
				<img src="images/member_270x210.jpg" alt="Member">
			</div>
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<div class="social-touch">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
		</div>
		<!-- effect-2 html end -->
		
		<!-- effect-3 html -->
		<div class="single-member effect-3">
			<div class="member-image">
				<img src="images/member_270x210.jpg" alt="Member">
			</div>
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<div class="social-touch">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
		</div>
		<!-- effect-3 html end -->
		
		<!-- effect-4 html -->
		<div class="single-member effect-4">
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
			</div>
			<div class="member-image">
				<img src="images/member_270x210.jpg" alt="Member">
			</div>
			<div class="more-info">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.</p>
				<div class="social-touch icon-colored">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
		</div>
		<!-- effect-4 html end -->
		
		<!-- effect-5 html -->
		<div class="single-member effect-5">
			<div class="member-image">
				<img src="images/member_270x210.jpg" alt="Member">
			</div>
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<div class="social-touch icon-colored">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
		</div>
		<!-- effect-5 html end -->
		
		<!-- effect-6 html -->
		<div class="single-member effect-6">
			<div class="member-image">
				<img src="images/member_270x210.jpg" alt="Member">
			</div>
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<div class="social-touch icon-colored">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
			<div class="border-green"></div>
		</div>
		<!-- effect-6 html end -->
		
		<!-- effect-7 html -->
		<div class="single-member effect-7">
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
			</div>
			<div class="member-image">
				<img src="images/member_270x210.jpg" alt="Member">
			</div>
			<div class="more-info">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.</p>
				<div class="social-touch icon-colored">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
		</div>
		<!-- effect-7 html end -->
		
		<!-- effect-8 html -->
		<div class="single-member effect-8">
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
			</div>
			<div class="member-image">
				<img src="images/member_270x210.jpg" alt="Member">
			</div>
			<div class="more-info">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Lorem ipsum dolor sit amet.</p>
				<div class="social-touch icon-colored">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
		</div>
		<!-- effect-8 html end -->
		
		<!-- effect-9 html -->
		<div class="single-member effect-9">
			<div class="member-info">
				<h3>Sophia</h3>
				<h5>ShowGilr</h5>
			</div>
			<div class="member-image">
				<img src="images/member_270x210.jpg" alt="Member">
			</div>
			<div class="more-info">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.</p>
				<div class="social-touch icon-colored">
					<a class="fb-touch" href="#"></a>
					<a class="tweet-touch" href="#"></a>
					<a class="linkedin-touch" href="#"></a>
				</div>
			</div>
		</div>
		<!-- effect-9 html end -->
		
	</div>
<!-- Team members structure start -->
</div>

</body>
</html>

css代码

body{ font-family: Lato,'Open Sans', sans-sarif; font-size: 16px; background-color: #1F1F1F; }
*{margin: 0; padding: 0; box-sizing: border-box;}
.container{margin: 0 auto; max-width: 1000px;}
.row{width: 103%; float: left; margin: 110px -1.5%;}

/*= common css to all effects =*/
.single-member{width: 280px; float: left; margin: 30px 2.5%; background-color: #fff; text-align: center; position: relative;}
.member-image img{max-width: 100%; vertical-align: middle;}
h3 {font-size: 24px; font-weight: normal; margin: 10px 0 0; text-transform: uppercase;}
h5 {font-size: 16px; font-weight: 300; margin: 0 0 15px; line-height: 22px;}
p {font-size: 14px; font-weight: 300; line-height: 22px; padding: 0 30px; margin-bottom: 10px;}
.social-touch a{display: inline-block; width: 27px; height: 26px; vertical-align: middle; margin: 0 2px; background-image: url(../images/social-icons.png); background-repeat: no-repeat; opacity: 0.7; transition: 0.3s;}
.social-touch a:hover{opacity: 1; transition: 0.3s;}
.fb-touch{background-position: 0 0;}
.tweet-touch{background-position: -35px 0;}
.linkedin-touch{background-position: -71px 0;}
.icon-colored .fb-touch{background-position: 0 -27px;}
.icon-colored .tweet-touch{background-position: -35px -27px;}
.icon-colored .linkedin-touch{background-position: -71px -27px;}
/*= common css to all effects end =*/

/*= effect-1 css =*/
.effect-1{border-radius: 5px 5px 0 0; padding-bottom: 40px;}
.effect-1 .member-image {border: 2px solid #fff; border-radius: 60px 0; display: inline-block; margin-top: -72px; overflow: hidden; transition: 0.3s;}
.effect-1 .social-touch{background-color: #e13157; position: absolute; left: 0; bottom: 0; height: 5px; overflow: hidden; padding: 5px 0 0; width: 100%; transition: 0.3s;}
.effect-1 .member-image img{transition: 0.3s; border-radius: 60px 0;}
.effect-1:hover .member-image{border-color: #e13157; transition: 0.3s; border-radius: 50%;}
.effect-1:hover .social-touch{padding: 6px 0; height: 38px; transition: 0.3s;}
/*= effect-1 css end =*/

/*= effect-2 css =*/
.effect-2{max-height: 302px; min-height: 302px; overflow: hidden;}
.effect-2 h3{padding-top: 7px; line-height: 33px;}
.effect-2 .member-image{border-bottom: 5px solid #1fb554; height: 212px; overflow: hidden; width: 100%; transition: 0.4s; display: inline-block; float: none; vertical-align: middle;}
.effect-2 .member-info{transition: 0.4s;}
.effect-2 .member-image img{width: 100%; vertical-align: bottom;}
.effect-2 .social-touch{background-color: #1fb554; float: left; left: 0; bottom: 0; overflow: hidden; padding: 5px 0; width: 100%; transition: 0.4s;}
.effect-2:hover .member-image{height: 81px; transition: 0.4s;}
/*= effect-2 css end =*/

/*= effect-3 css =*/
.effect-3{max-height: 302px; min-height: 302px; overflow: hidden;}
.effect-3 h3{padding-top: 7px; line-height: 33px;}
.effect-3 .member-image{border-bottom: 5px solid #e5642b; transition: 0.4s; height: 212px; width: 100%; display: inline-block; float: none; vertical-align: middle;}
.effect-3 .member-info{transition: 0.4s;}
.effect-3 .member-image img{width: 100%; vertical-align: bottom;}
.effect-3 .social-touch{background-color: #e5642b; float: left; left: 0; bottom: 0; overflow: hidden; padding: 5px 0; width: 100%; transition: 0.4s;}
.effect-3:hover .member-image{border-bottom: 0; border-radius: 0 0 50px 50px; height: 81px; display: inline-block; overflow: hidden; width: 109px; transition: 0.4s;}
/*= effect-3 css end =*/

/*= effect-4 css =*/
.effect-4{max-height: 289px; min-height: 289px; overflow: hidden;}
.effect-4 h3{line-height: 35px;}
.effect-4 .member-image{position: absolute; width: 100%; transition: 0.4s;}
.effect-4 .member-image img{width: 100%;}
.effect-4 .more-info{height: 0; transition: 0.4s; overflow: hidden; z-index: 9; position: relative; background-color: #fff;} 
.effect-4:hover .more-info{height: 208px; transition: 0.4s;}
/*= effect-4 css end =*/

/*= effect-5 css =*/
.effect-5{max-height: 289px; min-height: 289px; overflow: hidden;}
.effect-5 .member-info {background-color: #fff; position: absolute; width: 100%; top: 0; left: 0; height: 82px; transition: 0.3s; z-index: 2;}
.effect-5 .member-image{margin-top: 82px; float: left; width: 100%; position: relative; transition: 0.3s; z-index: 4;}
.effect-5 .member-image img{width: 100%;}
.effect-5 .member-info:before{border-left: 140px solid transparent; border-right: 140px solid transparent; border-top: 15px solid #fff; bottom: -15px; content: ""; left: 0; position: absolute; z-index: 9;}
.effect-5:hover .member-info{height: 215px; transition: 0.3s; z-index: 6;}
.effect-5:hover .member-image{margin-top: 200px; transition: 0.3s;}
/*= effect-5 css end =*/

/*= effect-6 css =*/
.effect-6{max-height: 289px; min-height: 289px; overflow: hidden;}
.effect-6 .member-info {background-color: #fff; position: absolute; width: 100%; top: 0; left: 0; height: 82px; transition: 0.3s; z-index: 2;}
.effect-6 .member-image{margin-top: 82px; float: left; width: 100%; position: relative; transition: 0.3s; z-index: 4; overflow: hidden;}
.effect-6 .member-image img{width: 100%;}
.effect-6:hover .member-info{height: 215px; transition: 0.3s; z-index: 6; border-radius: 0 0 50% 50%; overflow: hidden;}
.effect-6:hover .member-image{margin-top: 100px; transition: 0.3s; border-radius: 0;}
/*= effect-6 css end =*/

/*= effect-7 css =*/
.effect-7{max-height: 289px; min-height: 289px; overflow: hidden;}
.effect-7 h3{line-height: 35px;}
.effect-7 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
.effect-7 .member-image img{width: 100%; transition: 0.4s; opacity: 1; height: 100%;}
.effect-7 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;}
.effect-7:hover .member-image{bottom: 40%;}
.effect-7:hover .member-image img{width: 0; height: 0; transition: 0.4s; opacity: 0;}
/*= effect-7 css end =*/

/*= effect-8 css =*/
.effect-8{max-height: 289px; min-height: 289px; overflow: hidden;  perspective: 800px;}
.effect-8 h3{line-height: 35px;}
.effect-8 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
.effect-8 .member-image img{width: 100%; transition: 0.4s; height: 100%;}
.effect-8 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;}
.effect-8:hover .member-image{transform: rotateX(82deg); transform-origin: center bottom 0; transition: 0.4s;}
/*= effect-8 css end =*/

/*= effect-9 css =*/
.effect-9{max-height: 289px; min-height: 289px; overflow: hidden;  perspective: 800px;}
.effect-9 h3{line-height: 35px;}
.effect-9 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
.effect-9 .member-image img{width: 100%; transition: 0.4s; height: 100%;}
.effect-9 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;}
.effect-9:hover .member-image{transform: translateY(100%); transition: 0.4s;}
/*= effect-9 css end =*/

/*= Media Query 
=============== */
@media only screen and (max-width: 980px){
	.row{width: 100%; margin: 110px 0;}
	.team-members{text-align: center;}
	.single-member{float: none; display: inline-block; vertical-align: bottom;}
}
/*= Media Query End
=================== */
weixin_43844392
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS动画
LiHang1234567777的博客
07-21 4734
今天简单了解一下css动画一、css动画是什么？CSS中的动画类似于flash中的逐帧动画，表现细腻并且非常灵活，使用CSS中的动画可以取代许多网页中的动态图像、Flash动画或者JavaScript实现的特殊效果。二、使用步骤1.主要样式指定动画名称动画持续时间动画填充模式forwards;/*forwards把动画停在最后一个*/动画延迟时间animation-delay/*当值为负数时动画已经开始了多长时间*/2.读入数据...
CSS过渡动画
热门推荐
weixin_70815247的博客
07-21 1万+
transition是css3新增的⼀个功能，可以实现元素不同状态间的平滑过渡（当元素从⼀个状态进⼊到另⼀个状态时），经常⽤来制作⼀些动画效果。之前元素->元素hover状态直接切换，从开始状态到结束状态，瞬间完成，中间过程⼏乎不可⻅。过渡从开始状态到结束状态的中间过程可以查看格式transition过渡的属性完成时间(s)运动曲线延迟时间transitiontransition包含以下四个属性transition-property过渡属性。...
css的animation动画
yuan0209的博客
11-25 1万+
顾名思义，它可以控制动画的状态 – 运行或者暂停,类似于视频播放器的开始和暂停,是 CSS 动画中有限的控制动画状态的手段之一。在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果。属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由。中定义的第一帧这种说法，因为动画运行的第一帧和最后一帧的实际状态还会受到动画运行方向。，可以有效的构建更为随机的动画效果，让动画更加的自然。
CSS动画-Animation
温情
10-16 5486
动画是css3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制的效果。创建动画的原理是，将一套 样式逐渐变化为另一套样式。在动画过程中我们能够多次改变这套 样式。以百分比来规定改变发生的时间，或者通过关键词 和 ，等价于 和 。 就是需要绑定的的名称 这就是定义了一个名称为的动画，被元素调用 规定动画完成一个周期所花费的时间 意思是指定元素的时间向右移动 规定动画的速率曲线，也就是动画执行过程的
舞动屏幕盛宴：CSS3 动画的创意艺术之旅
小z的博客
04-16 2666
21(22)-1(3)- CSS 动画
CSS动画和JS动画对比
weixin_36106791的博客
08-31 2007
在工作中，经常会写点动画效果，常用的方式有CSS动画还有JS动画，根据项目的需求，采用的方案各不相同，但是两者实现的性能分析没有进行对比。总结网上相关资料，在这里简单整理下 本文主要讲以下这些内容 1、浏览器渲染流程 2、回流和重绘 3、CSS 动画 4、JS 动画 两者对比 ???? 1. 浏览器的渲染流程 渲染流程主要有4个步骤 解析 HTML 生成DOM 树 解析 CSS 样式生成 CSSOM 树，CSSOM 树与 DOM 树结合生成 Render tree 布局 Render Tree 对每个节点进
CSS动画效果
weixin_53912712的博客
07-09 1929
过渡、动画】变形平移、旋转
CSS动画按钮实例
six6de6的博客
07-14 1389
十分钟学会炫酷按钮
css加载动画
weixin_41897680的博客
09-25 8222
前言 感觉css动画真的很有意思，奈何太菜，想不出来。下面的这些例子都是从网上找的，我自己手敲的。教程来源也会进行标注。 加载动画 动画1 教程：点此查看 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
CSS系列之动画
老__L的博客
02-27 6737
本文主要介绍CSS的animation、animation-delay、animation-direction、animation-duration、animation-fill-mode、animation-iteration-count、animation-name、animation-play-state、animation-timing-function、@keyframes属性。 动画是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。
CSS 动画
12-13
CSS 动画 定义和用法 一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。 动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。 浏览器支持 表格中的数字表示支持该...
Css Hover动画文件
08-12
这种做法的好处在于，无需从零开始编写复杂的CSS动画，而是可以直接利用已有的、经过优化的代码，节省时间和精力。 此外，`例子.html`文件可能包含了一些示例，演示了如何在实际页面中使用`hover.css`中的动画效果...
CSS动画21个小案例
07-06
这个“CSS动画21个小案例”集合涵盖了多种实用且创意的动画效果，旨在帮助开发者深入理解和掌握CSS动画的使用。下面我们将详细探讨这些案例涉及的关键知识点。 1. **关键帧动画（@keyframes）**：CSS动画的核心在于...
css 动画 大合集酷炫特效
01-06
CSS动画则是CSS3的一个重要特性，它为网页元素提供了丰富的动态效果，使得网站交互更加生动有趣。本资源包"css 动画 大合集酷炫特效"汇聚了一系列高级且实用的CSS动画效果，适用于各种网页设计项目。 首先，我们来...
css 加载动画特效
09-13
CSS动画是通过`@keyframes`规则创建的，它定义了一个动画的开始状态和结束状态，以及在动画过程中各阶段的样式变化。例如： ```css @keyframes loadingAnimation { 0% { transform: rotate(0deg); } 100% { ...
CSS实现从上往下过渡效果
最新发布
Rverdoser的博客
07-18 152
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 226
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1296
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
css-grid布局(栅格布局)
YogaMiller的博客
07-15 817
* 数字和命名搭配搭配也可, 1 / t 注意如果是一个位置的话可省略, 比如 1 / 2 2 / 3 这里的2 3就可以省略*//* [d]150px 100px;搞不懂为什么加个命名就变小了.... *//* 目前喜欢这种的方式, 比较直观 . 表示这个位置空着 */grid 一个比flex更强大的布局,适合做整体布局。/* g-r-start g-r-end 的简称 *//* 相同的名字 代表相同的区域 */fr 只能放在第二个参数。
css动画
05-28
CSS动画是通过CSS属性的变化来实现动画效果的一种技术。可以使用CSS动画来实现各种效果，比如旋转、缩放、移动、渐变等等。以下是一个简单的CSS动画示例： ```css .box { width: 50px; height: 50px; background-color: red; animation: myanimation 2s ease-in-out infinite; } @keyframes myanimation { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } ``` 这个示例定义了一个正方形div，通过`animation`属性指定了动画名称、持续时间、动画时间函数和是否重复播放。在`@keyframes`中定义了动画的关键帧，也就是在动画的不同时间点需要改变的CSS属性值。这个示例中的动画是一个旋转360度的效果，持续时间为2秒，缓动函数为缓进缓出，一直重复播放。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值