web案例

最新推荐文章于 2022-08-30 20:00:12 发布

流风川

最新推荐文章于 2022-08-30 20:00:12 发布

阅读量289

点赞数 2

分类专栏：前端文章标签： html css3 css animation 定位

本文链接：https://blog.csdn.net/qq_44292366/article/details/112426741

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

案例1：旋转的太极

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转的太极</title>
    <style>
        /*设置所有元素外边距和内边距为0px,背景为浅灰色*/
        *{
            margin: 0;
            padding: 0;
            background-color: #ccc;
        }
        /*定义动画从0度到360度旋转的效果*/
        @keyframes taijirotate {
            from{
                /*设置从0度开始变形*/
                transform: rotate(0deg);
            }
            to{
                /*设置顺时针旋转360度*/
                /*-360逆时针旋转360度*/
                transform: rotate(360deg);
            }
        }
        .taiji{
            /*设置宽为0，由左右边框撑起整个宽，高300，剧中对齐，圆角*/
            width: 0;
            height: 300px;
            margin: 200px auto;
            border-left: 150px white solid;
            border-right: 150px black solid;
            border-radius: 50%;
            /*添加定义动画的引用，时间为3秒，线性，一直动画*/
            animation: taijirotate 3s linear infinite;
        }
        .taiji:before{
            /*在类taiji div的前面添加一个块级元素，内容为空，主要通过边框的背景色的设置*/
            display: block;
            content: "";
            /*插入一个宽高为50px的正方形，边框为50px,的白色，背景色为黑色，圆角为50%：形状变为圆形，背景为黑色，边框为白色，左移72px*/
            width: 50px;
            height: 50px;
            border: 50px white solid;
            background-color: black;
            border-radius: 50%;
            margin-left: -72px;
        }
        .taiji:after{
            /*在类taiji div的后面添加一个块级元素，内容为空，主要通过边框的背景色的设置*/
            display: block;
            content: "";
            /*插入一个宽高为50px的正方形，边框为50px,的黑色，背景色为白色，圆角为50%：形状变为圆形，背景为白色，边框为黑色，左移72px*/
            width: 50px;
            height: 50px;
            border: 50px black solid;
            background-color: white;
            border-radius: 50%;
            margin-left: -72px;
        }

    </style>
</head>
<body>
<div class="taiji">

</div>
</body>
</html>

案例2:3D旋转的相框

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D相框</title>
    <style>
        /*开启3D视距,启用3D效果*/
        body{
            perspective: 5000px;
        }
        /*定义动画x,y,z轴从0度到360度旋转的效果*/
        @keyframes imgrotate {
            from{
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            to{
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
        .container{
            /*div剧中显示，宽高为200px，相对定位*/
            margin: 300px auto;
            width: 200px;
            height: 200px;
            position: relative;
            /*以3D效果显示*/
            transform-style: preserve-3d;
            /*添加定义动画的引用，时间为6秒，线性，一直动画*/
            animation: imgrotate 6s linear infinite;
        }
        .container>img{
            /*div中的图片和div一样大，绝对定位，所有图片按图片放置顺序重叠在一个div中*/
            width: 200px;
            height: 200px;
            position: absolute;
        }

        /*面向自己的顶部图片，div重叠的第一张图沿y轴后移200px的div宽高大小*/
        .container>img:first-child{
            transform: translateZ(-200px);
        }
        /*面向自己的底部照片，div重叠的最后一张图片不动*/
        .container>img:last-child{
        }
        /*左边照片，div重叠的第二张图片，向左移200px,以右边为基点，沿y轴旋转90度*/
        .container>img:nth-of-type(2){
            left: -200px;
            transform-origin: right;
            transform: rotateY(-90deg);
        }

        /*上面照片，div重叠的第三张图片，向上移200px,以底部为基点，沿x轴旋转90度*/
        .container>img:nth-of-type(3){
            top: -200px;
            transform-origin: bottom;
            transform: rotateX(90deg);
        }
        /*右面照片,div重叠的第四张图片，向右移200px,以左边为基点，沿y轴旋转90度*/
        .container>img:nth-of-type(4){
            right: -200px;
            transform-origin: left;
            transform: rotateY(90deg);
        }
        /*下面照片，div重叠的第五张图片，向下移200px,以顶部边为基点，沿x轴旋转90度*/
        .container>img:nth-of-type(5){
            bottom: -200px;
            transform-origin: top;
            transform: rotateX(-90deg);
        }
        /*面向自己的顶部照片，div重叠的第一张图片向z轴面朝自己方向移动300px,移动距离为100px*/
        .container:hover img:first-child {
            transform: translateZ(-300px);
        }
        /*面向自己的底部照片，div重叠的最后一张图片，向沿y轴向后方移动100px*/
        .container:hover img:last-child {
            transform: translateZ(100px);
        }
        /*左边照片，div重叠的第二张图片，沿y轴逆时针旋转90平面显示，沿z轴水平移动100px*/
        .container:hover img:nth-child(2) {
            transform: rotateY(-90deg) translateZ(100px);
        }
        /*上面照片，div重叠的第三张图片，沿x轴顺时针旋转90平面显示，沿z轴水平移动100px*/
        .container:hover img:nth-child(3) {
            transform: rotateX(90deg) translateZ(100px);
        }
        /*右面照片,div重叠的第四张图片，沿y轴顺时针旋转90平面显示，沿z轴水平移动100px*/
        .container:hover img:nth-child(4) {
            transform: rotateY(90deg) translateZ(100px);
        }
        /*下面照片，div重叠的第五张图片，沿x轴逆时针旋转90平面显示，沿z轴水平移动100px*/
        .container:hover img:nth-child(5) {
            transform: rotateX(-90deg) translateZ(100px);
        }

    </style>
</head>
<body>
    <div class="container">
        <img src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
        <img src="img/5.jpg" alt="">
        <img src="img/6.jpg" alt="">
    </div>
</body>
</html>

理解示意图：

在这里插入图片描述

流风川

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
web案例

案例1：旋转的太极<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>旋转的太极</title> <style> /*设置所有元素外边距和内边距为0px,背景为浅灰色*/ *{ margin: 0; padding: 0;
复制链接

扫一扫