web前端学习7-css动画过渡

最新推荐文章于 2024-07-07 19:48:42 发布

修罗_

最新推荐文章于 2024-07-07 19:48:42 发布

阅读量119

点赞数

分类专栏： web前端新手必看16篇文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_45843676/article/details/106715612

版权

web前端新手必看16篇专栏收录该内容

16 篇文章 1 订阅

订阅专栏

学习7-css动画过渡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css使用过渡</title>
		
		<style type="text/css">
			
			p{/* 初始属性 */
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
			}
			p:hover{/* 间接过渡法-鼠标经过区域会显示为以下属性 */
				width: 200px;
				height: 200px;
				background-color: #FF0000;
				transition-delay: 1s;/* 1秒后执行过渡 */
				transition-duration: 1s;  /* 过渡动画时间-过渡动画时间为1秒 */
				transition-property: width;/* 只有宽度是按照delay和duration属性变化 */
				/* 
				下面这三个是浏览器兼容设置
				有些浏览器假如没显示出效果
				可以加入相对应的浏览器标识
				如webkit是谷歌浏览器和百度浏览的内核
				O是欧朋浏览器，moz是火狐浏览器
				-webkit-transition-duration: 1s;
				-o-transition-duration: 1s;
				-moz-transition-duration: 1s; 
				*/}
				.p2{
					width: 100px;
					height: 100px;
					background-color: #00FFFF;
				}
				.p2:hover{
					width: 300px;
					height: 300px;
					background-color: red;
					transition-delay: 1s;
					transition-duration: 5s;
					transition-property: height;
					/* font-size: 100px; */
					transition-timing-function: linear;
					/* linear动画前面快后面越来越慢ease-in-out前后快，中间慢 */
					
					
			
		</style>
	</head>
	<body>
		<p>css使用过渡1</p>
		<p class="p2">css使用过渡2</p>
	</body>
</html>

文章仅供参考

修罗_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端学习7-css动画过渡

学习7-css动画过渡<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css使用过渡</title> <style type="text/css"> p{/* 初始属性 */ width: 100px; height: 100px; background-color: #00FFFF; }
复制链接

扫一扫