css实现简单的抽奖动画效果和旋转效果,还有春联效果

使用css的animation和transform和transition可以实现简单的图片放大缩小,旋转,位移的效果,由此可以延伸的动画效果还是挺多的,比如图片慢慢放大,图片慢慢旋转并放大,图片慢慢变化位置等等,

抽奖动画效果图

实现的原理也很简单,就是通过使用动画animation和关键动画帧来实现的,可以使用缩放来进行平滑的过渡效果,下面是源码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div class="center">
            <div>抽奖效果</div>
            <img
                src="https://img-blog.csdnimg.cn/67fc9799ae8e48749e82cf70b179895b.png"
                class="card"
            />
        </div>
        <style>
            .center {
                width: 500px;
                margin: 0 auto;
                text-align: center;
            }

            .card {
                width: 260px;
                height: 400px;
                animation: showImg 3s linear 1;
            }

            @keyframes showImg {
                0% {
                    transform: scale(0.1) rotate(0);
                }

                50% {
                    transform: scale(0.5) rotate(360deg);
                }

                100% {
                    transform: scale(1) rotate(720deg);
                }
            }
        </style>
    </body>
</html>

图片旋转360度并放大

图片由小变大,并以y轴为中心旋转360度后展示:

源代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div class="wrap">
            <div>抽奖效果</div>
            <div class="box">
                <img
                    src="https://img-blog.csdnimg.cn/67fc9799ae8e48749e82cf70b179895b.png"
                    class="img"
                />
            </div>
        </div>
        <style>
            * {
                padding: 0;
                margin: 0;
                /* height: 100%; */
                width: 100%;
            }
            .wrap {
                margin: 0 auto;
                padding-top: 100px;
                text-align: center;
            }

            .box {
                width: 300px;
                height: 400px;
                margin: 0 auto;
            }

            .img {
                width: 220px;
                height: 300px;
                transform: rotatey(0deg) scale(0.1);
                /* transform-origin: center; */
                transition: all 3s;
            }

            .wrap:hover .img {
                /* transform: scale(1); */
                transform: rotatey(360deg) scale(1);
                -webkit-transform: rotatey(360deg) scale(1);
                -o-transform: rotatey(360deg) scale(1);
                -moz-transform: rotatey(360deg) scale(1);
                -ms-transform: rotatey(360deg) scale(1);
            }
        </style>
    </body>
</html>

图片慢慢旋转动画

图片慢慢旋转是通过rotate来实现的,并且鼠标放上去之后,会有暂停的效果:下面的动图有卡顿的效果,实际情况非常丝滑

旋转图片的源代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div class="wrap">
            <div class="source"></div>
            <div class="avatar"></div>
        </div>
    </body>
    <style>
        body {
            background-color: black;
            padding-top: 100px;
        }

        .wrap {
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .source {
            width: 100px;
            height: 100px;
            margin-right: 20px;
            background-image: url('./assets/ball.png');
            background-position: center;
            background-size: 100% 100%;
            animation: circle 1s linear infinite;
        }

        .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-image: url('https://profile-avatar.csdnimg.cn/f6acd04828d84240afc2739fe039fd49_weixin_44786530.jpg!1');
            background-position: center;
            background-size: 100% 100%;
            animation: circle 2s linear infinite;
        }

        .source:hover {
            animation-play-state: paused;
        }

        .avatar:hover {
            animation-play-state: paused;
        }

        @keyframes circle {
            0% {
                transform: rotate(0deg);
            }
            10% {
                transform: rotate(36deg);
            }
            20% {
                transform: rotate(72deg);
            }
            30% {
                transform: rotate(108deg);
            }
            40% {
                transform: rotate(144deg);
            }
            50% {
                transform: rotate(180deg);
            }
            60% {
                transform: rotate(216deg);
            }
            70% {
                transform: rotate(252deg);
            }
            80% {
                transform: rotate(288deg);
            }
            90% {
                transform: rotate(324deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</html>

春联效果

春节快要到了,所以春联也整起来吧,使用了变换中的旋转,还有变化中心位置的修改,效果图如下:

源代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div class="wrap">
            <div class="card">
                <div class="text">春</div>
            </div>
            <div class="two">
                <div class="text">到</div>
            </div>
            <div class="three">
                <div class="text">万</div>
            </div>
            <div class="for">
                <div class="text">家</div>
            </div>
        </div>
        <style>
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }

            html,
            body {
                width: 100%;
                height: 100%;
                background-color: skyblue;
            }

            .wrap {
                width: 100px;
                /* margin-top: 200px; */
                margin: 100px auto;
            }

            .card {
                width: 100px;
                height: 100px;
                background-color: red;
                transform: rotate(45deg);
                transform-origin: left top;
                animation: shark 3s infinite ease-in-out -6s;
            }

            .two {
                width: 100px;
                height: 100px;
                margin-top: 45px;
                background-color: red;
                transform: rotate(45deg);
                transform-origin: left top;
                animation: shark 2s infinite ease-in-out -5s;
            }

            .three {
                width: 100px;
                height: 100px;
                margin-top: 45px;
                background-color: red;
                transform: rotate(45deg);
                transform-origin: left top;
                animation: shark 3s infinite ease-in-out -4s;
            }

            .for {
                width: 100px;
                height: 100px;
                margin-top: 45px;
                background-color: red;
                transform: rotate(45deg);
                transform-origin: left top;
                animation: shark 2s infinite ease-in-out -3s;
            }

            .text {
                font-size: 50px;
                color: white;
                transform: rotate(-45deg) translate(10px, 10px);
            }

            @keyframes shark {
                0% {
                    transform: rotate(30deg);
                }

                50% {
                    transform: rotate(60deg);
                }

                100% {
                    transform: rotate(30deg);
                }
            }
        </style>
    </body>
</html>
相关推荐
zhangjr05751 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
不爱学习的YY酱1 小时前
【操作系统不挂科】<CPU调度(13)>选择题(带答案与解析)
java·linux·前端·算法·操作系统
木子七1 小时前
vue2-vuex
前端·vue
麻辣_水煮鱼1 小时前
vue数据变化但页面不变
前端·javascript·vue.js
BY—-组态1 小时前
web组态软件
前端·物联网·工业互联网·web组态·组态
一条晒干的咸魚1 小时前
【Web前端】实现基于 Promise 的 API:alarm API
开发语言·前端·javascript·api·promise
WilliamLuo2 小时前
MP4结构初识-第一篇
前端·javascript·音视频开发
Beekeeper&&P...2 小时前
web钩子什么意思
前端·网络
啵咿傲2 小时前
重绘&重排、CSS树&DOM树&渲染树、动画加速 ✅
前端·css
前端Hardy2 小时前
HTML&CSS:数据卡片可以这样设计
前端·javascript·css·3d·html