做个别出心裁的圣诞礼物
废话不多说，直接上代码
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.container{
width: 1000px;
height: 500px;
margin: 50px auto;
overflow: hidden;
background: skyblue;
}
.flex{
display: flex;
}
.item-box{
animation: my-css 5s infinite;
-webkit-animation: my-css 5s infinite;
-o-animation: my-css 5s infinite;
-moz-animation: my-css 5s infinite;
animation-direction: alternate;
-webkit-animation-direction: alternate;
-o-animation-direction: alternate;
-moz-animation-direction: alternate;
}
.item-box:hover{
animation-play-state: paused;
-webkit-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
}
.item-box div{
width: 1000px;
height: 450px;
flex-shrink: 0;
}
.item1{
background: pink;
}
.item2{
background: brown;
}
.item3{
background: red;
}
.item4{
background: yellow;
}
.item5{
background: green;
}
@keyframes my-css{
0% {
transform: translate(0%);
}
25% {
transform: translate(-100%);
}
50% {
transform: translate(-200%);
}
75% {
transform: translate(-300%);
}
100% {
transform: translate(-400%);
}
}
@-webkit-keyframes my-css{
0% {
transform: translate(0%);
}
25% {
transform: translate(-100%);
}
50% {
transform: translate(-200%);
}
75% {
transform: translate(-300%);
}
100% {
transform: translate(-400%);
}
}
@-o-keyframes my-css{
0% {
transform: translate(0%);
}
25% {
transform: translate(-100%);
}
50% {
transform: translate(-200%);
}
75% {
transform: translate(-300%);
}
100% {
transform: translate(-400%);
}
}
@-moz-keyframes my-css{
0% {
transform: translate(0%);
}
25% {
transform: translate(-100%);
}
50% {
transform: translate(-200%);
}
75% {
transform: translate(-300%);
}
100% {
transform: translate(-400%);
}
}
.ico-box{
width: 30%;
height: 30px;
justify-content: space-around;
align-items: center;
margin: 10px auto;
}
.ico-box div{
height: 10px;
width: 20px;
border-radius: 10px;
background: #fff;
transition: width 0.5s;
}
.ico-box div:hover{
width: 40px;
background: pink;
}
</style>
</head>
<body>
<div class="xssyun-org the-best-plugins container">
<div class="xssyun-org the-best-plugins item-box flex">
<div class="xssyun-org the-best-plugins item1"></div>
<div class="xssyun-org the-best-plugins item2"></div>
<div class="xssyun-org the-best-plugins item3"></div>
<div class="xssyun-org the-best-plugins item4"></div>
<div class="xssyun-org the-best-plugins item5"></div>
</div>
<div class="xssyun-org the-best-plugins ico-box flex">
<div class="xssyun-org the-best-plugins ico"></div>
<div class="xssyun-org the-best-plugins ico"></div>
<div class="xssyun-org the-best-plugins ico"></div>
<div class="xssyun-org the-best-plugins ico"></div>
<div class="xssyun-org the-best-plugins ico"></div>
</div>
</div>
</body>
</html>30 年前的圣诞节，Python 序章被谱写
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
