<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过渡动画</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.one{
width: 200px;
height: 200px;
background-color: orange;
/*1、针对某个属性做动画 可以设置指定的属性名 也可以直接写all*/
transition-property: background-color width;
/*2、动画时间 */
transition-duration: 1s;
/*3、动画延时*/
/*transition-delay: 1s;*/
/*4、动画运行速率 */
transition-timing-function: linear;
}
.one:hover{
width: 500px;
/*height: 600px;*/
background-color: red;
opacity: 1;
/*显隐性没有动画效果*/
/*visibility: hidden;*/
}
#input1:focus{
margin-top: 100px;
}
#input1{
/**/
transition: all 1s linear;
}
#input2{
transition: all 1s linear;
}
#input2:checked{
/*选中复选框才会执行*/
margin-left: 100px;
}
/*媒体选中 才会执行！！*/
.two{
width: 300px;
height: 100px;
background-color: greenyellow;
transition: all 1s linear;
}
.three{
position: relative;
}
.three {
background-color: orange;
position: relative;
}
.three input{
width: 300px;
height: 50px;
margin-left: 100px;
text-align: center;
background-color: yellow;
border-radius: 2px;
}
img{
position: absolute;
left: 350px;
top: 0;
vertical-align: middle;
}
.three .over{
background-color: gray;
width: 300px;
margin-left: 100px;
text-align: center;
visibility: hidden;
}
.three:hover .over{
visibility: visible;
}
@media only screen and (max-width: 700px) {
.two{
opacity: 0;
}
}
</style>
</head>
<body>
<!--过渡动画 关键单词transition-->
<div class="one"></div>
<input id="input1" type="text" placeholder="请输入" /><br />
<input id="input2" type="checkbox" /><br />
<div class="two"></div>
<div class="three">
<input class="select" type="text" placeholder="扫地机器人" />
<img src="img/select.png" />
<div class="over">
<p>第一</p>
<p>第二</p>
<p>第三</p>
<p>第四</p>
</div>
</div>
</body>
</html>
网友评论