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

待我称王封你为后i 2023-02-17 05:05 44阅读 0赞

学习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 条评论，44人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS_过渡&动画

过渡transition > 过渡(transition) > \-通过过渡可以指定一个属性发生变化时的切换方式 > \-通过过渡可以创建些非常好的效果，提升用户

﹏ヽ暗。殇╰゛Y/ 2023年10月06日 16:59/ 0 赞/ 64 阅读

相关 CSS转换，过渡，动画的学习

一：转换 CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。 > translate(50px,100px) 移动 > rotate(30deg)

Love The Way You Lie/ 2023年10月05日 22:22/ 0 赞/ 31 阅读

相关 CSS3-过渡动画

CSS3 中的 `transition` 属性用于实现元素从一种样式变换为另一种样式时为元素添加过渡效果。 `transition` 属性是一个综合属性，可以简写也可以单独设

谁践踏了优雅/ 2023年07月02日 12:26/ 0 赞/ 178 阅读

相关 web前端学习11-css动画实例

web前端学习11-css动画实例 <html> <head> <meta charset="utf-8"> <title>HTML

古城微笑少年丶/ 2023年02月17日 08:56/ 0 赞/ 31 阅读

相关 web前端学习9-css动画变换

css动画变换 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

朱雀/ 2023年02月17日 05:13/ 0 赞/ 198 阅读

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

学习7-css动画过渡 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

待我称王封你为后i/ 2023年02月17日 05:05/ 0 赞/ 45 阅读

相关 CSS--过渡与动画

原文网址：[CSS--过渡与动画\_IT利刃出鞘的博客-CSDN博客][CSS--_IT_-CSDN] 贝塞尔曲线其他网址 > [实用的 CSS — 贝塞尔曲线(c

心已赠人/ 2022年12月23日 11:25/ 0 赞/ 230 阅读

相关 CSS3过渡和动画

1.过渡 Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。 Safari 需要前缀 -web

怼烎@/ 2022年09月21日 05:37/ 0 赞/ 250 阅读

相关 Vuejs——（7）过渡（动画）

本篇资料来于官方文档： http://cn.vuejs.org/guide/transitions.html 本文是在官方文档的基础上，更加细致的说明，代码更多更全。

小鱼儿/ 2022年07月18日 01:52/ 0 赞/ 246 阅读

相关前端基础学习笔记过渡、动画和变换

过渡 transition 让属性变化成为一个持续一段时间的过程，而不是立即生效的可能的属性：执行变换的属性： transition-property,

Bertha 。/ 2022年04月11日 09:48/ 0 赞/ 219 阅读