敲好看的CSS渐变色 和 敲好看的animation动画 css3

已于 2022-03-22 11:40:28 修改
阅读量267 收藏 1
点赞数 1
分类专栏： 特效 文章标签： 前端
于 2021-04-02 11:53:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c_qianxia5040/article/details/115395325
版权

效果
在这里插入图片描述

完整代码：

<!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>
        /* 兼容各个浏览器
        .journal {
        -webkit-animation: journal 1 2s ease-in;
        -moz-animation: journal 1 2s ease-in;
        -ms-animation: journal 1 2s ease-in;
        -o-animation: journal 1 2s ease-in;
        animation: journal 1 2s ease-in;
        opacity: 1 !important;
        visibility: visible !important;
        }
        @-webkit-keyframes journal {
        0% {
            -webkit-transform: scale(0) rotate(-360deg);
        }
        80% {
            -webkit-transform: scale(0.5) rotate(-180deg);
        }
        100% {
            -webkit-transform: scale(1) rotate(0);
        }
        }
        @-moz-keyframes journal {
        0% {
            -moz-transform: scale(0) rotate(-360deg);
        }
        80% {
            -moz-transform: scale(0.5) rotate(-180deg);
        }
        100% {
            -moz-transform: scale(1) rotate(0);
        }
        }
        @-ms-keyframes journal {
        0% {
            -ms-transform: scale(0) rotate(-360deg);
        }
        80% {
            -ms-transform: scale(0.5) rotate(-180deg);
        }
        100% {
            -ms-transform: scale(1) rotate(0);
        }
        }
        @-o-keyframes journal {
        0% {
            -o-transform: scale(0) rotate(-360deg);
        }
        80% {
            -o-transform: scale(0.5) rotate(-180deg);
        }
        100% {
            -o-transform: scale(1) rotate(0);
        }
        }
        @-moz-keyframes journal {
        0% {
            transform: scale(0) rotate(-360deg);
        }
        80% {
            transform: scale(0.5) rotate(-180deg);
        }
        100% {
            transform: scale(1) rotate(0);
        }
        }
        @-webkit-keyframes journal {
        0% {
            transform: scale(0) rotate(-360deg);
        }
        80% {
            transform: scale(0.5) rotate(-180deg);
        }
        100% {
            transform: scale(1) rotate(0);
        }
        }
        @-o-keyframes journal {
        0% {
            transform: scale(0) rotate(-360deg);
        }
        80% {
            transform: scale(0.5) rotate(-180deg);
        }
        100% {
            transform: scale(1) rotate(0);
        }
        }
        @keyframes journal {
        0% {
            transform: scale(0) rotate(-360deg);
        }
        80% {
            transform: scale(0.5) rotate(-180deg);
        }
        100% {
            transform: scale(1) rotate(0);
        }
        } */
        /* 动画1 */
        .dance {
            opacity: 1 !important;
            visibility: visible !important;
            animation: dance 1 2s linear;
        }
        @keyframes dance {

            0%,
            10%,
            20% {
                transform: rotateZ(10deg);
            }

            5%,
            15%,
            25% {
                transform: rotateZ(-10deg);
            }

            35%,
            60%,
            100% {
                transform: scale(1) rotateZ(0deg);
                box-shadow: inset 0 0 0 0 transparent;
            }

            40% {
                transform: scale(1.3);
                box-shadow: inset 0 0 0 0;
                box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
            }
        }
        /* 动画2 */
        .journal {
            animation: journal 1 2s ease-in;
            opacity: 1 !important;
            visibility: visible !important;
        }
        @keyframes journal {
            0% {
                transform: scale(0) rotate(-360deg);
            }

            80% {
                transform: scale(0.5) rotate(-180deg);
            }

            100% {
                transform: scale(1) rotate(0);
            }
        }
        /* 动画3 */
        .pulse {
            animation: pulse infinite alternate linear 0.5s;
            opacity: 1 !important;
            visibility: visible !important;
        }
        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            100% {
                transform: scale(1.05);
            }
        }
        /* 动画4 */
        .pulse-slow {
            opacity: 1 !important;
            visibility: visible !important;
            animation: pulseSlow infinite alternate 1s ease-in-out;
        }
        @keyframes pulseSlow {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            100% {
                transform: scale(0.85);
                opacity: 0.5;
            }
        }
        /* 动画5 */
        .jamp {
            opacity: 1 !important;
            visibility: visible !important;
            animation: jamp 1s linear;
        }
        @keyframes jamp {
            0% {
                transform: translateY(0);
            }

            10% {
                transform: translateY(-50px);
            }

            25% {
                transform: translateY(-50px) scale(1.1);
            }

            35% {
                transform: translateY(-50px) scale(1);
            }

            45% {
                transform: translateY(-50px) scale(1.2);
            }

            55% {
                transform: translateY(-50px) scale(1);
            }

            65% {
                transform: translate(150px, -50px) scale(0.8);
            }

            85% {
                transform: translate(150px, -50px) scale(1.2);
            }

            95% {
                transform: translate(0, 0px) scale(1);
            }

            100% {
                transform: translate(0, 0);
            }
        }
        /* 动画6 */
        .four-rock {
            opacity: 1 !important;
            visibility: visible !important;
            animation: fourRock 1 2s ease-out;
        }
        @keyframes fourRock {
            0% {
                transform-origin: 0 0;
            }

            5% {
                transform: scale(0.5);
            }

            10% {
                transform: scale(0.5);
            }

            15% {
                transform: scale(0.5) translateX(130px);
            }

            20% {
                transform: scale(0.5) translateX(130px);
            }

            25% {
                transform: scale(0.5) translate(130px, 130px);
            }

            30% {
                transform: scale(0.5) translate(0px, 130px);
            }

            35% {
                transform: scale(0.5) translate(0px, 0px);
            }

            40% {
                transform: scale(1);
            }

            100% {
                transform: scale(1);
                -webkit-transform-origin: 0 0;
            }
        }
        /***** 动画7 ******/
        .enter-up-bounce {
            animation: enterUpBounce 0.5s ease-in forwards;
        }
        @keyframes enterUpBounce {
            0% {
                transform: translateY(-80px);
                opacity: 0;
                visibility: hidden;
            }

            50% {
                transform: translateY(0px);
            }

            70% {
                transform: translateY(-15px);
            }

            100% {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }
        }
        /* 动画8 */
        .enter-double-up-bounce {
            -webkit-animation: enterDoubleUpBounce 1s ease-in forwards;
            -moz-animation: enterDoubleUpBounce 1s ease-in forwards;
            -ms-animation: enterDoubleUpBounce 1s ease-in forwards;
            -o-animation: enterDoubleUpBounce 1s ease-in forwards;
            animation: enterDoubleUpBounce 1s ease-in forwards;
        }
        @keyframes enterDoubleUpBounce {
            0% {
                transform: translateY(-80px);
                opacity: 0;
                visibility: hidden;
            }

            30% {
                transform: translateY(0);
            }

            40% {
                transform: translateY(-15px);
            }

            50% {
                transform: translateY(0);
            }

            60% {
                transform: translateY(-5px);
            }

            70%,
            100% {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }
        }      
        /* 动画9 */
        .enter-right-bounce {
            animation: enterRightBounce 0.6s ease-in forwards;
        }
        @keyframes enterRightBounce {
            0% {
                transform: translateX(80px);
                opacity: 0;
                visibility: hidden;
            }

            50% {
                transform: translateX(0px);
            }

            70% {
                transform: translateX(10px);
            }

            100% {
                transform: translateX(0);
                opacity: 1;
                visibility: visible;
            }
        }
        /* 动画10 */
        .enter-left-bounce {
            animation: enterLeftBounce 0.6s ease-in forwards;
        }
        @keyframes enterLeftBounce {
            0% {
                transform: translateX(-80px);
                opacity: 0;
                visibility: hidden;
            }

            50% {
                transform: translateX(0px);
            }

            70% {
                transform: translateX(-10px);
            }

            100% {
                transform: translateX(0);
                opacity: 1;
                visibility: visible;
            }
        }
        /* 动画11 */
        .scale-bounce {
            opacity: 1 !important;
            visibility: visible !important;
            animation: scaleBounce 0.6s ease-in-out;
        }
        @keyframes scaleBounce {
            0% {
                transform: scale(1.5);
                opacity: 0;
            }

            50% {
                transform: scale(1);
            }

            70% {
                transform: scale(1.1);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        /* 动画12 */
        .enter-down-bounce {
            animation: enterDownBounce 0.6s ease-in forwards;
        }
        @keyframes enterDownBounce {
            0% {
                transform: translateY(80px);
                opacity: 0;
                visibility: hidden;
            }

            50% {
                transform: translateY(0px);
            }

            70% {
                transform: translateY(10px);
            }

            100% {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }
        }
        /* 动画13 */
        .jump-bounce {
            opacity: 1 !important;
            visibility: visible !important;
            animation: jumpBounce 1 1.5s ease-out;
        }
        @keyframes jumpBounce {
            10% {
                transform: translateY(-100px);
            }

            20%,
            35%,
            50% {
                transform: translateY(0px);
            }

            25% {
                transform: translateY(-40px);
            }

            40% {
                transform: translateY(-10px);
            }
        }
        /***** 动画14 ******/
        .tree-flip {
            opacity: 1 !important;
            visibility: visible !important;
            animation: treeFlip 1 1s ease-in-out;
            transform: rotateY(-90deg);
            transform-origin: 0 0;
        }
        @keyframes treeFlip {
            0% {
                transform: rotateY(0);
            }

            100% {
                transform: rotateY(-90deg);
            }
        }
        /* 动画15 */
        .tree-flip-right {
            opacity: 1 !important;
            visibility: visible !important;
            animation: treeFlipRight 1 1s ease-in-out;
            transform: rotateY(90deg);
            transform-origin: 100% 0;
        }
        @keyframes treeFlipRight {
            0% {
                transform: rotateY(0);
            }

            100% {
                transform: rotateY(90deg);
            }
        }
        /* 动画16 */
        .tree-flip-up {
            opacity: 1 !important;
            visibility: visible !important;
            animation: treeFlipUp 1 1s ease-in-out;
            transform: rotateX(90deg);
            transform-origin: 100% 0;
        }
        @keyframes treeFlipUp {
            0% {
                transform: rotateX(0);
            }

            100% {
                transform: rotateX(90deg);
            }
        }
        /* 动画17 */
        .tree-flip-down {
            opacity: 1 !important;
            visibility: visible !important;
            animation: treeFlipDown 1 1s ease-in-out;
            transform: rotateX(90deg);
            transform-origin: 0 100%;
        }
        @keyframes treeFlipDown {
            0% {
                transform: rotateX(0);
            }

            100% {
                transform: rotateX(-90deg);
            }
        }
        /* 动画18 */
        .flip-left-bounce {
            opacity: 1 !important;
            visibility: visible !important;
            animation: flipLeftBounce 1s ease-in-out;
        }
        @keyframes flipLeftBounce {
            0% {
                opacity: 0;
                transform: rotateY(70deg);
            }

            50% {
                opacity: 1;
                transform: rotateY(-5deg);
            }

            80% {
                transform: rotateY(20deg);
            }

            100% {
                transform: rotateY(0deg);
            }
        }
        /* 动画19 */
        .flip-right-bounce {
            animation: flipRightBounce 1s ease-in-out;
            opacity: 1 !important;
            visibility: visible !important;
        }
        @keyframes flipRightBounce {
            0% {
                opacity: 0;
                transform: rotateY(-70deg);
            }

            50% {
                opacity: 1;
                transform: rotateY(5deg);
            }

            80% {
                transform: rotateY(-20deg);
            }

            100% {
                transform: rotateY(0deg);
            }
        }
        /* 动画20 */
        .rotate-flip {
            animation: rotateFlip 1 1s linear;
            opacity: 1 !important;
            visibility: visible !important;
        }
        @keyframes rotateFlip {
            0% {
                transform-origin: 50%;
            }

            40% {
                transform: rotateY(70deg);
                opacity: 0;
            }

            60% {
                transform: rotateY(70deg);
                opacity: 0;
            }

            100% {
                transform: rotateY(0deg);
                opacity: 1;
            }
        }
        /* 动画21 */
        /***** Fadding Entrances ******/
        .flip-left {
            animation: flipLeft 1 1s ease-out;
            opacity: 1 !important;
            visibility: visible !important;
        }
        @keyframes flipLeft {
            0% {
                transform: translateX(-100px);
                opacity: 0;
            }

            70% {
                transform: translateX(0);
                opacity: 1;
            }
        }
        /* 动画22 */
        .flip-right {
            animation: flipRight 1 1s ease-out;
            opacity: 1 !important;
            visibility: visible !important;
        }
        @keyframes flipRight {
            0% {
                transform: translateX(100px);
                opacity: 0;
            }

            70% {
                transform: translateX(0);
                opacity: 1;
            }
        }
        /* 动画23 */
        .flip-top {
            animation: flipTop 1 1s ease-out;
            opacity: 1 !important;
            visibility: visible !important;
        }
        @keyframes flipTop {
            0% {
                transform: translateY(-100px);
                opacity: 0;
            }

            70% {
                transform: translateY(0);
                opacity: 1;
            }
        }
        /* 动画24 */
        .flip-bottom {
            animation: flipBottom 1 1s ease-out;
            opacity: 1 !important;
            visibility: visible !important;
        }
        @keyframes flipBottom {
            0% {
                transform: translateY(100px);
                opacity: 0;
            }

            70% {
                transform: translateY(30px);
                opacity: 1;
            }

            100% {
                transform: translateY(0);
            }
        }
        /* 动画25 */
        /***** Rotate ******/
        .rotate-flip-down {
            opacity: 1 !important;
            visibility: visible !important;
            animation: rotateFlipDown 1 1s linear;
        }
        @keyframes rotateFlipDown {
            0% {
                transform-origin: 50%;
            }

            40% {
                transform: rotateX(70deg);
                opacity: 0;
            }

            60% {
                transform: rotateX(70deg);
                opacity: 0;
            }

            100% {
                transform: rotateX(0deg);
                opacity: 1;
            }
        }
        /* 动画26 */
        .rotate-down-bounce {
            transform-origin: 0 0;
            opacity: 0;
            visibility: hidden;
            animation: rotateDowBounce 1 2s ease-in;
        }
        @keyframes rotateDowBounce {
            0% {
                transform: rotate(0deg);
                opacity: 1;
                visibility: visible;
            }

            20% {
                transform: rotate(25deg);
            }

            40% {
                transform: rotate(30deg);
            }

            10%,
            30%,
            50% {
                transform: rotate(40deg);
                opacity: 1;
                visibility: visible;
            }

            80%,
            100% {
                transform: rotate(30deg) translateY(310px) translateX(230px);
                opacity: 0;
                visibility: hidden;
            }
        }
        /* 动画27 */
        .rotate-out {
            opacity: 0;
            visibility: hidden;
            animation: rotateOut 1 1.5s ease-out;
        }
        @keyframes rotateOut {
            0% {
                opacity: 1;
                visibility: visible;
            }

            50%,
            100% {
                transform: scale(0) rotateY(189deg);
            }
        }
        /* 动画28 */
        .flash-bang {
            animation: flashBang 1 2s linear forwards;
        }
        @keyframes flashBang {

            0%,
            20% {
                opacity: 0;
                visibility: hidden;
            }

            10%,
            30%,
            100% {
                opacity: 1;
                visibility: visible;
            }
        }
        /* 动画29 */
        .bomba {
            animation: bomba 1 1s ease-out forwards;
        }
        @keyframes bomba {
            0% {
                transform-origin: -50% 0%;
                transform: rotateZ(0);
                opacity: 1;
                visibility: visible;
            }

            50%,
            100% {
                transform: rotateZ(-210deg);
                transform-origin: -20% 0%;
            }

            47%,
            100% {
                opacity: 0;
                visibility: hidden;
            }
        }
        /* 动画30 */
        .legend-down{
            background: rgba(0, 0, 0, 0.5);
            animation: legendDown 1 0.5s ease-out;
        }
        @keyframes legendDown {
            0% {
                top: 0;
                height: 0;
            }

            100% {
                height: 64%;
                top: 9px;
            }
        }
        /* 动画31 */
        .legend-up {
            background: rgba(0, 0, 0, 0.5);
            animation: legendUp 1 0.5s ease-out;
        }
        @keyframes legendUp {
            0% {
                top: 70%;
                height: 0;
            }

            100% {
                height: 64%;
                top: 9px;
            }
        }
        /* 动画32 */
        .legend-left{
            background: rgba(0, 0, 0, 0.5);
            animation: legendLeft 1 0.5s ease-out;
        }
        @keyframes legendLeft {
            0% {
                left: 0%;
                width: 0;
            }

            100% {
                left: 9px;
                width: 92%;
            }
        }
        /* 动画33 */
        .legend-right {
            background: rgba(0, 0, 0, 0.5);
            animation: legendRight 1 0.5s ease-out;
        }
        @keyframes legendRight {
            0% {
                left: 100%;
                width: 0;
            }

            100% {
                left: 9px;
                width: 92%;
            }
        }

        /* 动画34 */
        .legend-flip {
            animation: legendFlip 1.2s ease-out;
            transform: rotateY(-180deg);
        }
        @keyframes legendFlip {
            0% {
                transform: rotateY(0);
            }

            60% {
                transform: rotateY(-210deg);
            }

            100% {
                transform: rotateY(-150deg);
            }

            100% {
                transform: rotateY(-180deg);
            }
        }
        /* 动画35*/
        .legend-flip-before {
            animation: legendFlipBefore 1.2s ease-out;
        }
        @keyframes legendFlipBefore {
            0% {
                transform: rotateY(-180deg);
            }

            60% {
                transform: rotateY(30deg);
            }

            80% {
                transform: rotateY(-30deg);
            }

            100% {
                transform: rotateY(0);
            }
        }
        /* 动画36*/
        .portrait-before {
            box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.5);
            animation: portraitBefore 1 0.3s ease-out;
        }
        @keyframes portraitBefore {
            0% {
                box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5);
                width: 100%;
                height: 74%;
                top: 0;
                left: 0;
            }

            100% {
                box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.5);
                width: 92%;
                height: 64%;
                top: 9px;
                left: 9px;
            }
        }
        /* 动画37*/
        .portrait-blur {
            box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.5);
            animation: portraitBlur 1 0.6s ease-out;
        }
        @keyframes portraitBlur {
            0% {
                box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5);
                width: 100%;
                height: 74%;
                top: 0;
                left: 0;
            }

            100% {
                box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.5);
                width: 92%;
                height: 64%;
                top: 9px;
                left: 9px;
            }
        }
        /* 动画38*/
        .scale-before {
            background: rgba(0, 0, 0, 0.5);
            animation: scaleBefore 1 0.5s ease-out;
        }
        @keyframes scaleBefore {
            0% {
                -webkit-transform: scale(1.5);
            }

            100% {
                -webkit-transform: scale(1);
            }
        }
        /* 动画39*/
        .rotate-row {
            opacity: 1 !important;
            animation: rotateRow infinite alternate 3s linear;
        }
        @keyframes rotateRow {

            0%,
            10% {
                transform: translateY(0);
            }

            5% {
                transform: translateY(-20px);
            }

            100% {
                transform: rotate(20000deg) translateY(0px);
            }
        }

        .box {
			display: flex;
			flex-wrap: wrap;
            width: 100vw;
        }
        #style1con {
            position: absolute;
            top: 200px;
            left: 40%;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border-radius: 10px;
            margin-right: 20px;
            background-image: linear-gradient(to right, #ebc0fd 0%, #d9ded8 100%);
        }
        hr{

        }
        .box button{
            width: 150px;
            height: 50px;
            line-height: 50px;
            border-radius: 100px;
            text-align: center;
            color: rgba(255,255,255,.7);
            box-shadow: 1px 2px 2px #666;
            margin: 10px;
            border: none;
            outline: none;
        }
        .box button:hover {
            opacity: .7;
        }
        /* 好看的渐变色 start*/
        .box button:nth-child(1){
            background: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
        }
        .box button:nth-child(2) {
            background: linear-gradient(to right, #ff9569 0%, #e92758 100%);
        }
        .box button:nth-child(3){
            background: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%);
        }
        .box button:nth-child(4) {
            background: linear-gradient(to right, #f6d365 0%, #fda085 100%);
        }
        .box button:nth-child(5) {
            background-image: linear-gradient(to right, #30cfd0 0%, #330867 100%);
        }
        .box button:nth-child(6) {
            background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
        }
        .box button:nth-child(7) {
            background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%);
        }
        .box button:nth-child(8) {
            background-image: linear-gradient(to right, #fddb92 0%, #d1fdff 100%);
        }
        .box button:nth-child(9) {
            background-image: linear-gradient(to right, #ebc0fd 0%, #d9ded8 100%);
        }
        .box button:nth-child(10) {
            background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
        }
        .box button:nth-child(11) {
            background-image: linear-gradient(to right, #ebbba7 0%, #cfc7f8 100%);
        }
        .box button:nth-child(12) {
            background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; background-blend-mode: multiply,multiply;
        }
        .box button:nth-child(13) {
            background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
        }
        .box button:nth-child(14) {
            background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
        }
        .box button:nth-child(15) {
            background-image: linear-gradient(to right, #a8caba 0%, #5d4157 100%);
        }
        .box button:nth-child(16) {
            background-image: linear-gradient(to right, #16a085 0%, #f4d03f 100%);
        }
        .box button:nth-child(17) {
            background-image: linear-gradient(to right, #3b41c5 0%, #a981bb 49%, #ffc8a9 100%);
        }
        .box button:nth-child(18) {
            background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%);
        }
        .box button:nth-child(19) {
            background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);
        }
        .box button:nth-child(20) {
            background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
        }
        .box button:nth-child(21) {
            background-image: linear-gradient(to top, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%);
        }
        .box button:nth-child(22) {
            background-image: linear-gradient(to right, #2D2A3D 0%, #252233 100%);
        }
        .box button:nth-child(23) {
            background-image: linear-gradient(to right, #553445 0%, #173058 100%);
        }
        .box button:nth-child(24) {
            background-image: linear-gradient(to right, #75838C 0%, #CEC8BA 100%);
        }
        .box button:nth-child(25) {
            background-image: linear-gradient(to right, #6E9DC9 0%, #B4C5D7 100%);
        }
        .box button:nth-child(26) {
            background-image: linear-gradient(to right, #E8D694 0%, #3D2B3B 100%);
        }
        .box button:nth-child(27) {
            background-image: linear-gradient(to right, #C6D8CC 0%, #6E7F8F 100%);
        }
        .box button:nth-child(28) {
            background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
        }
        .box button:nth-child(29) {
            background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
        }
        .box button:nth-child(30) {
            background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);
        }
        .box button:nth-child(31) {
            background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
        }
        .box button:nth-child(32) {
            background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
        }
        .box button:nth-child(33) {
            background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
        }
        .box button:nth-child(34) {
            background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
        }
        .box button:nth-child(35) {
            background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
        }
        .box button:nth-child(36) {
            background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
        }
        .box button:nth-child(37) {
            background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
        }
        .box button:nth-child(38) {
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }
        .box button:nth-child(38) {
            background-image: linear-gradient(to top, #dbdcd7 0%, #dddcd7 24%, #e2c9cc 30%, #e7627d 46%, #b8235a 59%, #801357 71%, #3d1635 84%, #1c1a27 100%);
        }
        /* 好看的渐变色end */
        /* 更多好看的渐变色见网址http://color.oulu.me/deta2.html */
    </style>
</head>

<body>
    <div class="box">
        <button id="style1btn">摇晃再放大1</button>
        <button id="style2btn">旋转并放大2</button>
        <button id="style3btn">呼吸3</button>
        <button id="style4btn">大呼吸4</button>
        <button id="style5btn">上右中间5</button>
        <button id="style6btn">顺时针轨道转6</button>
        <hr/>
        <button id="style7btn">上-下7</button>
        <button id="style8btn">上-下8</button>
        <button id="style9btn">右-左9</button>
        <button id="style10btn">左-右10</button>
        <button id="style11btn">打-小11</button>
        <button id="style12btn">下-上12</button>
        <button id="style13btn">上下跳13</button>
		<hr/>
        <button id="style14btn">右开门14</button>
        <button id="style15btn">左开门15</button>
        <button id="style16btn">下开门16</button>
        <button id="style17btn">上开门17</button>
        <button id="style18btn">转动门18</button>
        <button id="style19btn">转动门19</button>
        <button id="style20btn">大转动门20</button>
		<hr/>
		
        <button id="style21btn">左-右21</button>
        <button id="style22btn">右-左22</button>
        <button id="style23btn">上-下23</button>
        <button id="style24btn">下-上24</button>
        <button id="style25btn">上下转动25</button>
        <hr/>
        <button id="style26btn">倾斜-掉落-消失26</button>
        <button id="style27btn">放大-变小-消失27</button>
        <button id="style28btn">闪现28</button>
        <button id="style29btn">抛物线消失29</button>
        <hr/>
        <button id="style30btn">弹性拉长上-下30</button>
        <button id="style31btn">弹性拉长下-上31</button>
        <button id="style32btn">弹性拉长左右32</button>
        <button id="style33btn">弹性拉长右左33</button>
		<hr/>
        <button id="style34btn">Y轴转动34</button>
        <button id="style35btn">Y轴转动35</button>
        <button id="style36btn">内阴影缩放36</button>
        <button id="style37btn">内阴影缩放37</button>
        <button id="style38btn">大-小38</button>
        <button id="style39btn">抖起转圈圈39</button>
        <hr/>
    </div>
    <div id="style1con"></div>
    <script>
        document.getElementById('style1btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'dance')
        })
        document.getElementById('style2btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'journal')
        })
        document.getElementById('style3btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'pulse')
        })
        document.getElementById('style4btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'pulse-slow')
        })
        document.getElementById('style5btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'jamp')
        })
        document.getElementById('style6btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'four-rock')
        })
        document.getElementById('style7btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'enter-up-bounce')
        })
        document.getElementById('style8btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'enter-double-up-bounce')
        })
        document.getElementById('style9btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'enter-right-bounce')
        })
        document.getElementById('style10btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'enter-left-bounce')
        })
        document.getElementById('style11btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'scale-bounce')
        })
        document.getElementById('style12btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'enter-down-bounce')
        })
        document.getElementById('style13btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'jump-bounce')
        })
        document.getElementById('style14btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'tree-flip')
        })
        document.getElementById('style15btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'tree-flip-right')
        })
        document.getElementById('style16btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'tree-flip-up')
        })
        document.getElementById('style17btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'tree-flip-down')
        })
        document.getElementById('style18btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'flip-left-bounce')
        })
        document.getElementById('style19btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'flip-right-bounce')
        })
        document.getElementById('style20btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'rotate-flip')
        })
        document.getElementById('style21btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'flip-left')
        })
        document.getElementById('style22btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'flip-right')
        })
        document.getElementById('style23btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'flip-top')
        })
        document.getElementById('style24btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'flip-bottom')
        })
        document.getElementById('style25btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'rotate-flip-down')
        })
        document.getElementById('style26btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'rotate-down-bounce')
        })
        document.getElementById('style27btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'rotate-out')
        })
        document.getElementById('style28btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'flash-bang')
        })
        document.getElementById('style29btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'bomba')
        })
        document.getElementById('style30btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'legend-down')
        })
        document.getElementById('style31btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'legend-up')
        })
        document.getElementById('style32btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'legend-left')
        })
        document.getElementById('style33btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'legend-right')
        })
        document.getElementById('style34btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'legend-flip')
        })
        document.getElementById('style35btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'legend-flip-before')
        })
        document.getElementById('style36btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'portrait-before')
        })
        document.getElementById('style37btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'portrait-blur')
        })
        document.getElementById('style38btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'scale-before')
        })
        document.getElementById('style39btn').addEventListener('click', () => {
            document.getElementById('style1con').setAttribute('class', 'rotate-row')
        })
    </script>
</body>
</html>
爱吃烧鸭蛋的叶安
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
漂亮的CSS3颜色渐变选择器
06-12
现在html5  css3已经越来越流行，用CSS3实现DIV渐变已经不是什么难事了，但现在还需要先在PS中画出效果后再取色，写入CSS3比较麻烦。 今天给大家介绍一款插件，可以自由拖动DIV的渐变颜色，并直接复制代码即可，方便快捷。(注：后台是PHP代码，因此需要服务器支持)
CSS3有趣的渐变色
热门推荐
一入前端深似海
07-28 2万+
程序设计之道无远弗届，御晨风而返。———— 杰佛瑞 · 詹姆士 这里给大家分享几个有趣的渐变色，用来丰富页面。 一、背景色渐变 经常用的就是给背景色增加渐变效果，这里的语法顺序不要错（牵扯到优雅降级和渐进增强，标准语法写到最后也是为了兼容各个版本浏览器，让浏览器先执行兼容在执行标准。），(right, red , blue) 这句话决定渐变方向是从右向左变色（效果如下）。( to r...
css3渐变(Gradients)
weixin_34302561的博客
08-30 144
&lt;html&gt; http://www.runoob.com/css3/css3-gradients.html CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（...
css3漂亮的渐变图案,CSS3 带渐变图案的圆球
weixin_35757736的博客
08-03 281
CSS语言：CSSSCSS确定body {height: 100vh;widt: 100vw;margin: 0;background: cadetblue;}.wrapper {position: absolute;top: 50%;left: 50%;height: 600px;width: 600px;margin: -300px;border-radius: 50%;background:...
使用css3制作好看的动画效果
qq_44771388的博客
12-30 689
今天给大家做两个好看的css3好看的特效 字体浮雕 效果如下 我们来建一个div然后添加一段文字 <div> 这不是摇摆杨嘛？ </div> 然后我们准备一些常用的css样式 *{ margin: 0; padding: 0; } :root,body{ width: 100%; height: 100%;
css3的网页特效之网页渐变色
11-26
css3的网页特效之网页渐变色
纯css3 gradient属性制作6种渐变色的按钮样式
11-05
纯css3 gradient属性制作6种渐变色的按钮样式
css3中的渐变色效果
灰白色
01-18 3267
渐变的含义：两种或多种颜色之间平滑过渡的效果 渐变的属性和取值 属性background-image 取值：linear-gradient()，我们先给盒子设置渐变色 他是一种线性渐变，我们可以看出他从一种颜色变化到 另一种 颜色 接下来我们设置文字的渐变色 这样他的文字渐变效果就显示出来了。 ...
css:好看的渐变色_CSS渐变：语法速成课程
culh2177的博客
08-09 538
css:好看的渐变色In the past most websites used images heavily to create a fancy UI. Thanks to various CSS properties this trend has changed. This tutorial will help you to learn about CSS gradients.You can ...
超漂亮的 Animation Scale 动画设置效果.zip
09-24
超漂亮的 Animation Scale 动画设置效果。.zip,快速设置平铺以快速设置动画持续时间比例。
html 颜色渐变动画效果,颜色渐变动画效果(原创)
weixin_39950081的博客
06-03 427
body{margin: 0;padding: 0;}/*colorswitch(animation-name):选择器的 keyframe 名称;20s(animation-duration):颜色变换的周期时间;(animation-timing-function):动画的速度曲线;(animation-delay):动画开始之前的延迟;infinite(animation-iteration...
CSS Animation动画实现漂亮的飘雪效果，超简单！
immocha的博客
12-26 1729
雪花图漂亮，效果就漂亮，剩下就是CSS的工作了。 body { position: relative; background-color: #2f346f; background-image: url(images/snow1_1.png), url(images/snow1_2.png), url(images/snow1_3.png); ...
巧用CSS3渐变色实现动画/手记
我就是Kit
03-16 476
嗯 我做了一个wordpress小程序 github开源地址https://github.com/webzol/cxcat 优先扫码体验 或者微信搜索小程序 猫小镇 最近有的网站在用渐变动画特效，吃饭完试了一波其实还是很简单的，下面我就直接分享代码。 这是我做的网站效果 演示查看 .page-login-v3{ position: relative; overflow: hidden; } .p...
CSS3-渐变，过渡，3d动画
weixin_47775987的博客
02-15 250
css渐变色 线性渐变 /* 渐变麻烦写法 */ .box1{ background: -webkit-gradient(linear,left center ,right center,from(red),to(yellow),color-stop(0.4,blue),color-stop(0.6,green)); } 值：线性渐变，开始位置，结束位置，开始颜色，结束颜色，插入颜色（位置，颜色）···【先x轴后y轴】...
css3做出来的酷炫效果,css3使用animation属性实现炫酷效果
weixin_36272622的博客
08-04 249
animation-name 动画名称，可以有多个值，用逗号隔开，表示绑定了多个动画animation-name属性为动画指定一个名称animation-name兼容主流的浏览器，不过还是需要加前缀去兼容animation-name有两个属性值，分别是keyframename和noneDocumentbody{margin:0 auto;background:#abcdef;}div{width:...
用css函数和animation制炫酷的特效
qq_46063425的博客
08-07 209
用css函数和animation制炫酷的特效 刚在B站上看到一个特别炫酷的特效，仅仅由css和html代码编写成的，来看看这个好看的特效吧 看到这个炫酷的特效是不是有小伙伴认为代码一定很难，其实这个代码就是我们平常写过的一些css效果代码，就让我们一起来看看代码 html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </
css3中animation动画、浏览器私有前缀、文字阴影、滤镜、文本渐变色
专研前端，探索后端
04-21 425
css3中animation动画、浏览器私有前缀、文字阴影、滤镜
CSS3 @keyframes 实现渐变动画
weixin_41813243的博客
03-13 966
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>classL...
【常见CSS扫盲之渐变效果】好看的24种CSS渐变效果汇总（附源码）
赏樱看雪撸代码
04-17 2万+
多种CSS渐变实例，CSS横向渐变，CSS径向渐变，CSS实现渐变，好看的渐变背景色，多种好看渐变效果图，好看样式demo，页面配色大全
css3渐变背景颜色动画
最新发布
07-14
CSS3渐变背景颜色动画是通过使用CSS3的transition和animation属性来实现的。首先，我们可以使用linear-gradient函数定义一个渐变背景颜色： div { background: linear-gradient(to right, red, blue); } 这将创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值