css动画效果

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

[Asm] 纯文本查看 复制代码

<!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属性太多容易忘记是不是有必要记住那些属性？
代码大部分都看得懂但还是很难完成项目这是为什么？

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

我好像能看懂一点儿了

帐号		自动登录	找回密码
密码			注册[Register]

mokson mokson 当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	mokson 发表于 2022-1-6 08:36 提示: 作者被禁止或删除内容自动屏蔽
	如何快速判断一个文件是否为病毒！
	回复支持举报

[讨论] css动画效果