当先锋百科网

首页 1 2 3 4 5 6 7

CSS动画效果个人练习第六天

Html源代码

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>search</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div class="title"><img src="../../u/html/timg (1).png" width="600px" height="150px" alt=""/></div>
<div class="panel">
        <div class="btn-container">
          <input type="text" placeholder="请输入你的手机号" >
              <div class="btn">点击预购</div>			
        </div>
	</div>
</body>
</html>

CSS源代码

* {
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}


body {
  background-image:url(../../u/html/pic6.png);
  font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}
.title{
	text-align: center;
	padding: 5% 0;
}

.panel {
  text-align: center;
  padding: 5% 0;
}

.panel .btn-container {
  display: inline-block;
}

.panel .btn-container input {
  border: 0;
  outline: 0;
  height: 60px;
  width: 120px;
  border-radius: 30px;
  background-color: rgb(104, 101, 101);
  color: #fff;
  font-size: 20px;
  padding: 0 20px;
  vertical-align: middle;
  transition: .2s;

}

.panel .btn-container .btn {
  display: inline-block;
  height: 60px;
  background-image: linear-gradient(to bottom right,yellow,lightblue);
  vertical-align: middle;
  line-height: 60px;
  font-size: 20px;
  color: #585454;
  font-weight: bold;
  width: 170px;
  border-radius: 30px;
  margin-left: -170px;
  cursor: pointer;
  transition: .2s;
}

.panel .btn-container:hover input{
  width: 400px;
  animation: inputAction .4s ease-out;
}

.panel .btn-container:hover .btn{
  width: 100px;
  height: 60px;
  margin-left: -100px;
  animation: btnAction .4s ease-out;
}

@keyframes inputAction {
  0% {
    width: 400px;
  }
  60% {
    width: 450px;
  }
  100% {
    width: 400px;
  }
}

@keyframes btnAction {
  0% {
    width: 100px;
    height: 60px;
    margin-left: -100px;
  }
  60% {
    width: 100px;
    height: 60px;
    margin-left: 10px;
  }
  100% {
    width: 100px;
    height: 60px;
    margin-left: -100px;
  }
}


::-webkit-input-placeholder {
  color: #fff;
  font-size: 10px;
  font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}

效果图片在这里插入图片描述