过渡的加载状态
1 例如以下例子，如果我使用的是内部样式来书写css，那么，网页打开的时候，默认就能显示出加载后的状态，如果使用外部样式，那么，可以看到变形的全过程。现在我想使用外部样式，但是我不想看到变形的全过程，以下代码要如何修改。
2 还有个问题，之前的课程学习到，内部样式的加载方式是html和css同时加载，但是实际上，是先加载css样式，然后加载html，给元素添加了过渡属性就很明白了。老师之前的课上讲解的有些问题。
代码如下，我把css和html分开来写，使用外部样式，但是我想实现的效果是打开网页，就是已经加载好的状态，而不需要出现过渡，当鼠标触碰的时候，发生相对应的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡案例【5】</title>
<link rel="stylesheet" href="06_过渡案例【5】.css">
</head>
<body>
<section>
<div class="small-box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="big-box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</section>
</body>
</html>
---------------------------------------------------------------------------------------------'
*{
padding:0;
margin:0;
}
section{
width:1000px;
height:1000px;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
section div.small-box{
width:300px;
height:300px;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
perspective: 500;
transform-style:preserve-3d;
transform: rotateX(45deg) rotateY(45deg);
transition:transform 5s linear 0s;
}
section div.small-box div{
width:300px;
height:300px;
position:absolute;
top:0;
left:0;
}
section .small-box div:nth-child(1){
background:rgba(255, 0, 0,.5);
transform:translateY(-150px) rotateX(90deg);
}
section .small-box div:nth-child(2){
background:rgba(255, 165, 0,.5);
transform:translateY(150px) rotateX(-90deg);
}
section .small-box div:nth-child(3){
background:rgba(255, 255, 0,.5);
transform:translateX(150px) rotateY(90deg);
}
section .small-box div:nth-child(4){
background:rgba(0, 128, 0,.5);
transform:translateX(-150px) rotateY(-90deg);
}
section .small-box div:nth-child(5){
background:rgba(0, 255, 255,.5);
transform:translateZ(150px);
}
section .small-box div:nth-child(6){
background:rgba(0, 0, 255,.5);
transform:translateZ(-150px);
}
section div.big-box{
width:600px;
height:600px;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
perspective: 500;
transform-style:preserve-3d;
transform: rotateX(45deg) rotateY(45deg);
}
section div.big-box div{
width:600px;
height:600px;
position:absolute;
top:0;
left:0;
transition:transform 5s linear 0s;
}
section .big-box div:nth-child(1){
background:rgba(255, 0, 0,.5);
transform:translateY(-300px) rotateX(90deg);
}
section .big-box div:nth-child(2){
background:rgba(255, 165, 0,.5);
transform:translateY(300px) rotateX(-90deg);
}
section .big-box div:nth-child(3){
background:rgba(255, 255, 0,.5);
transform:translateX(300px) rotateY(90deg);
}
section .big-box div:nth-child(4){
background:rgba(0, 128, 0,.5);
transform:translateX(-300px) rotateY(-90deg);
}
section .big-box div:nth-child(5){
background:rgba(0, 255, 255,.5);
transform:translateZ(300px);
}
section .big-box div:nth-child(6){
background:rgba(0, 0, 255,.5);
transform:translateZ(-300px);
}
section:hover .big-box div:nth-child(1){
transform:translateY(-600px) rotateX(90deg);
}
section:hover .big-box div:nth-child(2){
background:rgba(255, 165, 0,.5);
transform:translateY(600px) rotateX(-90deg);
}
section:hover .big-box div:nth-child(3){
background:rgba(255, 255, 0,.5);
transform:translateX(600px) rotateY(90deg);
}
section:hover .big-box div:nth-child(4){
background:rgba(0, 128, 0,.5);
transform:translateX(-600px) rotateY(-90deg);
}
section:hover .big-box div:nth-child(5){
background:rgba(0, 255, 255,.5);
transform:translateZ(600px);
}
section:hover .big-box div:nth-child(6){
background:rgba(0, 0, 255,.5);
transform:translateZ(-600px);
}
section:hover .small-box{
transform:rotateX(315deg) rotateY(315deg);
}
正在回答 回答被采纳积分+1
同学你好，css引入方式简单总结如下：
1、行内式：
样式写在html标签的style属性内，样式与html文件混在一起。
2、内嵌式：
写在head标签的<style></style>，位于html文件中。
3、外部样式：
写在head标签内，使用link标签引入。
以上三种方式，正常情况下，css代码与html代码会一起加载，但是结构与样式什么时候渲染到页面、如何渲染，可能有区别。比如同学的代码中，涉及了transition这种复杂的内容后，内嵌式与外部样式在不同浏览器上，展示出来的效果不一样。由于目前没有官方的说明，所以老师无法确定的告诉同学，这三种方式中html与css的加载顺序是什么样的，也建议同学不要过于关注顺序问题，就正常的写代码，遇到了问题，在具体问题具体分析。
4、导入式：
使用@import引入样式，渲染html结构时，不会等待css文件加载，会出现html结构已经展示了，但是却没有样式的情况。
祝学习愉快！
同学你好，解答如下：
1、老师测试了同学的代码发现，使用外部样式时，谷歌浏览器页面打开后，能看到元素的过渡过程，但是火狐浏览器没有过渡过程，火狐效果如下：
所以怀疑是浏览器的渲染机制不同（或者渲染机制改变了）造成的。
知道这个现象就行了，不用深究。
2、老师找了一下之前的课程，没找到如下话术：
如果同学知道在哪，可以告诉老师一下，老师再审核一下视频。如果忘记了在哪也没事，老师多花时间找找。
3、使用外部样式加载后，之所以能看到动画，主要是因为transition属性造成的，建议将该属性利用js添加到元素上（结构和初始样式都加载完成后，再添加上transition属性）：
js代码如下：
<script>
var el1 = document.getElementById("test1")
var el2 = document.querySelectorAll(".big-box div")
el1.style.transition = " transform 5s linear 0s"
for (var i = 0; i < el2.length; i++) {
el2[i].style.transition = " transform 5s linear 0s"
}
</script>
js的内容，后面会学，同学先了解一下即可。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星