任务2-6(轮播图+animate库)

最新推荐文章于 2022-03-29 19:00:11 发布

weixin_46137837

最新推荐文章于 2022-03-29 19:00:11 发布

阅读量55

点赞数

文章标签： css3 html5 3d

本文链接：https://blog.csdn.net/weixin_46137837/article/details/119632017

版权

文章目录

动画
轮播图
旋转的立方体
Loading
animate库

动画

在这里插入图片描述

轮播图

<!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>轮播图</title>
    <style>
        @keyframes move{
            0% {left: 0;}
            24% {left: 0;}
            26% {left: -200px;}
            49% {left: -200px;}
            51% {left: -400px;}
            74% {left: -400px;}
            76% {left: -600px;}
            98% {left: -600px;}
            100% {left: -800px;}
        }
        @keyframes changeColor{
            0%{
                background-color:white;
            }
            25%{
                background-color: white;
            }
            26%{
                background-color: black;
            }
            100%{
                background-color: black;
            }
        }
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .window{
            width: 200px;
            height: 300px;
            overflow: hidden;
            position: relative;
            box-shadow:2px 2px 5px gray;
            margin: 10px auto;
        }
        .move{
            width:1000px;
            height:400px;
            position: absolute;
            animation: move 8s linear infinite;
        }
        li{
            width:200px;
            height: 300px;
            float: left;
        }
        li img{
            display: block;
            width: 100%;
            height: 100%;
        }
        .dots{
            width: 120px;
            height: 6px;
            position: absolute;
            left: 40px;
            bottom: 20px;
            display: flex;
            justify-content: space-around;
        }
        .dot{
            width: 6px;
            height: 6px;
            background-color: white;
            border-radius: 50%;
            animation: changeColor 8s linear infinite;
        }
    </style>
</head>
<body>
    <div class="window">
        <ul class="move">
            <li><img src="img/download-1.jpg"></li>
            <li><img src="img/download-2.jpg"></li>
            <li><img src="img/download-3.jpg"></li>
            <li><img src="img/download-4.jpg"></li>
            <li><img src="img/download-1.jpg"></li>
        </ul>
        <div class="dots">
            <div class="dot"></div>
            <div class="dot" style="animation-delay: 2s;"></div>
            <div class="dot" style="animation-delay: 4s;"></div>
            <div class="dot" style="animation-delay: 6s;"></div>
        </div>
    </div>
</body>
</html>

旋转的立方体

在这里插入图片描述

<!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>旋转的立方体</title>
    <style>
        @keyframes roll{
            from{
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }
            to{
                transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
            }
        }
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            padding: 100px;
        }
        ul{
            width: 200px;
            height: 200px;
            position: relative;
            /* 开启浏览器3d效果 */
            transform-style: preserve-3d;
            animation: roll 4s linear infinite;
        }
        li{
            width: 200px;
            height: 200px;
            position: absolute;
            opacity: .5;
            
        }
        li:nth-of-type(1){
            background-color: blueviolet;
            transform: rotateX(90deg) translateZ(100px) ;
        }
        li:nth-of-type(2){
            background-color: salmon;
            transform: rotateX(-90deg) translateZ(100px) ;
        }
        li:nth-of-type(3){
            background-color: powderblue;
            transform: rotateY(90deg) translateZ(100px) ;
        }
        li:nth-of-type(4){
            background-color: indianred;
            transform: rotateY(-90deg) translateZ(100px) ;
        }
        li:nth-of-type(5){
            background-color: greenyellow;
            transform: translateZ(100px) ;
        }
        li:nth-of-type(6){
            background-color: orchid;
            transform: rotateY(180deg) translateZ(100px) ;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

Loading

在这里插入图片描述

<!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>
        @keyframes move{
           0%{
                transform:translateX(0);
            }
            50%{
                transform: translateX(100%);
            }
            100%{
                transform:translateX(0);
            }
        }
        html{
            background-color: darkorchid;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: white;
            border-radius: 50%;
            float: left;
            position: relative;
        }
        .right{
            margin-left: 20px;
        }
        .eye{
            width:40px ;
            height: 40px;
            background-color: darkorchid;
            border-radius: 50%;
            float: left;
            position: absolute;
            left: 8%;
            bottom: 10%;
            animation: move 3s linear infinite;
        }
    </style>
</head>
<body>
    <div class="left">
        <div class="eye"></div>
    </div>
    <div class="right">
        <div class="eye"></div>
    </div>
</body>
</html>

在这里插入图片描述

<!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>Loading</title>
    <style>
        @keyframes clock{
            0%{transform:rotate(-80deg);}
            50%{transform: rotate(80deg);}
            100%{transform:rotate(-80deg);}
        }
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html{
            background-color: mediumpurple;
        }
        .square{
            width: 200px;
            height: 200px;
            background-color: mediumpurple;
            position: relative;
        }
        .circle{
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border:2px solid white;
            border-radius: 50%;
            position: absolute;
            top:48px;
            left: 48px;
            overflow: hidden;
        }
        .banyuan{
            width:90px ;
            height: 20px;
            background-color: white;
            position: absolute;
            bottom: 0;
            left: 3px;
        }
        .zhizhen{
            width: 2px;
            height: 40px;
            background-color: white;
            position: absolute;
            left: 50%;
            top: 40%;
            transform-origin: center bottom;
            animation: clock 3s linear infinite;
        }
    </style>
</head>
<body>
     <div class="square">
        <div class="circle">
            <div class="zhizhen"></div>
            <div class="banyuan"></div>
            
            </div>
        </div>
     </div>
</body>
</html>

animate库

下载地址
引用方式:
1. <head> <link rel="stylesheet" href="animate.min.css"> </head>

2. <head> <link href="http://cdn.bootcdn.net/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet"><head>

给指定的元素加上指定的动画样式名

 第一个animated是必须添加的样式名，第二个是指定的动画样式名。

<!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">
    <link href="http://cdn.bootcdn.net/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet">
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            /*animation: fadeIn 2s infinite;*/
        }
    </style>
    <title>Document</title>
    
</head>
<body>
    <div class="animated shake"></div>
</body>
</html>

weixin_46137837

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
任务2-6(轮播图+animate库)

文章目录动画轮播图旋转的立方体Loadinganimate库动画轮播图<!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, init
复制链接

扫一扫