H5+CSS3动画汇总(送给对象520的小礼物) 源码奉上

最新推荐文章于 2021-06-07 12:47:28 发布

南工gjl

最新推荐文章于 2021-06-07 12:47:28 发布

阅读量624

点赞数 3

分类专栏：前端文章标签： css3 html5

本文链接：https://blog.csdn.net/f_fengzilin/article/details/117152956

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用HTML5和CSS3创建一个包含3D翻转和滚动动画的交互式效果。通过相对定位、绝对定位、动画关键帧以及变换属性如rotate和translate，实现了图片和文字的立体翻转展示。同时，利用hover伪类触发翻转动画，以及动画延迟来创建轮播图效果。示例代码中详细展示了整个实现过程。

摘要由CSDN通过智能技术生成

#1.实现的动画效果

在这里插入图片描述

图片用的是我和我对象的，可以自行替换

#2.实现原理

 html5+css3进行实现，
 css3主要用到了的相对定位和绝对定位。以及动画animation+(2d和3d)转换rotate+transition(过度)+位移 translate
 伪类:hover的使用 ,类复合选择器  ^="类名"   (选择以相同类名开头的类)

#3.源码:

<!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">
    <meta name="keywords" content="测试">
    <title>Document</title>
</head>
<body>
    <style>
        @keyframes rollImg {
            0%{}
            75%{
                height: 310PX;
                width: 310px;
                opacity: 1;
            }
            100%{
                height: 320px;
                width: 320px;
                opacity: 0;
            }
        }
        @keyframes turn {
            25%{
                transform: rotateZ(90deg);
            }
            50%{
                transform: rotateZ(180deg);
            }
            75%{
                transform: rotateZ(270deg);
            }
            100%{
                transform: rotateZ(360deg);
            }
        }
        body{
            /* perspective: 5000px; */
        }
        .conter{
            position: relative;
           margin: 450px auto;
            width: 200px;
            height: 200px;
            transition: all 1s;
            /* 保留立体空间 */
            transform-style: preserve-3d;
        }
       .conter:hover{
            cursor: pointer;
            transform: rotateY(180deg);
        }
        .front, .back {
            position: absolute;
            top: 0;
            left:0;
            
            height: 100%;
            width: 100%;
            border-radius: 50%;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 200px;
        }
        .back{
            background-color: rgb(192, 212, 255);
            transform:rotateY(180deg);
        }
        .front{
            background-color: pink;
            z-index:1;
        }
        .conter div[class^="S-wrap"]{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 100px;
            left:100px;
            transform: translate(-50%,-50%);
            border-radius: 50%;
            box-shadow: 0 0 30px rgb(63, 152, 211);
            animation: rollImg 1s linear infinite ;
        }
        .conter div.S-wrap2{
            animation-delay: .4s;
        }
        .conter div.S-wrap3{
            animation-delay: .7s;
        }
        /* 旋转图 */
        .roll{
            position: relative;
            animation: turn 7s linear infinite;
            height: 100%;
            width: 100%;
        }
        .conter div[class^="wrap"]{
            position:absolute;         
        }
        .conter div>img{
            height: 190px;
            width: 190px;
            border-radius: 50%;
        }
        .conter div.wrap1{
            transform:translateX(260px)
        }
        .conter div.wrap2{
            transform:translateX(-260px);
        }
        .conter div.wrap3{
            transform:  translateY(-260px);
        }
         div.wrap4{
            transform: translateY(260px);
        } 
    </style>
    
   
      <!-- 镜子 -->
   <footer class="conter">
       <div class="back">
           <span class="point">家林</span> </div>
       <div class="front" >
        <span class="point">安清</span>
        </div>
           <div class="S-wrap1"></div>
           <div class="S-wrap2"></div>
           <div class="S-wrap3"></div>
       <!-- 轮播图 3d -->
       <div class="roll">
        <div class="wrap1">
            <img src="./5.jpg" alt="">
        </div>
        <div class="wrap2">
         <img src="./6.jpg" alt="">
        </div>
        <div class="wrap3">
         <img src="./7.jpg" alt="">
        </div>
        <div class="wrap4">
         <img src="./8.jpg" alt="">
        </div>
       </div>
           
    
   </footer>   
</body>
</html>