昨天学习2D和3D的CSS3知识

最新推荐文章于 2024-07-11 18:23:29 发布

CV大师杨某

最新推荐文章于 2024-07-11 18:23:29 发布

阅读量113

点赞数

分类专栏：学习记录文章标签： css3 html5

本文链接：https://blog.csdn.net/yc1425869600/article/details/109740224

版权

学习记录专栏收录该内容

32 篇文章 1 订阅

订阅专栏

热点图
cssc参照代码

    <style>
        .map {
            position: relative;
            width: 400px;
            height: 279px;
            background: url(./timg.jpg) no-repeat;
            margin: 0 auto;
        }
        
        .city {
            position: absolute;
            top: 120px;
            right: 140px;
            color: #fff;
        }
        
        .tw {
            position: absolute;
            top: 220px;
            right: 105px;
            color: #fff;
        }
        
        .gd {
            position: absolute;
            top: 230px;
            right: 146px;
            color: #fff;
        }
        
        .den {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        
        .city div[class^="pulse"] {
            position: absolute;
            top: 50%;
            right: 50%;
            transform: translate(50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: bk 1.2s linear infinite;
        }
        
        .city div.pulse2 {
            animation-delay: 0.4s;
        }
        
        .city div.pulse3 {
            animation-delay: 0.8s;
        }
        
        @keyframes bk {
            0% {}
            50% {
                width: 20px;
                height: 20px;
                opacity: 1;
            }
            100% {
                width: 30px;
                height: 30px;
                opacity: 0;
            }
        }
    </style>

html参照代码

<body>
    <div class="map">
        <div class="city">
            <div class="den"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tw">
            <div class="den"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city gd">
            <div class="den"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

速度曲线

animati

前端2D小作品

on-timing-function:ease(默认)、linear(匀速)、ease-in(以低速开始)、ease-out(以低速结束)、ease-in-out（以低速开始以低速结束）

3D的位移和旋转

3D的位移：

语法：

translate3d(x,y,z) 参数没有写0
translateX(x)
translateY(y)
translateZ(z)
他们的单位px

透视

perspective 透视写在父级上

3D的旋转

语法：

transform-rotateX(ndeg) 沿着X轴旋转n度
transform-rotateY(ndeg) 沿着Y轴旋转n度
transform-rotateZ(ndeg) 沿着Z轴旋转n度
transform-rotate3d(n,n,n,deg) 自定义旋转 n为1，0

3D的呈现

语法：

transform-style:flat 默认不开启3D空间
transform-style:preserve-3d 子元素开启3D空间

CV大师杨某

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
昨天学习2D和3D的CSS3知识

3D的位移和旋转3D的位移：语法：translate3d(x,y,z) 参数没有写0translateX(x)translateY(y)translateZ(z)他们的单位px透视perspective 透视写在父级上3D的旋转语法：transform-rotateX(ndeg) 沿着X轴旋转n度transform-rotateY(ndeg) 沿着Y轴旋转n度transform-rotateZ(ndeg) 沿着Z轴旋转n度transform-rotate3d(n,n,
复制链接

扫一扫

专栏目录