CSS3动画demmo和Vue轮播图-CSDN博客

本文链接：https://blog.csdn.net/javacainiao222/article/details/125640408

demo1：自动旋转的图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            border-radius: 50%;
            /* 使用动画 */
            animation: rotate360 2s infinite linear;
        }

        /* 定义动画 */
        @keyframes rotate360 {
            /* 从 */
            from {
                /* transfrom:表示变形 rotate:表示旋转 */
                transform: rotate(0deg);
            }
            /* 到 */
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <img src="/Demo/dog.jpg" alt="">
</body>
</html>

demo2：渐变的灯泡。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bulb {
            /* 绝对定位 */
            position: absolute;
            top: 100px;
            left: 200px;
        }

        .light {
            /* 绝对定位 */
            position: absolute;
            top: 31px;
            left: 126px;
            /* 使用动画 infinite 永远 linear 匀速 alternate 反复*/
            animation: BlingBling 2s infinite linear alternate;
        }
    /* 动画定义 */
    @keyframes BlingBling {
        from {
            /* 透明度 */
            opacity: 1;
        }
        to {
            opacity: 0;
        }
        
        
    }
    </style>
</head>
<body>
    <img class="bulb" src="/Demo/bulb.png" alt="">
    <img class="light" src="/Demo/light.png" alt="">
</body>
</html>

demo3：飞行的飞船。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        body {
            background-color: black;
        }

        .sz {
            position: absolute;
            top: 200px;
            left: 200px;
            width: 100px;
            height: 100px;
            animation: sz 1s infinite linear alternate;
        }

        .line1 {
            position: absolute;
            top: 175px;
            left: 187px;
            animation: line 1s infinite linear ;
        }

        .line2 {
            position: absolute;
            top: 169px;
            left: 196px;
            animation: line 2s infinite linear ;
        }

        .line3 {
            position: absolute;
            top: 175px;
            left: 200px;
            animation: line 3s infinite linear ;
        }

        .line4 {
            position: absolute;
            top: 200px;
            left: 212px;
            animation: line 4s infinite linear ;
        }

        /* 定义动画 */
        @keyframes  sz {
            from {

                transform: translate(-30px,-30px);
            }
            to {
                transform: translate(30px,30px);
            }
        }

        @keyframes line {
            from {
                /* translate:表示位移 */
                transform: translate(300px,-300px);
            }
            to {
                transform: translate(-300px,300px);
            }
        }

    </style>
</head>
<body>
    <img class="line1" src="/Demo/line1.png" alt="">
    <img class="line2" src="/Demo/line2.png" alt="">
    <img class="line3" src="/Demo/line3.png" alt="">
    <img class="line4" src="/Demo/line4.png" alt="">
    <img class="sz "src="/Demo/sz.png" alt="">
</body>
</html>

demo5：图片的旋转 X Y Z。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 舞台 */
        .box {
            width: 300px;
            height: 300px;
            margin: 100px;
            /* 景深 */
            perspective: 300px;
        }
        img {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            border-radius: 50%;
            /* 过度  用户触碰后进行3D旋转*/
            transition: all 1s;
        }
        /* ：hover 表示触碰 伪类 用户操作 */
        .box:hover .dog {
            transform: rotateX(360deg);
        }
        .box:hover .cat {
            transform: rotateY(360deg);
        }
        .box:hover .elephant {
            transform: rotateZ(360deg);
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="/Demo/cat.jpg" class="cat">
    </div>
    <div class="box">
        <img src="/Demo/elephant.jpg" class="elephant">
    </div>
    <div class="box">
        <img src="/Demo/dog.jpg" class="dog">
    </div>
</body>
</html>

demo8：基于vue的轮播图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            /* 内边距，外边距 */
            margin: 0;
            padding: 0;
        }

        .crousel {
            width: 650px;
            height: 360px;
            border: 1px solid #000;
            margin: 10px auto;
            /* 相对定位 */
            position: relative;
        }

        .crousel img {
            /* 绝对定位 */
            position: absolute;
            top: 0;
            left: 0;
            /* 透明度 */
            opacity: 0;
            /* 过渡动画 */
            transition: all .6s;
        }

        .crousel img.courrent {
            /* 透明度 */
            opacity: 1;
        }

        .crousel .circles {
            width: 170px;
            height: 20px;
            position: absolute;
            /* 绝对定位，居中 */
            bottom: 20px;
            left: 50%;
            /* 水平居中 */
            transform:translateX(-50%);
            /* 弹性盒容器 */
            display: flex;
            /* 分空格 */
            justify-content: space-between;
        }

        .crousel .circles p {
            background-color: rgba(156, 245, 251, 0.66);
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }

        .crousel .circles p.courrent {
            background-color: deeppink;
        }

    </style>
</head>
<body>
    <div id="app" class="crousel">
        <img 
        v-for="i in 5" 
        :src="'/Demo/' + (i-1) + '.jpg'" 
        :class="{courrent: newIdx == i-1}"
        >
        <div class="circles">
            <p
                v-for="i in 5"
                :class="{courrent: newIdx == i-1}"
                @click="newIdx = i-1"
            >
            </p>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            // 定义vue在那个div中使用
            el: '#app',
            // 数据控制视图
            data: {
                newIdx: 0
            }
        })
    </script>
</body>
</html>

demo9：王者荣耀英雄选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #000;
            color:#fff;
        }
        .hero {
            float: left;
            width: 100px;
            height: 180px;
            border: 1px solid #fff;
            margin: 20px;
            text-align: center;
            position: relative;
        }
        .hero img {
            width: 100px;
            height: 100px;
        }
        /* 伪元素 */
        .mask::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(9, 9, 9, 0.575);
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            筛选选项：
            <input type="radio" value="不限" v-model="newType">不限
            <input type="radio" value="射手" v-model="newType">射手
            <input type="radio" value="战士" v-model="newType">战士
            <input type="radio" value="法师" v-model="newType">法师
            <input type="radio" value="刺客" v-model="newType">刺客
            <input type="radio" value="坦克" v-model="newType">坦克
           <p>
            筛选难度：
            <input type="radio" value="不限" v-model="newDiff">不限
            <input type="radio" value="简单" v-model="newDiff">简单
            <input type="radio" value="中等" v-model="newDiff">中等
            <input type="radio" value="困难" v-model="newDiff">困难
           </p>>
        </div>
        <div 
        class="hero " 
        :class="{mask: (newType != '不限' && item.hero_type != newType) || (newDiff != '不限' && item.difficulty != newDiff)}"
        
        v-for="item in heroArr" 
        :key="item.id"
        >
        <img :src="'http://www.zkt-it.com:5050/images/wzry/'+item.id+'.jpg'" >
       <p> {{item.cname}}</p>
       <p> {{item.hero_type}}</p>
       <p> {{item.difficulty}}</p>
       
        </div>
    </div>
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- axios是Ajax工具包，当前最流行的 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
        el: '#app',
        // Vue生命周期：Vue创建好之后做的事情
        async created () {
        //    发出Ajax请求，请求服务器接口数据
        const data = await axios.get ('http://www.zkt-it.com:5050/wzry/');
         
        console.log(data.data);

        // 设置英雄数组，为服务器返回的数组
        this.heroArr = data.data;

        },
        // 数据
        data() {
            return {
                heroArr: [],
                newType: '不限',
                newDiff: '简单',
            }
        },
    })
    </script>

</body>
</html>