9种常用CSS动画

最新推荐文章于 2024-04-03 02:18:32 发布
最新推荐文章于 2024-04-03 02:18:32 发布
阅读量1.2w 收藏 198
点赞数 35
分类专栏： css html 文章标签： css3 css html animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48871924/article/details/109340535
版权
css 同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
html
1 篇文章 0 订阅
订阅专栏
复制可用
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>9种css动画</title>
		<link rel="stylesheet" type="text/css" href="css/demo2.css"/>
		<link rel="icon" sizes="any" mask="" href="./img/baidu.svg">
		<style>
			@charset "utf-8";
			*{padding: 0;margin: 0;}
			figure{
				width: 33.3%;
				height: 365px;
				float: left;
				overflow: hidden;
				position: relative;
			}
			img{
				height:100%;
				transition: all 1s;
			}
			figure:hover img{
				-webkit-transform: translateX(-10px);
				-moz-transform: translateX(-10px);
				-ms-transform: translateX(-10px);
				-o-transform: translateX(-10px);
				transform: translateX(-10px);
				opacity: 0.5;
			}
			ul,li{
				list-style: none;
			}
			h2,p,li,div{
				position: absolute;
				transition: all 0.5s;
				color: #000;
			}
			/* 动画1 */
			.effect1 h2{
				
				left:10%;
				bottom:30%;
				
			}
			.effect1 p{
				
				left:10%;
				top:100%;
				color: #000;
			}
			.effect1:hover h2{
				-webkit-transform: translateY(-15px);
				-moz-transform: translateY(-15px);
				-ms-transform: translateY(-15px);
				-o-transform: translateY(-15px);
				transform: translateY(-15px);
			}
			.effect1:hover p{
				/*-webkit-transform: translateY(-30px);
				-moz-transform: translateY(-30px);
				-ms-transform: translateY(-30px);
				-o-transform: translateY(-30px);
				transform: translateY(-30px);*/
				top:80%;
			}
			/* 动画2 */
			.effect2 h2{
				top:20%;
				left:15%;
			}
			.effect2 ul li{
				background-color: #fff;
				color: #000;
			}
			.effect2 ul li:nth-child(1){
				top:45%;
				left:15%;
				-webkit-transform: translateX(-200px);
				-moz-transform: translateX(-200px);
				-ms-transform: translateX(-200px);
				-o-transform: translateX(-200px);
				transform: translateX(-200px);;
			}
			.effect2 ul li:nth-child(2){
				top:55%;
				left:15%;
				-webkit-transition-delay: 0.2s;
				-moz-transition-delay: 0.2s;
				-ms-transition-delay: 0.2s;
				-o-transition-delay: 0.2s;
				transition-delay: 0.2s;
				-webkit-transform: translateX(-200px);
				-moz-transform: translateX(-200px);
				-ms-transform: translateX(-200px);
				-o-transform: translateX(-200px);
				transform: translateX(-200px);;
			}
			.effect2 ul li:nth-child(3){
				top:65%;
				left:15%;
				-webkit-transition-delay: 0.4s;
				-moz-transition-delay: 0.4s;
				-ms-transition-delay: 0.4s;
				-o-transition-delay: 0.4s;
				transition-delay: 0.4s;
				-webkit-transform: translateX(-300px);
				-moz-transform: translateX(-300px);
				-ms-transform: translateX(-300px);
				-o-transform: translateX(-300px);
				transform: translateX(-300px);;
			}
			.effect2:hover ul li{
				-webkit-transform: translateX(0);
				-moz-transform: translateX(0);
				-ms-transform: translateX(0);
				-o-transform: translateX(0);
				transform: translateX(0);
			}
			/* 动画3 */
			.effect3 h2{
				top:20%;
				left:15%;
			}
			.effect3 p{
				width: 100%;
				bottom: 0;
				color: #000;
				background-color: #fff;
				line-height: 24px;
				text-indent: 32px;
				-webkit-transform: translateY(50px);
				-moz-transform: translateY(50px);
				-ms-transform: translateY(50px);
				-o-transform: translateY(50px);
				transform: translateY(50px);;
			}

			.effect3:hover p{
				-webkit-transform: translateY(0);
				-moz-transform: translateY(0);
				-ms-transform: translateY(0);
				-o-transform: translateY(0);
				transform: translateY(0);
			}
			/* 动画4 */
			.effect4 div{
				width: 150%;
				height:50%;
				top:100%;
				background-color: #fff;
				-webkit-transform-origin: 0% 0%;
				-moz-transform-origin: 0% 0%;
				-ms-transform-origin: 0% 0%;
				-o-transform-origin: 0% 0%;
				transform-origin: 0% 0%;
				/*-webkit-transform: rotate(-15deg);
				-moz-transform: rotate(-15deg);
				-ms-transform: rotate(-15deg);
				-o-transform: rotate(-15deg);
				transform: rotate(-15deg);*/
			}
			.effect4:hover div{
				-webkit-transform: rotate(-15deg);
				-moz-transform: rotate(-15deg);
				-ms-transform: rotate(-15deg);
				-o-transform: rotate(-15deg);
				transform: rotate(-15deg);
			}
			.effect4 ul li{
				bottom: 25px;
				color: #000;
				font-size: 18px;
				-webkit-transform: translateY(50px);
				-moz-transform: translateY(50px);
				-ms-transform: translateY(50px);
				-o-transform: translateY(50px);
				transform: translateY(50px);
			}
			.effect4 ul li:nth-child(2){
				right:30px;
				-webkit-transition-delay: 0.1s;
				-moz-transition-delay: 0.1s;
				-ms-transition-delay: 0.1s;
				-o-transition-delay: 0.1s;
				transition-delay: 0.1s;
			}
			.effect4 ul li:nth-child(1){
				right:90px;
			}
			.effect4:hover ul li{
				-webkit-transform: translateY(0);
				-moz-transform: translateY(0);
				-ms-transform: translateY(0);
				-o-transform: translateY(0);
				transform: translateY(0);
			}
			/* 动画5 */
			.effect5 h2{
				left:20%;
				top:20%;
				-webkit-transform: translateX(-50px);
				-moz-transform: translateX(-50px);
				-ms-transform: translateX(-50px);
				-o-transform: translateX(-50px);
				transform: translateX(-50px);
			}
			.effect5:hover h2{
				-webkit-transform: translateX(0);
				-moz-transform: translateX(0);
				-ms-transform: translateX(0);
				-o-transform: translateX(0);
				transform: translateX(0);
			}
			.effect5 p{
				left:25%;
				top:30%;
				-webkit-transform: translateY(50px);
				-moz-transform: translateY(50px);
				-ms-transform: translateY(50px);
				-o-transform: translateY(50px);
				transform: translateY(50px);
			}
			.effect5:hover p{
				-webkit-transform: translateY(0);
				-moz-transform: translateY(0);
				-ms-transform: translateY(0);
				-o-transform: translateY(0);
				transform: translateY(0);
			}
			.effect5 div{
				width: 70%;
				height:70%;
				left:15%;
				top:15%;
				border:2px solid #f66;
				-webkit-transform:  translateY(-350px) rotate(0);
				-moz-transform:  translateY(-350px) rotate(0);
				-ms-transform: translateY(-350px) rotate(0);
				-o-transform:  translateY(-350px) rotate(0);
				transform:  translateY(-350px) rotate(0);
			}
			.effect5:hover div{
				-webkit-transform:translateY(0) rotate(360deg) ;
				-moz-transform:translateY(0) rotate(360deg) ;
				-ms-transform:translateY(0) rotate(360deg) ;
				-o-transform:translateY(0) rotate(360deg) ;
				transform:translateY(0) rotate(360deg) ;
			}
			/* 动画6 */
			.effect6 h2{
				top:20%;
				left:10%;
				-webkit-transform: skew(90deg);
				-moz-transform: skew(90deg);
				-ms-transform: skew(90deg);
				-o-transform: skew(90deg);
				transform: skew(90deg);
			}
			.effect6 p{
				left:10%;top:30%;
				-webkit-transform: skew(90deg);
				-moz-transform: skew(90deg);
				-ms-transform: skew(90deg);
				-o-transform: skew(90deg);
				transform: skew(90deg);
			}
			.effect6:hover h2,.effect6:hover p{
				-webkit-transform: skew(0);
				-moz-transform: skew(0);
				-ms-transform: skew(0);
				-o-transform: skew(0);
				transform: skew(0);
			}
			/* 动画7 */
			.effect7 img{
				-webkit-transform: scale(1.2);
				-moz-transform: scale(1.2);
				-ms-transform: scale(1.2);
				-o-transform: scale(1.2);
				transform: scale(1.2);
			}
			.effect7 div{
				width: 70%;
				height:70%;
				border: 2px solid #000;
				left:15%;
				top:15%;
				-webkit-transform: scale(1.2);
				-moz-transform: scale(1.2);
				-ms-transform: scale(1.2);
				-o-transform: scale(1.2);
				transform: scale(1.2);
			}
			.effect7 h2{
				left:20%;top:20%;
				-webkit-transform: scale(1.2);
				-moz-transform: scale(1.2);
				-ms-transform: scale(1.2);
				-o-transform: scale(1.2);
				transform: scale(1.2);
			}
			.effect7 p{
				left:20%;top:40%;
				-webkit-transform: scale(1.2);
				-moz-transform: scale(1.2);
				-ms-transform: scale(1.2);
				-o-transform: scale(1.2);
				transform: scale(1.2);
			}
			.effect7:hover *{
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-ms-transform: scale(1);
				-o-transform: scale(1);
				transform: scale(1);
			}
			/* 动画8 */
			.effect8 h2{
				left: 20%;
				top:20%;
				-webkit-transform: translateX(-50px);
				-moz-transform: translateX(-50px);
				-ms-transform: translateX(-50px);
				-o-transform: translateX(-50px);
				transform: translateX(-50px);
			}
			.effect8:hover h2{
				-webkit-transform: translateX(0);
				-moz-transform: translateX(0);
				-ms-transform: translateX(0);
				-o-transform: translateX(0);
				transform: translateX(0);
			}

			.effect8 p{
				left:25%;
				top:30%;
				-webkit-transform: translateY(30px);
				-moz-transform: translateY(30px);
				-ms-transform: translateY(30px);
				-o-transform: translateY(30px);
				transform: translateY(30px);
				opacity: 0;
			}
			.effect8:hover p{
				-webkit-transform: translateY(0);
				-moz-transform: translateY(0);
				-ms-transform: translateY(0);
				-o-transform: translateY(0);
				transform: translateY(0);
				opacity: 1;
			}
			.effect8 #borderW{
				/*width: 80%;
				height:70%;
				left: 10%;
				top:15%;
				border: 1px solid #fff;
				border-left:0;
				border-right: 0;
				-webkit-transform: scale(0,1);
				-moz-transform: scale(0,1);
				-ms-transform: scale(0,1);
				-o-transform: scale(0,1);
				transform: scale(0,1);*/
				width: 0;
				left:50%;
				height:70%;
				top:15%;
				border: 1px solid #000;
				border-left:0;
				border-right: 0;
			}
			.effect8:hover #borderW{
				/*-webkit-transform: scale(1,1);
				-moz-transform: scale(1,1);
				-ms-transform: scale(1,1);
				-o-transform: scale(1,1);
				transform: scale(1,1);*/
				left:10%;
				width: 80%;
				
			}
			.effect8 #borderH{
				width: 70%;
				height:80%;
				left:15%;
				top:10%;
				border:1px solid #000;
				border-top:0;
				border-bottom:0;
				-webkit-transform: scale(1,0);
				-moz-transform: scale(1,0);
				-ms-transform: scale(1,0);
				-o-transform: scale(1,0);
				transform: scale(1,0);
			}
			.effect8:hover #borderH{
				-webkit-transform: scale(1,1);
				-moz-transform: scale(1,1);
				-ms-transform: scale(1,1);
				-o-transform: scale(1,1);
				transform: scale(1,1);
			}

		</style>
	</head>
	<body>
		<!-- 动画1 -->
		<figure class="effect1">
			<img src="img/pic1.jpg"/>
			<h2>平移动画</h2>
			<p>最简单的平移动画</p>
		</figure>
		<!-- 动画2 -->
		<figure class="effect2">
			<img src="img/pic2.jpg"/>
			<h2>平移动画</h2>
			<ul >
				<li>多条图片简介文字</li>
				<li>逐一飞入动画</li>
				<li> 利用动画延时达到效果</li>
			</ul>
		</figure>
		<!-- 动画3 -->
		<figure class="effect3">
			<img src="img/pic3.jpg"/>
			<h2>底部滑出动画</h2>
			<p>
				translate属性可以制作多种动画，一个简单的位置移动可以制作出多种效果，重要看制作师们能否开动想象力。
			</p>
		</figure>
		<!-- 动画4 -->
		<figure class="effect4">
			<img src="img/pic4.jpg"/>
			<div></div>
			<ul>
				<li>info1</li>
				<li>info2</li>
			</ul>
		</figure>
		<!-- 动画5 -->
		<figure class="effect5">
			<img src="img/pic5.jpg"/>
			<h2>旋转飞入</h2>
			<p>通过旋转和位移</p>
			<div></div>
		</figure>
		<!-- 动画6 -->
		<figure class="effect6">
			<img src="img/pic6.jpg"/>
			<h2>扭曲飞入飞</h2>
			<p>去通过扭曲和位移，制作出飞入的效果。扭曲属到达90度。元素就看不见了</p>
		</figure>
		<!-- 动画7 -->
		<figure class="effect7">
			<img src="img/pic7.jpg"/>
			<div></div>
			<h2>缩放</h2>
			<p>缩放缩放缩放缩放缩放</p>
		</figure>
		<!-- 动画8 -->
		<figure class="effect8">
			<img src="img/pic8.jpg"/>
			<h2>绘制线条效果</h2>
			<p>通过缩放属性绘制边框线条</p>
			<div id="borderW"></div>
			<div id="borderH"></div>
		</figure>
		<!-- 动画9 -->
		<figure class="effect9">
			<img src="img/pic9.jpg"/>
		</figure>
		
	</body>
</html>
三有鹿
关注
  • 35
    点赞
  • 踩
  • 198
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
常用css动画整理收藏
羽筠的博客
01-26 1545
经常用到的动画效果编写后留存整理,方便以后直接使用 /* 向左移动并弹性显示 */ @-webkit-keyframes fadeToLeftTan{ 0%{ -webkit-transform:translateX(100%); opacity:0;} 70%{ -webkit-transform:translateX(-5%); opacity:1;} 80%{ -webkit-transform:translateX(2%); opacity:1;} 90%{ -webkit-trans.
28个炫酷的纯CSS特效动画示例（含源代码）
大剑师兰特的GIS世界
01-15 1万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
9种常用CSS动画，看这一篇就够了
最新发布
m0_75280563的博客
04-03 301
top:65%;left:15%;;/* 动画3 */top:20%;left:15%;bottom: 0;;/* 动画4 */height:50%;top:100%;right:90px;/* 动画5 */left:20%;top:20%;left:25%;top:30%;
这些css 动画效果你一定要收藏
weixin_53561783的博客
04-18 1075
分享一下好用涉及方面广的css动画给大家，让大家的网站更优雅 3.交错动画loading效果
深入浅出 CSS 动画
热门推荐
前端开发博客
05-21 2万+
关注公众号前端开发博客，领27本电子书回复加群，自助秒进前端群本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。CSS 动画介绍及语法首先，我们来简单介绍一下 CSS 动画。最新版本的 CSS 动画由规范 -- CSS Animations Level 1[1] 定义。CSS 动画用于...
css动画详解
m0_56713342的博客
10-30 6384
1、使⽤css技术来控制⻚⾯元素css属性的变化。2、css动画优势：不需要⽤js也能写，⽐较流畅，由浏览器去执⾏动画，减少代码量，性能⽐较⾼3、⼀般兼容到ie10以上浏览器（⼀般没太⼤问题）二、过渡1.过渡的理解过渡（transition）[træn'siʒǝn]-通过过渡可以指定⼀个属性发⽣变化时的切换⽅式，平滑的过渡-需要在某种条件下触发，例如hover、active、focus情况下-⼀次性的效果，不能循环，只能做简单的动画-只有两帧，设置动画初始值和结束值。
css动画效果之animation的常用样式
11-19
animation动画 定义一个动画： /*设置一个关键帧，定义动画每一步执行的动作*/ @keyframes mybox{ 0%{transform: translate(0,0);} 25%{transform: translate(200px,0);} 50%{transform: translate(200px,200px)...
CSS3同心矩形动画特效
04-25
CSS3同心矩形动画特效是一款彩色好看的递归同心矩形旋转动画特效。
纯css3卡通小狗动画特效
04-25
纯css3卡通小狗动画特效是一款基于html和css3简单实现的摇尾巴的小黄狗动画特效。
CSS3波浪音阶动画特效
04-25
CSS3波浪音阶动画特效是一款基于js跟css3绘制的音乐播放音阶频率波浪动画特效。
css3样式动画
09-10
常用的div动画库，需要IE10及以上版本、chrome、firefox等支持css3的浏览器
CSS系列之动画
老__L的博客
02-27 4923
本文主要介绍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动画库合集+CSS动画效果演示
sshj869的博客
08-31 2628
CSS动画库合集+CSS动画效果演示 CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。 要创建 CSS3 动画，你需要了解 @keyframes 规则。 @keyframes 规则是创建动画。 @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。 下面给大家介绍：常见CSS动画库合集+CSS动画效果演示： 一、animates.css animate.css是来自dropbox的工程师Daniel Eden开发的
css基础知识十二：CSS3常见动画有哪些？实现方式？
Allen-Ye博客
06-27 1757
CSS3常见动画有哪些？实现方式？
常用的CSS动画效果
happy81997的博客
03-21 2207
【代码】常用的CSS动画效果。
12.CSS3常见动画有哪些？实现方式？
kleinBlue.的博客
11-07 591
一、是什么 CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块 即指元素从一种样式逐渐过渡为另一种样式的过程 常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合 css实现动画的方式，有如下几种： transition 实现渐变动画 transform 转变动画 animation 实现自定义动画 二、实现方式 transition 实现渐变动画 transition的属..
CSS3实现5个常用的网页动画效果
前端开发博客
01-28 7270
点击上方“前端开发博客”，选择“星标”每天前端开发干货第一时间送达！作者：郭锦荣链接：https://www.cnblogs.com/jr1993/p/4743914.html由于最近比...
CSS3的动画在这里
qq_36801250的博客
04-20 132
CSS3动画 过渡与变幻结合在一起，我们可以做出很漂亮的效果，但是这个时候，仍然会存在一些情况无法实例 过渡需要用户手动的去触发 过渡在此应该是只执行一次 为了解决上面的这种情况，CSS3在发布的时候，出现了个新的东西叫动画，动画完美的解决了上面的两个问题，现在我们就来看一下动画 动画的属性 一个元素如果要使用动画，那么，必须要使用一个CSS3的新属性animation,这个属性后面接收一个动...
【收藏】20款CSS3动画库，你值得“拥有”
dianxuan6019的博客
09-18 955
转载自点击这里 今天逛“市场”看到一些不错的CSS3动画库，感觉很不错，就收藏了，分享给大家拉。帮助开发者在一定的期限内取得有创造性和创新性的成果。 1.Kite Kite是一个灵活的布局助手CSS库。Kite使用`inline-block`而不是最新的CSS语法。它注重实际，易于理解且容易使用。 Kite用法与flexbox相似：justify-content,等...
常用的css动画库有哪些
05-26
常用的 CSS 动画库包括： 1. Animate.css：一个轻量级的、跨浏览器的 CSS 动画库，提供了多种动画效果。 2. WOW.js：一个可以在滚动时触发动画效果的 JavaScript 库，与 Animate.css 结合使用非常方便。 3. Hover.css：一个用于添加悬停效果的 CSS3 动画库，提供了多种动画效果。 4. Magic.css：一个简单易用的 CSS3 动画库，提供了 50 多种动画效果。 5. Move.js：一个小巧的 JavaScript 库，提供了多种 CSS3 动画效果，支持链式调用。 6. GreenSock：一个高性能的 JavaScript 动画库，提供了多种动画效果，支持多种框架和平台。 7. CSShake：一个用于添加震动效果的 CSS3 动画库，提供了多种震动效果。 8. Bounce.js：一个用于添加弹跳效果的 JavaScript 库，提供了多种弹跳效果。 以上是常用的一些 CSS 动画库，可以根据自己的需求选择使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值