CSS3代碼怎么實現(xiàn)自定義W形運(yùn)行軌跡

發(fā)布時間：2023-01-05 09:49:34 來源：億速云閱讀：122 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“CSS3代碼怎么實現(xiàn)自定義W形運(yùn)行軌跡”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS3代碼怎么實現(xiàn)自定義W形運(yùn)行軌跡”吧!

代碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        #div{
            width:900px;
            height:400px;
            border:2px solid black;
            margin: 100px auto;
        }
        #span{
            float:left;
            display: block;
            font-size: 100px;
            width: 100px;
            height: 100px;
            line-height: 80px;
            text-align: center;
            border-radius: 50%;
            background: radial-gradient(blue,green);
            animation: move 4s ease 0s infinite alternate;
        }
        @keyframes move {
            0%{
                transform: translate(0px,0px);
            }
            25%{
                transform: translate(200px,300px);
            }
            50%{
                transform: translate(400px,0px);
            }
            75%{
                transform: translate(600px,300px);
            }
            100%{
                transform: translate(800px,0px);
            }
        }

    </style>
</head>
<body>
<div id="div">
    <span id="span">w</span>
</div>
</body>
</html>

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標(biāo)簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

到此，相信大家對“CSS3代碼怎么實現(xiàn)自定義W形運(yùn)行軌跡”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

CSS3代碼怎么實現(xiàn)自定義W形運(yùn)行軌跡

css的選擇器有哪些

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽