前端入门（水球特效，css）

gronkie

已于 2022-01-18 23:04:33 修改

阅读量1.1k

点赞数 5

分类专栏： css 文章标签：前端 css javascript html 前端特效

于 2022-01-16 21:41:22 首次发布

本文链接：https://blog.csdn.net/m0_52212261/article/details/122528184

版权

css 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

（先分享个别人讲解的视频，八分钟我觉得不绰水球特效）
在这里插入图片描述
大概思路就是一个圆圈加一个边框四个角有弧度的矩形，然后让矩形在平面上旋转，再把矩形多余的地方用 overflow: hidden; 藏起来就可以了

其他就是一些小地方的修饰了，不太重要，看个人喜好，比如外面套一层 div ，设置一个粉色 3px 宽的边框，再设个 padding 和里面的隔开，设置个阴影，还有把矩形的转动速度设置为匀速（我觉得这样好看点）
在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                padding: 0px;
                margin: 0px;
            }
            body{
                width: 100vw;
                height: 100vh;
                overflow: hidden;
                position: fixed;
                background-color: skyblue;
            }
            #wave_div{
                position: fixed;
                border: 3px solid pink;
                border-radius: 50%;
                padding: 10px;
                left: 50vw;
                top: 50vh;
                background-color: white;
                transform: translateX(-113px) translateY(-113px);
                box-shadow: 10px 10px 5px #888888;
                overflow: hidden;
            }
            #wave_item{
                width: 200px;
                height: 200px;
                border-radius: 50%;
                background-color: pink;
            }
            #wave_item::before{
                content: "";
                position: absolute;
                transform-origin: 40% 3%;
                border-radius: 35%;
                width: 250px;
                height: 250px;
                background-color: white;
                animation-name: wave_change;
                animation-duration: 5s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
            }
            @keyframes wave_change {
                from {transform: rotate(0deg) translate(-30px, -120px)}
                to {transform: rotate(360deg) translate(-30px, -120px)}
            }
        </style>
    </head>
    <body>
        <div>
            <div id = 'wave_div'>
                <div id = 'wave_item'>
                </div>
            </div>
        </div>
    </body>
</html>

gronkie

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端入门（水球特效，css）

（先分享个别人讲解的视频，八分钟我觉得不绰水球特效）大概思路就是一个圆圈加一个边框四个角有弧度的矩形，然后让矩形在平面上旋转，再把矩形多余的地方用 overflow: hidden; 藏起来就可以了其他就是一些小地方的修饰了，不太重要，看个人喜好，比如外面套一层 div ，设置一个粉色 3px 宽的边框，再设个 padding 和里面的隔开，设置个阴影，还有把矩形的转动速度设置为匀速（我觉得这样好看点）<!DOCTYPE html><html> <head&
复制链接

扫一扫