css---过渡天坑
2024-09-04 03:08:37
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 100px;
height: 100px; border:3px solid red;
background: pink;
text-align: center;
font: 50px/200px "微软雅黑" ; position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
transition-property: width;
transition-duration: 9s;
transition-timing-function: inherit; }
html{
height: %;
}
html body{
height: %;
border: 3px solid yellow;
margin-top: 100px; }
body:hover #test{
transition-property: height;
width: 200px;
height: 200px; } </style>
</head>
<body>
<div id="test"> </div>
</body>
</html>
异步加载 确实没看懂这什么坑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 10px;
height: 10px; border:3px solid red;
background: pink;
text-align: center;
font: 50px/200px "微软雅黑" ; position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
transition-property: width;
transition-duration: 9s;
transition-timing-function: inherit; }
html{
height: %;
}
html body{
height: %;
border: 3px solid yellow;
margin-top: 100px; } </style>
<script type="text/javascript"> //transition 在元素首次渲染还没有结束的情况下是不会触发的
var tst=document.querySelector("#test");
tst.style.width="300px";
</script> </head>
<body>
<div id="test"> </div>
</body>
</html>
在元素首次渲染还没有结束的情况下是不会触发的
最新文章
- C# 实现 Excel文件的数据导入
- CPU的大小端模式
- 读取 java.nio.ByteBuffer 中的字符串（String) 写入方式flash.utils.ByteArray.writeUTF
- 关于lr调用jar在vuser中可以运行，但是controller中却报错的问题
- 使用ODP.NET查询数据参数顺序问题及莫名ORA-01722错误提示
- Mathematica 中 Minimize函数无法找到全局最小值时的解决方法
- org.openqa.selenium.WebDriverException: f.QueryInterface is not a function Command duration or timeout:
- 重新组织 vs 重新生成索引
- PureMVC(JS版）源码解析（七）：Mediator类
- 【编程实践】连续正整数之和（华东师范大学OJ-3025）
- chroot
- Razor基础语法
- [转]SQL Server® 2008 R2 Express 静默安装
- 搭建php环境的几种方法
- mysql如何执行关联查询与优化
- ELK实践（一）：基础入门
- MySQL创建用户的三种方法 （并授权）转
- 关于使用vw单位适配H5项目（二）
- Nuget挂了的解决方法(转)
- Linux系统上传下载命令rz和sz