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>
相关推荐
逐·風1 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山3 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨6 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL6 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1117 小时前
css实现div被图片撑开
前端·css