首页 > 其他分享 >css新特性—过渡

css新特性—过渡

时间:2024-02-21 12:13:02浏览次数:29  
标签:background color 100px 特性 height width 过渡 css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: pink;
				/* 谁做过渡给谁加 */
				/* trasision:变化的属性 花费的时间 运动曲线 何时开始 */
				transition: width 0.5s ,height 0.1s ease-in-out 1s;
				/* transition: all 0.3s ; */
				
			}
			div:hover{
				width: 300px;
				height: 400px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

  

标签:background,color,100px,特性,height,width,过渡,css
From: https://www.cnblogs.com/hs20011205/p/18024896

相关文章

  • scss 中公共变量的导出方法:export
    scss中公共变量的导出方法:export:https://blog.csdn.net/ww_5211314/article/details/109614511?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170848176116800180690474%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=170......
  • ReadableStream/TransformStream/HMR/软件设计哲学/SSR 条件渲染/CSS.escape/Copilot
    ReadableStream,TransformStream-探索如何在React服务器组件中使用流来提升性能和用户体验。HMR-简介热模块替换技术,使前端开发更加高效。软件设计哲学-深入理解软件设计背后的哲学思考。SSR条件渲染组件-SSR条件渲染的实现方法,优化页面加载速度和SEO。C......
  • css 文字垂直居中
    方法一:使用flex布局<style>.container{display:flex;align-items:center;height:100px;}</style><divclass="container"><span>要居中的文本</span></div>方法二:使用定位和transform可以通过将......
  • bs4 css选择器
    数据准备html_doc="""<html><head><title>TheDormouse'sstory</title></head><body><pid="my_p"class="title"><bid="bbb"class="boldest">TheDormou......
  • 前端知识汇总2(css,css2, 页面布局,移动端适配)
    固定定位(fixed)固定定位是绝对定位的一种特殊形式。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位。当对无素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条......
  • 修改标签官网自带css——dialog
    对于标签原本自带的class类就如下图的.el-dialog__body就是自带的原dialog:现在若要更改padding值方式一(但是修改的是全局的了):<style>.el-dialog__body{padding:15px;}</style>方式二(给dialog加一个自定义类名,修改的是所有class匹配的el-dia......
  • sensitive-word v0.13 特性版本发布 支持英文单词全词匹配
    拓展阅读sensitive-word-adminv1.3.0发布如何支持分布式部署?sensitive-word-admin敏感词控台v1.2.0版本开源sensitive-word基于DFA算法实现的高性能敏感词工具介绍更多技术交流业务背景对于英文单词Disburse之类的,其中的sb字母会被替换,要怎么处理,能不......
  • 视频监控需求八问:视频智能分析/视频汇聚平台EasyCVR有何特性?
    最近TSINGSEE青犀视频在与业内伙伴进行项目合作的过程中,针对安防监控可视化视频管理系统EasyCVR视频融合平台在电信运营商项目中的应用,进行了多方面的项目需求沟通。今天我们就该项目沟通为案例,来具体了解一下用户关心度较高的关于视频智能分析/视频存储/视频汇聚EasyCVR平台相关......
  • CSS学习记录
    块级元素block总是在新行上开始;高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度;<div>,<p>,<h1>,<form>,<ul>和<li>是block元素。display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,......
  • css样式相关代码记录
    element样式穿透:::v-deepposition属性值有static、relative、absolute、fixed、sticky。static:该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。relative:该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会......