css动画效果

甜萝发表于 2022-1-5 20:58

<!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>Document</title>
</head>
<body> <style>
   * {
         padding: 0;
         margin: 0;
         box-sizing: border-box;
         background-color: #2C3E51;
   }
   body,div{
         height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
   }
   div {
         justify-content: center;
         align-items: center;
         width: 400px;
         height: 400px;
         border: 2px solid white;
   }
   span {
         position: relative;
         left: 0;
         width: 50px;
         height: 50px;
         background-color: rgb(255, 183, 0);
         display: inline-block;
         animation-name: fd;
         animation-duration: 8s;
         animation-timing-function: cubic-bezier(1, 0, 0, 1);
   }
   @keyframes fd {
         25% {transform: translate(-395%,-350%);}
         50% {transform: translate(-395%,350%);}
         75% {transform: translate(300%,350%);}
         100% {transform: translate(300%,-350%);}
         to {}
   }

</style>
<main>
   <div>
         <p>测试数</p>
         <span>
         </span>
   </div>
</main>
</body>
</html>

动画代码如上
有几点疑惑
css属性太多容易忘记是不是有必要记住那些属性？
代码大部分都看得懂但还是很难完成项目这是为什么？
:lol

xiaozhe80 发表于 2022-1-5 23:44

用多了自然就记住了，手册备用，项目不是看出来的，是做出来的。

cy2931 发表于 2022-1-5 23:48

多练就ok啦

天心阁主 发表于 2022-1-6 00:24

没必要记住

mokson 发表于 2022-1-6 08:36

lazywu 发表于 2022-1-6 10:02

常用的属性用着用着就记住了，不常用的知道是啥就行，大部分编辑器都有自动补全功能

甜萝发表于 2022-1-7 21:03

xiaozhe80 发表于 2022-1-5 23:44
用多了自然就记住了，手册备用，项目不是看出来的，是做出来的。

哈哈谢谢

xiaojiuwoer008 发表于 2022-1-9 22:08

我好像能看懂一点儿了

页: [1]

吾爱破解 - 52pojie.cn's Archiver

css动画效果