css动画作业

mgwzz

已于 2024-01-03 18:28:58 修改

阅读量374

点赞数 6

文章标签： css css3 html

于 2023-12-24 23:32:58 首次发布

本文链接：https://blog.csdn.net/mgwzz/article/details/135188309

版权

动画作业

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body{

perspective: 1000px;

}

margin: 0;

padding: 0;

}

.container{

width: 600px;

height: 600px;

margin:0 auto;

/* border: 5px solid red; */

transform-style: preserve-3d;

position: relative;

animation: run 5s linear infinite;

}

.container>img{

/* border: 1px solid green; */

width: 200px;

height: 200px;

position: absolute;

left: 50%;

top: 50%;

margin-top: -100px;

margin-left: -100px;

opacity: 0.7;

}

@keyframes run{

0%{

transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);

}

100%{

transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);

}

.container img:nth-child(1){

background-color: rgb(15, 232, 207);

transform: translatez(100px);

}

.container img:nth-child(2){

background-color: rgb(17, 17, 2);

transform: translateX(-100px) rotateY(-90deg);

}

.container img:nth-child(3){

background-color: rgb(132, 132, 11);

transform: translateY(-100px) rotateX(90deg);

}

.container img:nth-child(4){background-color: rgb(152, 152, 144);

transform: translateY(100px) rotateX(-90deg);

}

.container img:nth-child(5){

background-color: rgb(160, 6, 58);

transform: translateX(100px) rotateY(90deg);

}

.container img:nth-child(6){

background-color: rgb(83, 9, 210);

transform: translateZ(-100px);

}

</style>

</head>

<body>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.an{

text-align: center;

margin-top: 100px;

}

.an>input{

width: 300px;

height: 100px;

font-size: 20px;

color: aliceblue;

background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);

border: rebeccapurple solid 1px;

border-radius: 50px;

}

input:hover{

animation: run 1.5s linear infinite;

}

@keyframes run{

from{

background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);

box-shadow: none;

}

to{

background: linear-gradient(to left,#03a9f4,#f441a5,#ffeb3b,#03a9f4);

box-shadow: 0px 0px 40px rebeccapurple;

}