CSS3动画（转自大神制作，很绚丽，纯CSS之作）

最新推荐文章于 2022-09-20 12:53:23 发布
最新推荐文章于 2022-09-20 12:53:23 发布
阅读量198 收藏 1
点赞数
原文链接：https://my.oschina.net/strip/blog/738576
版权

绚丽的3D动画（纯CSS实现，代码有点长啊，在这里不知道怎么折叠起来，讲究看看吧）

效果图：https://bupt-hjm.github.io/css3-3d/（转）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*容器*/
        .container{
            -webkit-perspective: 1000px;
            -moz-perspective: 1000px;
            -ms-perspective: 1000px;
            perspective: 1000px;
        }
        /*盒子*/
        .piece-box{
            position: relative;
            width: 200px;
            height: 200px;
            margin: 300px auto;
            perspective-origin: 50% 50%;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -moz-animation: pieceRotate 5s;
            -webkit-animation: pieceRotate 5s;
            -o-animation: pieceRotate 5s;
        }
        .piece-box2{
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            animation: boxRotate 5s 10s infinite;
            -moz-animation: boxRotate 5s 10s infinite;
            -webkit-animation: boxRotate 5s 10s infinite;
            -o-animation: boxRotate 5s 10s infinite;
        }
        .piece{
            position: absolute;
            width: 200px;
            height: 200px;
            background: red;
            opacity: 0.5;
        }
        .piece-1{
            background: #ff6666;
            -webkit-transform: rotateY(0deg) translateZ(173.2px);
            -ms-transform: rotateY(0deg) translateZ(173.2px);
            -o-transform: rotateY(0deg) translateZ(173.2px);
            transform: rotateY(0deg) translateZ(173.2px);
            animation: piece1Rotate 5s 5s;
            -webkit-animation: piece1Rotate 5s 5s;
            -moz-animation: piece1Rotate 5s 5s;
            -o-animation: piece1Rotate 5s 5s;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }
        .piece-2{
            background: #006699;
            -webkit-transform: rotateY(60deg) translateZ(173.2px);
            -ms-transform: rotateY(60deg) translateZ(173.2px);
            -o-transform: rotateY(60deg) translateZ(173.2px);
            transform: rotateY(60deg) translateZ(173.2px);
            animation: piece2Rotate 5s 5s;
            -webkit-animation: piece2Rotate 5s 5s;
            -moz-animation: piece2Rotate 5s 5s;
            -o-animation: piece2Rotate 5s 5s;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }
        .piece-3{
            background: #ffff00;
            -webkit-transform: rotateY(120deg) translateZ(173.2px);
            -ms-transform: rotateY(120deg) translateZ(173.2px);
            -o-transform: rotateY(120deg) translateZ(173.2px);
            transform: rotateY(120deg) translateZ(173.2px);
            animation: piece3Rotate 5s 5s;
            -webkit-animation: piece3Rotate 5s 5s;
            -moz-animation: piece3Rotate 5s 5s;
            -o-animation: piece3Rotate 5s 5s;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }
        .piece-4{
            background: #009999;
            -webkit-transform: rotateY(180deg) translateZ(173.2px);
            -ms-transform: rotateY(180deg) translateZ(173.2px);
            -o-transform: rotateY(180deg) translateZ(173.2px);
            transform: rotateY(180deg) translateZ(173.2px);
            animation: piece4Rotate 5s 5s;
            -webkit-animation: piece4Rotate 5s 5s;
            -moz-animation: piece4Rotate 5s 5s;
            -o-animation: piece4Rotate 5s 5s;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }
        .piece-5{
            background: #ff0033;
            -webkit-transform: rotateY(240deg) translateZ(173.2px);
            -ms-transform: rotateY(240deg) translateZ(173.2px);
            -o-transform: rotateY(240deg) translateZ(173.2px);
            transform: rotateY(240deg) translateZ(173.2px);
            animation: piece5Rotate 5s 5s;
            -webkit-animation: piece5Rotate 5s 5s;
            -moz-animation: piece5Rotate 5s 5s;
            -o-animation: piece5Rotate 5s 5s;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }
        .piece-6{
            background: #ff6600;
            -webkit-transform: rotateY(300deg) translateZ(173.2px);
            -ms-transform: rotateY(300deg) translateZ(173.2px);
            -o-transform: rotateY(300deg) translateZ(173.2px);
            transform: rotateY(300deg) translateZ(173.2px);
            animation: piece6Rotate 5s 5s;
            -webkit-animation: piece6Rotate 5s 5s;
            -moz-animation: piece6Rotate 5s 5s;
            -o-animation: piece6Rotate 5s 5s;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }
        @keyframes pieceRotate {
            0% {
                -webkit-transform: rotateY(0deg);
                -ms-transform: rotateY(0deg);
                -o-transform: rotateY(0deg);
                transform: rotateY(0deg);
            }
            100% {
                -webkit-transform: rotateY(360deg);
                -ms-transform: rotateY(360deg);
                -o-transform: rotateY(360deg);
                transform: rotateY(360deg);
            }
        }
        @-moz-keyframes pieceRotate {
            0% {
                -webkit-transform: rotateY(0deg);
                -ms-transform: rotateY(0deg);
                -o-transform: rotateY(0deg);
                transform: rotateY(0deg);
            }
            100% {
                -webkit-transform: rotateY(360deg);
                -ms-transform: rotateY(360deg);
                -o-transform: rotateY(360deg);
                transform: rotateY(360deg);
            }
        }
        @-webkit-keyframes pieceRotate {
            0% {
                -webkit-transform: rotateY(0deg);
                -ms-transform: rotateY(0deg);
                -o-transform: rotateY(0deg);
                transform: rotateY(0deg);
            }
            100% {
                -webkit-transform: rotateY(360deg);
                -ms-transform: rotateY(360deg);
                -o-transform: rotateY(360deg);
                transform: rotateY(360deg);
            }
        }
        @-o-keyframes pieceRotate {
            0% {
                -webkit-transform: rotateY(0deg);
                -ms-transform: rotateY(0deg);
                -o-transform: rotateY(0deg);
                transform: rotateY(0deg);
            }
            100% {
                -webkit-transform: rotateY(360deg);
                -ms-transform: rotateY(360deg);
                -o-transform: rotateY(360deg);
                transform: rotateY(360deg);
            }
        }
        @keyframes piece1Rotate {
            0% {
                -webkit-transform: rotateY(0deg)translateZ(173.2px);
                -ms-transform: rotateY(0deg)translateZ(173.2px);
                -o-transform: rotateY(0deg)translateZ(173.2px);
                transform: rotateY(0deg)translateZ(173.2px);
            }
            100% {
                -webkit-transform: rotateY(0deg)translateZ(100px);
                -ms-transform: rotateY(0deg)translateZ(100px);
                -o-transform: rotateY(0deg)translateZ(100px);
                transform: rotateY(0deg)translateZ(100px);
            }
        }
        @-moz-keyframes piece1Rotate {
            0% {
                -webkit-transform: rotateY(0deg)translateZ(173.2px);
                -ms-transform: rotateY(0deg)translateZ(173.2px);
                -o-transform: rotateY(0deg)translateZ(173.2px);
                transform: rotateY(0deg)translateZ(173.2px);
            }
            100% {
                -webkit-transform: rotateY(0deg)translateZ(100px);
                -ms-transform: rotateY(0deg)translateZ(100px);
                -o-transform: rotateY(0deg)translateZ(100px);
                transform: rotateY(0deg)translateZ(100px);
            }
        }
        @-webkit-keyframes piece1Rotate {
            0% {
                -webkit-transform: rotateY(0deg)translateZ(173.2px);
                -ms-transform: rotateY(0deg)translateZ(173.2px);
                -o-transform: rotateY(0deg)translateZ(173.2px);
                transform: rotateY(0deg)translateZ(173.2px);
            }
            100% {
                -webkit-transform: rotateY(0deg)translateZ(100px);
                -ms-transform: rotateY(0deg)translateZ(100px);
                -o-transform: rotateY(0deg)translateZ(100px);
                transform: rotateY(0deg)translateZ(100px);
            }
        }
        @-o-keyframes piece1Rotate {
            0% {
                -webkit-transform: rotateY(0deg)translateZ(173.2px);
                -ms-transform: rotateY(0deg)translateZ(173.2px);
                -o-transform: rotateY(0deg)translateZ(173.2px);
                transform: rotateY(0deg)translateZ(173.2px);
            }
            100% {
                -webkit-transform: rotateY(0deg)translateZ(100px);
                -ms-transform: rotateY(0deg)translateZ(100px);
                -o-transform: rotateY(0deg)translateZ(100px);
                transform: rotateY(0deg)translateZ(100px);
            }
        }

        @keyframes piece2Rotate {
            0% {
                -webkit-transform: translateX(173.2px)rotateY(0deg);
                -ms-transform: translateX(173.2px)rotateY(0deg);
                -o-transform: translateX(173.2px)rotateY(0deg);
                transform: translateX(173.2px)rotateY(0deg);
            }
            100% {
                -webkit-transform: translateY(100px)rotateX(90deg);
                -ms-transform: translateY(100px)rotateX(90deg);
                -o-transform: translateY(100px)rotateX(90deg);
                transform: translateY(100px)rotateX(90deg);
            }
        }
        @-moz-keyframes piece2Rotate {
            0% {
                -webkit-transform: translateX(173.2px)rotateY(0deg);
                -ms-transform: translateX(173.2px)rotateY(0deg);
                -o-transform: translateX(173.2px)rotateY(0deg);
                transform: translateX(173.2px)rotateY(0deg);
            }
            100% {
                -webkit-transform: translateY(100px)rotateX(90deg);
                -ms-transform: translateY(100px)rotateX(90deg);
                -o-transform: translateY(100px)rotateX(90deg);
                transform: translateY(100px)rotateX(90deg);
            }
        }
        @-webkit-keyframes piece2Rotate {
            0% {
                -webkit-transform: translateX(173.2px)rotateY(0deg);
                -ms-transform: translateX(173.2px)rotateY(0deg);
                -o-transform: translateX(173.2px)rotateY(0deg);
                transform: translateX(173.2px)rotateY(0deg);
            }
            100% {
                -webkit-transform: translateY(100px)rotateX(90deg);
                -ms-transform: translateY(100px)rotateX(90deg);
                -o-transform: translateY(100px)rotateX(90deg);
                transform: translateY(100px)rotateX(90deg);
            }
        }
        @-o-keyframes piece2Rotate {
            0% {
                -webkit-transform: translateX(173.2px)rotateY(0deg);
                -ms-transform: translateX(173.2px)rotateY(0deg);
                -o-transform: translateX(173.2px)rotateY(0deg);
                transform: translateX(173.2px)rotateY(0deg);
            }
            100% {
                -webkit-transform: translateY(100px)rotateX(90deg);
                -ms-transform: translateY(100px)rotateX(90deg);
                -o-transform: translateY(100px)rotateX(90deg);
                transform: translateY(100px)rotateX(90deg);
            }
        }

        @keyframes piece3Rotate {
            0% {
                -webkit-transform: translateX(173.2px)rotateY(0deg);
                -ms-transform: translateX(173.2px)rotateY(0deg);
                -o-transform: translateX(173.2px)rotateY(0deg);
                transform: translateX(173.2px)rotateY(0deg);
            }
            100% {
                -webkit-transform: translateX(100px)rotateY(90deg);
                -ms-transform: translateX(100px)rotateY(90deg);
                -o-transform: translateX(100px)rotateY(90deg);
                transform: translateX(100px)rotateY(90deg);
            }
        }
        @-moz-keyframes piece3Rotate {
            0% {
                -webkit-transform: translateX(173.2px)rotateY(0deg);
                -ms-transform: translateX(173.2px)rotateY(0deg);
                -o-transform: translateX(173.2px)rotateY(0deg);
                transform: translateX(173.2px)rotateY(0deg);
            }
            100% {
                -webkit-transform: translateX(100px)rotateY(90deg);
                -ms-transform: translateX(100px)rotateY(90deg);
                -o-transform: translateX(100px)rotateY(90deg);
                transform: translateX(100px)rotateY(90deg);
            }
        }
        @-webkit-keyframes piece3Rotate {
            0% {
                -webkit-transform: translateX(173.2px)rotateY(0deg);
                -ms-transform: translateX(173.2px)rotateY(0deg);
                -o-transform: translateX(173.2px)rotateY(0deg);
                transform: translateX(173.2px)rotateY(0deg);
            }
            100% {
                -webkit-transform: translateX(100px)rotateY(90deg);
                -ms-transform: translateX(100px)rotateY(90deg);
                -o-transform: translateX(100px)rotateY(90deg);
                transform: translateX(100px)rotateY(90deg);
            }
        }
        @-o-keyframes piece3Rotate {
            0% {
                -webkit-transform: translateX(173.2px)rotateY(0deg);
                -ms-transform: translateX(173.2px)rotateY(0deg);
                -o-transform: translateX(173.2px)rotateY(0deg);
                transform: translateX(173.2px)rotateY(0deg);
            }
            100% {
                -webkit-transform: translateX(100px)rotateY(90deg);
                -ms-transform: translateX(100px)rotateY(90deg);
                -o-transform: translateX(100px)rotateY(90deg);
                transform: translateX(100px)rotateY(90deg);
            }
        }

        @keyframes piece4Rotate {
            0% {
                -webkit-transform: rotateY(0deg)translateZ(173.2px);
                -ms-transform: rotateY(0deg)translateZ(173.2px);
                -o-transform: rotateY(0deg)translateZ(173.2px);
                transform: rotateY(0deg)translateZ(173.2px);
            }
            100% {
                -webkit-transform: rotateY(0deg)translateZ(-100px);
                -ms-transform: rotateY(0deg)translateZ(-100px);
                -o-transform: rotateY(0deg)translateZ(-100px);
                transform: rotateY(0deg)translateZ(-100px);
            }
        }
        @-moz-keyframes piece4Rotate {
            0% {
                -webkit-transform: rotateY(0deg)translateZ(173.2px);
                -ms-transform: rotateY(0deg)translateZ(173.2px);
                -o-transform: rotateY(0deg)translateZ(173.2px);
                transform: rotateY(0deg)translateZ(173.2px);
            }
            100% {
                -webkit-transform: rotateY(0deg)translateZ(-100px);
                -ms-transform: rotateY(0deg)translateZ(-100px);
                -o-transform: rotateY(0deg)translateZ(-100px);
                transform: rotateY(0deg)translateZ(-100px);
            }
        }
        @-webkit-keyframes piece4Rotate {
            0% {
                -webkit-transform: rotateY(0deg)translateZ(173.2px);
                -ms-transform: rotateY(0deg)translateZ(173.2px);
                -o-transform: rotateY(0deg)translateZ(173.2px);
                transform: rotateY(0deg)translateZ(173.2px);
            }
            100% {
                -webkit-transform: rotateY(0deg)translateZ(-100px);
                -ms-transform: rotateY(0deg)translateZ(-100px);
                -o-transform: rotateY(0deg)translateZ(-100px);
                transform: rotateY(0deg)translateZ(-100px);
            }
        }
        @-o-keyframes piece4Rotate {
            0% {
                -webkit-transform: rotateY(0deg)translateZ(173.2px);
                -ms-transform: rotateY(0deg)translateZ(173.2px);
                -o-transform: rotateY(0deg)translateZ(173.2px);
                transform: rotateY(0deg)translateZ(173.2px);
            }
            100% {
                -webkit-transform: rotateY(0deg)translateZ(-100px);
                -ms-transform: rotateY(0deg)translateZ(-100px);
                -o-transform: rotateY(0deg)translateZ(-100px);
                transform: rotateY(0deg)translateZ(-100px);
            }
        }

        @keyframes piece5Rotate {
            0% {
                -webkit-transform: translateX(173.2px)rotateY(0deg);
                -ms-transform: translateX(173.2px)rotateY(0deg);
                -o-transform: translateX(173.2px)rotateY(0deg);
                transform: translateX(173.2px)rotateY(0deg);
            }
            100% {
                -webkit-transform: translateX(-100px)rotateY(90deg);
                -ms-transform: translateX(-100px)rotateY(90deg);
                -o-transform: translateX(-100px)rotateY(90deg);
                transform: translateX(-100px)rotateY(90deg);
            }
        }
        @-moz-keyframes piece5Rotate {
            0% {
                -webkit-transform: translateX(173.2px)rotateY(0deg);
                -ms-transform: translateX(173.2px)rotateY(0deg);
                -o-transform: translateX(173.2px)rotateY(0deg);
                transform: translateX(173.2px)rotateY(0deg);
            }
            100% {
                -webkit-transform: translateX(-100px)rotateY(90deg);
                -ms-transform: translateX(-100px)rotateY(90deg);
                -o-transform: translateX(-100px)rotateY(90deg);
                transform: translateX(-100px)rotateY(90deg);
            }
        }
        @-webkit-keyframes piece5Rotate {
            0% {
                -webkit-transform: translateX(173.2px)rotateY(0deg);
                -ms-transform: translateX(173.2px)rotateY(0deg);
                -o-transform: translateX(173.2px)rotateY(0deg);
                transform: translateX(173.2px)rotateY(0deg);
            }
            100% {
                -webkit-transform: translateX(-100px)rotateY(90deg);
                -ms-transform: translateX(-100px)rotateY(90deg);
                -o-transform: translateX(-100px)rotateY(90deg);
                transform: translateX(-100px)rotateY(90deg);
            }
        }
        @-o-keyframes piece5Rotate {
            0% {
                -webkit-transform: translateX(173.2px)rotateY(0deg);
                -ms-transform: translateX(173.2px)rotateY(0deg);
                -o-transform: translateX(173.2px)rotateY(0deg);
                transform: translateX(173.2px)rotateY(0deg);
            }
            100% {
                -webkit-transform: translateX(-100px)rotateY(90deg);
                -ms-transform: translateX(-100px)rotateY(90deg);
                -o-transform: translateX(-100px)rotateY(90deg);
                transform: translateX(-100px)rotateY(90deg);
            }
        }

        @keyframes piece6Rotate {
            0% {
                -webkit-transform: translateX(173.2px)rotateY(0deg);
                -ms-transform: translateX(173.2px)rotateY(0deg);
                -o-transform: translateX(173.2px)rotateY(0deg);
                transform: translateX(173.2px)rotateY(0deg);
            }
            100% {
                -webkit-transform: translateY(-100px)rotateX(90deg);
                -ms-transform: translateY(-100px)rotateX(90deg);
                -o-transform: translateY(-100px)rotateX(90deg);
                transform: translateY(-100px)rotateX(90deg);
            }
        }
        @-moz-keyframes piece6Rotate {
            0% {
                -webkit-transform: translateX(173.2px)rotateY(0deg);
                -ms-transform: translateX(173.2px)rotateY(0deg);
                -o-transform: translateX(173.2px)rotateY(0deg);
                transform: translateX(173.2px)rotateY(0deg);
            }
            100% {
                -webkit-transform: translateY(-100px)rotateX(90deg);
                -ms-transform: translateY(-100px)rotateX(90deg);
                -o-transform: translateY(-100px)rotateX(90deg);
                transform: translateY(-100px)rotateX(90deg);
            }
        }
        @-webkit-keyframes piece6Rotate {
            0% {
                -webkit-transform: translateX(173.2px)rotateY(0deg);
                -ms-transform: translateX(173.2px)rotateY(0deg);
                -o-transform: translateX(173.2px)rotateY(0deg);
                transform: translateX(173.2px)rotateY(0deg);
            }
            100% {
                -webkit-transform: translateY(-100px)rotateX(90deg);
                -ms-transform: translateY(-100px)rotateX(90deg);
                -o-transform: translateY(-100px)rotateX(90deg);
                transform: translateY(-100px)rotateX(90deg);
            }
        }
        @-o-keyframes piece6Rotate {
            0% {
                -webkit-transform: translateX(173.2px)rotateY(0deg);
                -ms-transform: translateX(173.2px)rotateY(0deg);
                -o-transform: translateX(173.2px)rotateY(0deg);
                transform: translateX(173.2px)rotateY(0deg);
            }
            100% {
                -webkit-transform: translateY(-100px)rotateX(90deg);
                -ms-transform: translateY(-100px)rotateX(90deg);
                -o-transform: translateY(-100px)rotateX(90deg);
                transform: translateY(-100px)rotateX(90deg);
            }
        }

        @keyframes boxRotate {
            0% {
                -webkit-transform: rotateX(0deg)rotateY(0deg);
                -ms-transform: rotateX(0deg)rotateY(0deg);
                -o-transform: rotateX(0deg)rotateY(0deg);
                transform: rotateX(0deg)rotateY(0deg);
            }
            100% {
                -webkit-transform: rotateX(360deg)rotateY(360deg);
                -ms-transform: rotateX(360deg)rotateY(360deg);
                -o-transform: rotateX(360deg)rotateY(360deg);
                transform: rotateX(360deg)rotateY(360deg);
            }
        }
        @-moz-keyframes boxRotate {
            0% {
                -webkit-transform: rotateX(0deg)rotateY(0deg);
                -ms-transform: rotateX(0deg)rotateY(0deg);
                -o-transform: rotateX(0deg)rotateY(0deg);
                transform: rotateX(0deg)rotateY(0deg);
            }
            100% {
                -webkit-transform: rotateX(360deg)rotateY(360deg);
                -ms-transform: rotateX(360deg)rotateY(360deg);
                -o-transform: rotateX(360deg)rotateY(360deg);
                transform: rotateX(360deg)rotateY(360deg);
            }
        }
        @-webkit-keyframes boxRotate {
            0% {
                -webkit-transform: rotateX(0deg)rotateY(0deg);
                -ms-transform: rotateX(0deg)rotateY(0deg);
                -o-transform: rotateX(0deg)rotateY(0deg);
                transform: rotateX(0deg)rotateY(0deg);
            }
            100% {
                -webkit-transform: rotateX(360deg)rotateY(360deg);
                -ms-transform: rotateX(360deg)rotateY(360deg);
                -o-transform: rotateX(360deg)rotateY(360deg);
                transform: rotateX(360deg)rotateY(360deg);
            }
        }
        @-o-keyframes boxRotate {
            0% {
                -webkit-transform: rotateX(0deg)rotateY(0deg);
                -ms-transform: rotateX(0deg)rotateY(0deg);
                -o-transform: rotateX(0deg)rotateY(0deg);
                transform: rotateX(0deg)rotateY(0deg);
            }
            100% {
                -webkit-transform: rotateX(360deg)rotateY(360deg);
                -ms-transform: rotateX(360deg)rotateY(360deg);
                -o-transform: rotateX(360deg)rotateY(360deg);
                transform: rotateX(360deg)rotateY(360deg);
            }
        }

    </style>
</head>
<body>
<div class="container">
    <div class="piece-box">
        <div class="piece-box2">
            <div class="piece piece-1"></div>
            <div class="piece piece-2"></div>
            <div class="piece piece-3"></div>
            <div class="piece piece-4"></div>
            <div class="piece piece-5"></div>
            <div class="piece piece-6"></div>
        </div>
    </div>
</div>
</body>
</html>

转载于:https://my.oschina.net/strip/blog/738576

chuansheng8940
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
太惊艳了，这些画都是CSS的杰作！
前端达人
07-03 1734
开篇今天给大家分享一些CSS绘画大师的作品，实在是太惊艳了，有的作品真的难以想象是CSS画出来的，希望大家能从这些作品里找到灵感，说不定哪天你也会成为CSS绘画大师！本篇...
css的动画
大神大咖大牛
11-05 220
//帧动画    @-webkit-keyframes 'wobble'{        0%{            margin-left:100px;            background-color:green;        }         40%{            margin-left:200px;            background-
有大神用纯CSS画蒙娜丽莎~
Teresa的专栏
12-19 2404
上面这个张图纯css制作，话说源码里慢慢都是很长像素色块~ 有一帮大神在MDN上传了用css画的超级英雄~源码就不是像素点了，非常有可读性哦~
太惊艳了，这些都是css的杰作
qq_45768871的博客
01-22 393
作者： 晴栀 珍惜拥有的每一天，拥抱生命里的每一个瞬间。莫到日历沙沙划去了岁月，莫到钟摆悠悠摇老了容颜。不要一眨眼，芳华岁月都已成过往之事。才发现，时光匆匆逝去光阴真如箭。 文章目录有趣的css动画使用 border-image 实现渐变边框使用 border-image 实现渐变边框实现代码如下border-radius 失效代码如下缺点background-image + 伪元素使用 background-clip 实现缺点border-image + overflow: hiddenborder-.
css3深入了解之奇技淫巧
weixin_30268921的博客
07-04 154
前言 自CSS3流行以来，虽然以前看过一遍所有的新增属性，但其实在实际项目中用到的少之又少。所以没有形成系统性的认识，以及看到效果立马就能想到解决方案的能力。然后最近正好遇到一个需要绘制大量动画的需求，所以决定趁此机会好好研究一下这个既熟悉又陌生的css3。 在正式开始css3之前，先来介绍一些比较经典的css3实例，让大家好好感受一下css3的魅力： border-radius 相信...
纯CSS3制作3D旋转线条球体动画特效特效代码
03-20
【标题】"纯CSS3制作3D旋转线条球体动画特效特效代码"涉及的主要知识点是CSS3中的3D变换和动画效果。CSS3是层叠样式表的第三版，为网页设计提供了更多丰富的视觉表现力，包括3D转换、动画等特性。 1. **CSS3 3D ...
CSS3制作3D旋转科幻球体动画特效.zip
07-11
在本资源中，"CSS3制作3D旋转科幻球体动画特效.zip" 是一个包含有实现3D旋转科幻球体动画效果的CSS3代码的压缩文件。这个特效为网页设计带来了一种现代化和动态感，使得用户体验更加生动有趣。下面我们将深入探讨CSS...
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
12-13
HTML代码结构很简单，跟之前那篇文章使用的相同： ...我们这里要用纯CSS来实现，需要使用CSS3的动画技术，这里用到的CSS语法是@keyframes。我们的基本实现原理是用keyframes，从rotate(0deg)旋转到ro
纯CSS3制作布丁蛋糕动画特效特效代码
03-20
【纯CSS3制作布丁蛋糕动画特效特效代码】是一个利用CSS3的强大功能来创建互动式图形的示例，尤其适用于网页设计和开发。这个动画特效是通过CSS3的transform属性来实现的，它允许我们对元素进行旋转、缩放、移动和...
基于HTML的css3动画特效制作源码.zip
03-10
【CSS3动画基础】 CSS3是 Cascading Style Sheets（层叠样式表）的第三个主要版本，引入了许多新的特性和功能，其中包括对动画的强大支持。在“基于HTML的css3动画特效制作源码.zip”这个压缩包中，包含了多个示例...
学会CSS3中的这几招，屌丝也能逆袭成为前端大神！
湮顾千古的博客
03-03 1703
CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。如果大家喜欢湮顾千古的文章，可以关注我的专栏HTML5和CSS3的前世今生 CSS3给我们带来的影响 CSS3将完全向...
这十个css动画案例惊艳众人
frontlab的博客
09-20 3099
十套精美的css动画，还有css源码呦，复制粘贴就能使用
30个酷毙的交互式网站(HTML5+CSS3)
各研发管理
10-11 5918
很久前就像找些文章来翻译，and这是第一篇，刚开始翻译着很有兴致，但中间就开始累了，感觉好多好多，因为不仅要翻译，还要看网站，还要排版，花了两天空闲时间还是硬着头皮翻译下来了，虽然翻译质量还是好渣，不少单词还得看词典~~ ----------------------------------------------------------------------------------------...
强大而酷炫的CSS3动画库Animate.css使用方法
热门推荐
尐轩web前端网络日志
12-23 1万+
今天介绍一个强大的CSS3库 Animate.css 库如其名 ，是一个动画库 通过它我们非常轻松地添加动画效果 “Just-add-water CSS animations” 像灌水一样简单 我们只需要添加几个类名 下载地址及动画效果戳这里：Animate.css 使用这个库只需要把animate.css引入我们的文件即可<link rel="stylesheet" href="s
这个俄罗斯大神，又出新作品了！
weixin_34005042的博客
05-28 3236
过去的几年我推荐过好几次这位大神的作品了。先发几张老作品大家回忆一下。有印象吧？这位俄罗斯艺术家Max Asabin @asabinart，他不喜欢一些非常专业高质量的素材，总是喜欢找一些路人甲一样的原始素材去加工，加工完了都变成超级大片了！今天走一波他的最新作品！这种就是非常普通的光线的照片。游客照中的游客照，普通又普通！这个小孩的，cool爆了！口味有点重。最后以一个世界之巅的汪星人结束本次欣...
纯html5+css3能写出什么惊人效果
liuyingv8的博客
12-27 5463
纯html5+css3能写出什么惊人效果? 在搞清楚这个问题之前,我们得先弄清楚H5和css3有哪些惊人的特性 首先我们来看下H5的新特性,canvas标签,多媒体标签(audio/video)  离线存储, 新的表单元素, 新的表单控件 地理定位等等,要说道惊人效果,其中canvas audio video 还有地理定位等就可以够玩一年  但题目中的一个纯字,一下子就将这一群一棒子打死…  因
营销策划 -2024非遗大展预热引流策划方案.pptx
最新发布
07-13
营销策划 -2024非遗大展预热引流策划方案.pptx
全网最热Python3入门+进阶 更快上手实际开发
07-13
网最热Python3入门+进阶 更快上手实际开发 第1章 Python入门导学.mp4 239.6MB 第9章 高级部分：面向对象 第8章 Python函数 第7章 包、模块、函数与变量作用域 第6章 分支、循环、条件与枚举 第5章 变量与运算符 第4章 Python中表示“组”的概念与定义 第3章 理解什么是写代码与Python的基本类型 第2章 Python环境安装 第1章 Python入门导学 第14章 Pythonic与Python杂记 第13章 实战：原生爬虫 第12章 函数式编程： 匿名函数、高阶函数、装饰器
物资合同管理台账.docx
07-13
物资合同管理台账.docx
CSS3 的box-shadow进阶之 - 动画篇 - 制作辐射动画
05-18
CSS3 的box-shadow属性可以用来制作各种各样的阴影效果，包括辐射动画。下面就来介绍一下如何使用box-shadow属性制作辐射动画。 首先，我们需要一个有背景色的元素，并给它设置一个box-shadow属性，如下： ```css ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值