css3新增过渡属性transition使用

最新推荐文章于 2024-05-17 03:45:27 发布
最新推荐文章于 2024-05-17 03:45:27 发布
阅读量204 收藏 1
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucky_girl_girl/article/details/104145923
版权

css3新增过渡属性transition使用
1.两个属性过渡(使用逗号分割）
transition:width 1s,height 1s;
2.让一个元素从有到无的消失（使用opacity）
transition:opacity 1s;
3.不兼容ie9与及ie9以下的低版本浏览器

在这里插入代码片
<html>
<style>
  div{
	width:200px;
	height:200px;
	background-color:skyblue;
  }
  .p1{
	width:100px;
	height:100px;
	background-color:pink;
	transition:width 1s,height 1s; //
  }
  div:hover .p1{
	width:180px;
	height:180px;
  }
    .p2{
	width:100px;
	height:100px;
	background-color:pink;
	transition:opacity 1s; //
  }
  div:hover .p2{
	opacity:0;
  }
</style>
<body>
	<div>
		<p class="p1">hello</p>
	</div>
	<div>
		<p class="p2">world</p>
	</div>
</body>
</html>
lucky_girl_girl
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 淡出淡入轮播图,用CSS3 transition属性实现淡入淡出轮播图
weixin_42298093的博客
06-21 860
最近想本身写下轮播图，在网上发现一个网友用CSS transition属性实现的轮播，赶脚超简单哦，本身学习了后整理以下。(找不到原网址了-.-...就不贴了...)(若是不了解transition，先去这里(点我，点我)学习下)css思路图片淡入淡出效果是不透明度(CSS opacity属性)的变换过程。举例，让图片淡出，就是图片的opacity属性在一段时间内逐渐从1变为0，淡入呢，则是图片的...
CSS3过渡效果 兼容IE6、IE7、IE8
盒子豪的博客
12-19 2072
.box{ width:120px;height:40px;background:yellowgreen;line-height:40px;transition:width 1s;cursor:pointer; } .box:hover{ width:180px; } div class="box">Hello Worlddiv>
ie10 css3 transition 过渡
weixin_30730053的博客
01-31 145
ie10的过渡跟webkit内核的过渡没太大的区别，只是不用加前缀了。 transition就是过渡，意思是指变化的效果通过一个过渡来实现，比如位置的改变： 开始位置的left值是0，当我点击按钮的时候就更该为200px; demo展示地址：http://www.ibokanfamily.com/win8/transition/position6.html 理论上来说所有的样式都可以...
前端提高篇（五十一）CSS3进阶14：transition过渡动画(1)
最新发布
2401_84094506的博客
05-17 681
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
ie 部分兼容问题
weixin_42646650的博客
11-12 171
ie 部分兼容问题 ie不兼容以下style样式写法 第一种 <div class="tabsTitOuter" :style="{width:tabTitWidth+'px'}" ref="tabsTitOuter"> 第二种 transform: translateX(${moveDis}px);transition:0.3s; 兼容IE写法 this.$refs.tabsTitInner.style.width= '300px' this.$refs.tabsTitInner.s
css3过渡动画——transition属性
QQQqq031110的博客
10-24 110
语法 transition: transition-proterty transition-duration transition-timing-function transition-delay; transition: css样式 动画的执行时间 速度类型 动画的延迟时间; 多个css属性用逗号隔开 transition: transform 2s, background-color 2s; ​ 注意：谁发生了属性的改变 就加在谁身上 属性1、transition-protertyc
css3中新增的样式使用示例附效果图
09-25
以下是一些CSS3中新增样式的使用示例及详解： 1. **CSS3前缀**： 在CSS3的早期阶段，各大浏览器厂商为了支持新特性，各自引入了私有前缀，例如`-webkit-`（用于Chrome和Safari）、`-moz-`（Firefox）、`-ms-`...
《CSS3》学习笔记大全
04-12
CSS3 新增了一些过渡和动画相关属性，如 `transition`、`animation` 等。这些属性可以帮助我们实现更加复杂的过渡和动画效果。 * `transition`：元素的过渡效果，取值可以是 `all` 或 `opacity`。 * `animation`：...
CSS，CSS3基础
11-05
7. **动画与过渡**：transition和animation属性使得元素在状态改变时有平滑的过渡效果，增强了用户体验。 8. **文本处理**：text-overflow、word-wrap和hyphens属性提供了更好的文本控制，比如溢出处理和自动换行。...
HTML5+CSS3移动商城-分类
04-29
6. 动画与过渡：CSS3的transition和animation可以创建平滑的过渡效果和动画，增加用户交互体验，如滑动切换类别、下拉加载更多商品等。 7. 媒体查询（Media Queries）：CSS3的媒体查询支持响应式设计，可以根据设备...
CSS3使用手册
03-31
【标题】"CSS3使用手册"揭示了对CSS3这一现代网页设计关键技术的全面理解和应用。CSS3（层叠样式表3）是CSS规范的最新版本，它极大地扩展了其前身CSS2的功能，引入了许多新的特性和改进，使得网页设计更为灵活、动态...
原生页面兼容IE9问题的解决方案
小海前端
12-07 1017
文章目录前言一、强制360浏览器使用极速模式访问二、IE9对CSS3的支持1、盒模型布局2、IE9对弹性盒布局的支持3、IE9不支持下列CSS3属性4、IE9不支持下列CSS选择器三、IE9对jQuery的支持四、IE9不支持placeholder属性1、普通文本框的解决方案2、密码域的解决方案总结 前言 最近，接了一个客户的原生页面。客户要求该页面必须兼容IE9及其以上版本的浏览器，同时要求360浏览器的兼容模式可以正常访问。360浏览器是可以通过代码强制极速模式的，这个问题比较容易解决。但是要兼容IE
CSS3新增样式（二）——过渡效果（transition）
pro1822的博客
04-02 4276
CSS3新增样式（二）——过渡效果（transition）
让div匀速由下至上出现
暮雪进化史
04-06 612
.ceshi { height:60px; transition:height 1s; -moz-transition:height 1s;  -webkit-transition:height 1s;  -o-transition:height 1s; } .ceshi {height:130px;}
前端笔记css3-（过渡属性transition）
DespairA的博客
09-01 154
过渡属性transition transition:要过渡的属性 花费时间单位秒 运动曲线默认ease 何时开始； 后面两个可以省略；谁需要过渡就给谁添加过渡，而不是在hover和动画中, 可以写多个属性，写的同时可以用逗号分割，也可直接用all .box1 { width: 200px; height: 100px; background-color: skyblue; /* transition: heig...
css transition 过渡方向设置
q517739813的博客
04-03 1714
过渡（transition） html代码 <div class="father"> <div class="son" @mouseover="sonfn">son</div> <div class="son1" @mouseout="son1fn" ref="son1">son1</div> </div> css部分 .father { width: 200px; ...
html中transtion属性,CSS3中Transition动画属性用法详解
05-28
好的，我会为您解答关于html中transition属性和CSS3中Transition动画属性的用法。 在HTML中，transition属性表示元素在一定时间内从一种样式转换为另一种样式的过程。transition属性需要指定以下几个参数： - transition-property：指定过渡的CSS属性，可以使用all来表示所有属性都过渡。 - transition-duration：指定过渡的时间，以秒或毫秒为单位。 - transition-timing-function：指定过渡的时间函数，可以使用一些预定义的函数，如linear、ease、ease-in、ease-out等。 - transition-delay：指定过渡的延迟时间，以秒或毫秒为单位。 举个例子，如果您想让一个元素在鼠标悬停时变成红色，可以这样写： ``` div { background-color: blue; transition-property: background-color; transition-duration: 1s; transition-timing-function: ease-in-out; } div:hover { background-color: red; } ``` 这样，在鼠标悬停时，该元素的背景色会从蓝色平滑地过渡到红色。 在CSS3中，Transition动画属性是与transition属性相关的一组属性，包括以下几个参数： - transition-property：同HTML中的transition-property参数。 - transition-duration：同HTML中的transition-duration参数。 - transition-timing-function：同HTML中的transition-timing-function参数。 - transition-delay：同HTML中的transition-delay参数。 - transition: 简写形式，可以一次性指定以上所有参数。例如：transition: background-color 1s ease-in-out 0s。 此外，CSS3中还新增了一些过渡效果，包括旋转、缩放、平移等。举个例子，如果您想让一个元素在鼠标悬停时旋转180度并缩小一半，可以这样写： ``` div { width: 100px; height: 100px; background-color: blue; transition: transform 1s ease-in-out; } div:hover { transform: rotate(180deg) scale(0.5); } ``` 这样，在鼠标悬停时，该元素会以一个180度的旋转和50%的缩放平滑地过渡到新的状态。 希望这些内容能够帮到您，如果您还有其他问题，请随时提出。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值