CSS动画效果

最新推荐文章于 2024-05-30 10:50:01 发布
最新推荐文章于 2024-05-30 10:50:01 发布
阅读量245 收藏 1
点赞数 1
分类专栏： HTML与CSS 文章标签： css 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bear_huangzhen/article/details/100927161
版权

 

示例1（平移动画）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>平移动画</title>
		<style type="text/css">
			ul{
				list-style: none;
			}			
			
			ul li{
				float: left;
			}
			
			ul li a{
				width: 80px;
				height: 35px;
				display: inline-block;
				margin-left: 10px;
				background-color: #F7AE66;
				color: white;
				font-family: "微软雅黑";
				line-height: 35px;
				text-align: center;
				text-decoration: none;
				border-radius: 7px; /*圆角矩形*/
			}
			
			ul li a:hover{
				background-color: red;
				transform: translateY(5px);	
				/* Y方向下移5px 动画 */
			}
		</style>
	</head>
	<body>
		<ul>
	        <li><a href="#">服装城</a></li>
	        <li><a href="#">美妆馆</a></li>
	        <li><a href="#">超市</a></li>
	        <li><a href="#">全球购</a></li>
	        <li><a href="#">闪购</a></li>
	        <li><a href="#">团购</a></li>
	        <li><a href="#">拍卖</a></li>
	        <li><a href="#">金融</a></li>
    	</ul>
	</body>
</html>

 

示例2（缩放动画）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>缩放动画</title>
		<style type="text/css">
			ul{
				list-style: none;
			}			
			
			ul li{
				float: left;
			}
			
			ul li a{
				width: 80px;
				height: 35px;
				display: inline-block;
				margin-left: 10px;
				background-color: #F7AE66;
				color: white;
				font-family: "微软雅黑";
				line-height: 35px;
				text-align: center;
				text-decoration: none;
				border-radius: 7px;
			}
			
			ul li a:hover{
				background-color: red;
				transform: scale(1.3);	
				/*放大1.3倍动画*/							
			}
		</style>
	</head>
	<body>
		<ul>
	        <li><a href="#">服装城</a></li>
	        <li><a href="#">美妆馆</a></li>
	        <li><a href="#">超市</a></li>
	        <li><a href="#">全球购</a></li>
	        <li><a href="#">闪购</a></li>
	        <li><a href="#">团购</a></li>
	        <li><a href="#">拍卖</a></li>
	        <li><a href="#">金融</a></li>
    	</ul>
	</body>
</html>

 

示例3（倾斜动画）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>倾斜动画</title>
		<style type="text/css">
			ul{
				list-style: none;
			}			
			
			ul li{
				float: left;
			}
			
			ul li a{
				width: 80px;
				height: 35px;
				display: inline-block;
				margin-left: 10px;
				background-color: #F7AE66;
				color: white;
				font-family: "微软雅黑";
				line-height: 35px;
				text-align: center;
				text-decoration: none;
				border-radius: 7px;
			}
			
			ul li a:hover{
				background-color: red;
				transform: skew(10deg,-10deg);	
				/*x方向向右倾斜，y方向向上倾斜动画*/							
			}
		</style>
	</head>
	<body>
		<ul>
	        <li><a href="#">服装城</a></li>
	        <li><a href="#">美妆馆</a></li>
	        <li><a href="#">超市</a></li>
	        <li><a href="#">全球购</a></li>
	        <li><a href="#">闪购</a></li>
	        <li><a href="#">团购</a></li>
	        <li><a href="#">拍卖</a></li>
	        <li><a href="#">金融</a></li>
    	</ul>
	</body>
</html>

 

示例4（旋转按钮动画）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>旋转按钮</title>
		<style type="text/css">
			div img{
				margin-left: 30px;
				transition: all 1s ease-in-out;
			}
			
			div img:hover{
				transform: rotate(360deg) scale(1.2);
				/*旋转360度，放大1.2倍动画*/
			}
		</style>
	</head>
	<body>
		
		<div>
			<img src="img/delicious.png" width="64" height="64" />
			<img src="img/facebook.png" width="64" height="64" />
			<img src="img/rss.png" width="64" height="64" />
			<img src="img/twitter.png" width="64" height="64" />
			<img src="img/yahoo.png" width="64" height="64" />
		</div>
	</body>
</html>

 

示例5（自定义动画 @keyframes）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>animation</title>
		
		<style type="text/css">
			div{
				width: 242px;
				height: 219px;
				animation: mya 2s linear infinite;
				/*liner 线性速度   infinite 循环播放*/		
				
			}
			
			@keyframes mya{
				
				0%{
					background: url(img/loading_f03.png);
					background-size: cover;
				}
				
				15%{
					background: url(img/loading_f04.png);
					background-size: cover;
				}
				
				30%{
					background: url(img/loading_f05.png);
					background-size: cover;
				}
				
				45%{
					background: url(img/loading_f06.png);
					background-size: cover;
				}
				
				60%{
					background: url(img/loading_f07.png);
					background-size: cover;
				}
				
				75%{
					background: url(img/loading_f08.png);
					background-size: cover;
				}
				
				90%{
					background: url(img/loading_f09.png);
					background-size: cover;
				}
				
				100%{
					background: url(img/loading_f10.png);
					background-size: cover;
				}
				
			}
		</style>
	</head>
	<body>
		
		<div>
			
		</div>
		
	</body>
</html>

 

示例6（导航过渡动画）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导航过渡菜单</title>
		<style type="text/css">
			
			*{
				margin: 0px;
				padding: 0px;
			}
			
			ul{
				margin: 50px 0px 0px 0px;
				list-style: none;	
				border-bottom: 10px solid green;
				width: 100%;
				height: 30px;
				padding-left: 200px;
			}
	
	
			ul li{
				float: left;
			}
			
			ul li a{
				display: inline-block;
				width: 80px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				background-color: #CCCCCC;
				font-size: 13px;
				font-family: "微软雅黑";
				text-decoration: none;
				color: black;
				
				transition: width 0.5s linear; 
				/*宽度动画  持续0.5s  线性*/
				margin-left: 2px;
			}
			
			ul li a:hover{
				color: white;
				background-color: #9ACD32;
				width: 100px;
			}
			
		</style>
	</head>
	<body>
		
	    <ul class="nav">
	      <li>
	        <a class="on" href="#">首　　页</a>
	      </li>
	      <li>
	        <a href="#">关于我们</a>
	      </li>
	      <li>
	        <a href="#">产品展示</a>
	      </li>
	      <li>
	        <a href="#">售后服务</a>
	      </li>
	      <li>
	        <a href="#">联系我们</a>
	      </li>
	    </ul>
	</body>
</html>

 

示例7（京东过渡动画）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>京东过渡效果 </title>
		<style>
	        a {
	            float: left;
	            width: 183px;
	            height: 130px;
	            overflow: hidden;
	            margin: 10px;
	        }
	        
	        img {
	            width: 193px;
	            height: 130px;
	            transition: margin-left 0.4s;
	            /*过渡动画为左外边距  持续0.4s*/
	        }
	        
	        a:hover img {
	            margin-left: -10px;
	        }
    	</style>
	</head>
	<body>
		<div>
        	<a href="#"><img src="img/1.jpg" alt=""></a>
        	<a href="#"><img src="img/2.jpg" alt=""></a>
        	<a href="#"><img src="img/3.jpg" alt=""></a>
    	</div>
	</body>
</html>

 

Bear
关注
专栏目录
css动画效果
m0_51431448的博客
03-23 1万+
动画1（沿着椭圆转动） 其实是个2D转动，只不过咱们设置椭圆，然后加上scale缩放（近大远小），看上去就是3D效果 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con...
css 入场动画_CSS3 六边形标题入场动画
weixin_39840153的博客
12-19 131
CSS语言：CSSSCSS确定body {background-color: #3b42a3;width: 100%;}.bg {height: 100%;width: 100%;position: fixed;background: linear-gradient(30deg, #0e0277 11%, #3b42a3 13%, transparent 13%), linear-gradient...
拐道交叉的css3动画,网页前端开发同心圆弧旋转 loading 特效
weixin_36285258的博客
08-04 319
今天来给大家说说一个loading效果，一个同心圆弧形旋转效果，在我们网页平时加载时候可以使用这个来做loading效果，虽然说现在网页优化好了很多，过渡时时间已经非常少了，但是理解这个案例，可以把其中的一些方法运用到其他的CSS3动画当中去，这样可以帮助我们更好的学会CSS3；好了，话不多说，先来看看今天的效果。今天还是不用JS，就用CSS3做一个循环动画就好了。先定义DOM，写一个元素就行了然...
有趣的HTML实例（十二） 早安、晚安动画（css+js）
好好读书
02-16 1141
有趣的HTML实例（十二） 悬停时有旋转效果的图标
使用CSS实现圆环流水灯、跑马灯、加载渐变动画效果
最新发布
weixin_52231116的博客
05-30 2385
本文主要使用CSS实现圆环流水灯、跑马灯、加载动画效果，以及介绍了常见的几种 transform 的变形函数
CSS：带三角（实心，边线）提示框，提示文案
star094606的博客
09-19 470
css文件，在长方形提示框的div上添加after和before样式 .r-note:before { content:""; width: 0; height: 0; ...
css-animation-effect:CSS动画效果
03-20
CSS动画效果是CSS3引入的一个强大特性，它允许开发者创建动态、交互式和富有表现力的用户体验，而无需依赖JavaScript或者其他外部库。在本篇文章中，我们将深入探讨CSS动画效果，包括其基本概念、语法、关键帧动画、...
微信小程序实现move.css动画效果的源码
05-08
但是，微信小程序在动画效果方面相对有限，不能像网页那样使用丰富的CSS动画库。本资源提供了将move.css动画库集成到微信小程序中的源码，使得开发者能够轻松地为小程序添加丰富的动画效果，增强用户交互体验。 ## ...
纯css动画效果520表白信封
05-20
资源基于博主https://blog.csdn.net/weixin_44009656?type=blog的文章内容修改，感谢博主提供的优质资源，我上传的版本修复了页面初始化的时候信封触发关闭动画的问题。
CSS3动画效果transition
weixin_30682415的博客
12-29 175
1.transition的浏览器支持情况 IE10+支持，IE6\7\8\9都不支持！目前，其他浏览器最新版本都支持，不需要再加前缀-webkit- 之类的了 2. 还是一步一步说说怎么用transition吧 页面只有一个div，其css如下： 1 <style type="text/css"> 2 div { 3 ...
强大的CSS：文字下波浪线动画效果
clhq71932的博客
05-21 1111
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的，类似下图gif示意： 这里就介绍下是如何实现的。 有两种实现方法，各有优劣。 一...
CSS让指定的图片实现水平/翻转特效
weixin_33670713的博客
03-29 478
代码简介： CSS的Alpha滤镜效果，再配合JS来控制水平或者是垂直翻转，还是很实用的。 代码内容： View Code <HTML><HEAD><META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"><TITLE>CSS让指定的图片实现水平/翻转特效 - www.we...
[转]CSS3实现图片幻灯片效果
akaka88的专栏
08-12 260
转自　[url=http://site518.net/pure-css3-slider/]给力技术－纯CSS3实现的幻灯片效果[/url] [url=http://site518.net/tag/css3/]CSS3[/url] 增加了许多新特性，以前要用 [url=http://site518.net/tag/javascript-2/]JavaScript[/url] 才能实现的...
纯CSS实现幻灯片效果
weixin_33967071的博客
02-15 145
主要用乐两种方式实现各有不同特点！show the code 第一种 用animation <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3 幻灯片</title> <style type="text...
CSS3实现的3D按钮精美效果
weixin_33836223的博客
04-27 124
使用css3代码来制作3D按钮效果，这是一个系列的3D按钮制作效果，制作方法是老套（万变不离其中），但其中色彩的调各非常不错，因为很多效果在PS中制作是容易，特别对于设计师来说更容易，但对于一名coder来说，还是有点困难，具体请看制作的代码，让代码来展现所有的一切。我想您和我一样会为这样的效果折服. <!DOCTYPE html PUBLIC "-//W3C//...
纯CSS+DIV实现圆角的三种方法(create a round corner DIV by pure CSS)
weixin_34342905的博客
09-02 145
方法一：使用"•"来当圆角：     Code &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html&gt; &lt;head&gt;     &lt;title
CSS实现行编号效果
TAOSST的Blog
10-16 1178
 html>head>meta http-equiv="Content-Type" content="text/html; charset=gb2312" />title>带有行编号且编号与内容间带有分割符的CSS实现title>style type="text/css">ol{MARGIN: 0px 0px 1px 45px;LIST-STYLE-TYPE
使用 CSS3 动感的图片标题动画效果【附源码下载】
weixin_34348805的博客
12-05 135
　　在网站中，有很多地方会需要在图片上显示图片标题。使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果。没有使用 JavaScript，所以只能在支持 CSS3 动画的现代浏览器中才能正常工作。您可以查看网页的源代码，了解动画是如何工作的。 您可能感兴趣的相关文章 10款唯美浪漫的婚礼 &amp; 结婚纪念网站模板 精选12款优秀 jQuery Ajax 分页插件和教程 10...
css动画效果 淡入
03-27
CSS动画效果可以通过使用CSS的`@keyframes`规则和`animation`属性来实现。淡入效果可以通过改变元素的透明度来实现。 以下是一个简单的CSS代码示例，展示了如何创建一个淡入动画效果： ```css @keyframes fadeIn {...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值