首页 前端知识 使用HTML模拟剪辑特效

使用HTML模拟剪辑特效

2024-10-17 11:10:08 前端知识 前端哥 740 523 我要收藏

这是在手机上写的,纯HTML和 css。用WebCat写的,挺好用的一个软件,上课打发时间蛮不错的

效果如下:(懒得加动图了,随便截的)

有很多重复的地方,还可以缩减,以后在看吧。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" name="viewport"

        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">

    <title>剪辑特效模拟</title>

    <style>

        body {

            background-color: red;

        }

        #dv_01 {

            width: 300px;

            height: 300px;

            position: absolute;

            top: 150px;

            left: 25px;

            border: 10px solid #000000;

            animation: dv 1.5s cubic-bezier(1, 0, 0, 0.5) infinite;

        }

        @keyframes dv {

            0% {

                opacity: 0.3;

                transform: rotate(0deg) scale(0.5);

            }

            50% {

                width: 330px;

                height: 330px;

                top: 135px;

                left: 10px;

                opacity: 0.9;

                transform: rotate(0deg) scale(0.5);

            }

            100% {

                opacity: 0.3;

                transform: rotate(0deg) scale(0.5);

            }

        }

        #dv_02 {

            width: 300px;

            height: 300px;

            position: absolute;

            top: 150px;

            left: 25px;

            border: 10px solid #000000;

            animation: dv2 1.5s cubic-bezier(1, 0, 0, 0.5) infinite;

        }

        @keyframes dv2 {

            0% {

                opacity: 0.3;

                transform: rotate(0deg) scale(0.5);

            }

            50% {

                width: 360px;

                height: 360px;

                top: 120px;

                left: -5px;

                opacity: 0.9;

                transform: rotate(45deg) scale(0.5);

            }

            100% {

                opacity: 0.3;

                transform: rotate(0deg) scale(0.5);

            }

        }

        #dv_03 {

            width: 300px;

            height: 300px;

            position: absolute;

            top: 150px;

            left: 25px;

            border: 10px solid #000000;

            animation: dv3 1.5s cubic-bezier(1, 0, 0, 0.5) infinite;

        }

        @keyframes dv3 {

            0% {

                opacity: 0.3;

                transform: rotate(0deg) scale(0.5);

            }

            50% {

                width: 390px;

                height: 390px;

                top: 105px;

                left: -20px;

                opacity: 0.9;

                transform: rotate(90deg) scale(0.5);

            }

            100% {

                opacity: 0.3;

                transform: rotate(0deg) scale(0.5);

            }

        }

        #tx_01 {

            font-size: 30px;

            color: #ffffff;

            width: 40px;

            height: 40px;

            border: 3px solid #ffffff;

            position: absolute;

            top: 290px;

            left: 75px;

            opacity: 1;

            animation: tx1 1.5s cubic-bezier(1, 0, 0, 0.5) infinite;

        }

        @keyframes tx1 {

            0% {

                width: 0px;

                height: 0px;

                border: 0px;

                top: 300px;

                left: 175px;

                opacity: 0;

            }

            50% {

                width: 40px;

                height: 40px;

                border: 3px solid #ffffff;

                position: absolute;

                top: 290px;

                left: 75px;

                opacity: 1;

            }

            100% {

                width: 0px;

                height: 0px;

                border: 0px;

                top: 300px;

                left: 175px;

                opacity: 0;

            }

        }

        #tx_02 {

            font-size: 30px;

            color: #ffffff;

            width: 40px;

            height: 40px;

            border: 3px solid #ffffff;

            position: absolute;

            top: 290px;

            left: 137px;

            opacity: 1;

            animation: tx2 1.5s cubic-bezier(1, 0, 0, 0.5) infinite;

        }

        @keyframes tx2 {

            0% {

                width: 0px;

                height: 0px;

                border: 0px;

                top: 300px;

                left: 175px;

                opacity: 0;

            }

            50% {

                width: 40px;

                height: 40px;

                border: 3px solid #ffffff;

                position: absolute;

                top: 290px;

                left: 137px;

                opacity: 1;

            }

            100% {

                width: 0px;

                height: 0px;

                border: 0px;

                top: 300px;

                left: 175px;

                opacity: 0;

            }

        }

        #tx_03 {

            font-size: 30px;

            color: #ffffff;

            width: 40px;

            height: 40px;

            border: 2px solid #ffffff;

            position: absolute;

            top: 290px;

            left: 192px;

            opacity: 1;

            animation: tx3 1.5s cubic-bezier(1, 0, 0, 0.5) infinite;

        }

        @keyframes tx3 {

            0% {

                width: 0px;

                height: 0px;

                border: 0px;

                top: 300px;

                left: 175px;

                opacity: 0;

            }

            50% {

                width: 40px;

                height: 40px;

                border: 3px solid #ffffff;

                position: absolute;

                top: 290px;

                left: 192px;

                opacity: 1;

            }

            100% {

                width: 0px;

                height: 0px;

                border: 0px;

                top: 300px;

                left: 175px;

                opacity: 0;

            }

        }

        #tx_04 {

            font-size: 30px;

            color: #ffffff;

            width: 40px;

            height: 40px;

            border: 2px solid #ffffff;

            position: absolute;

            top: 290px;

            left: 250px;

            opacity: 1;

            animation: tx4 1.5s cubic-bezier(1, 0, 0, 0.5) infinite;

        }

        @keyframes tx4 {

            0% {

                width: 0px;

                height: 0px;

                border: 0px;

                top: 300px;

                left: 175px;

                opacity: 0;

            }

            50% {

                width: 40px;

                height: 40px;

                border: 3px solid #ffffff;

                position: absolute;

                top: 290px;

                left: 250px;

                opacity: 1;

            }

            100% {

                width: 0px;

                height: 0px;

                border: 0px;

                top: 300px;

                left: 175px;

                opacity: 0;

            }

        }

    </style>

</head>

<body>

    <div id="dv_01"></div>

    <div id="dv_02"></div>

    <div id="dv_03"></div>

    <div id="tx_01">好</div>

    <div id="tx_02">戏</div>

    <div id="tx_03">开</div>

    <div id="tx_04">场</div>

</body>

</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19117.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!