CSS3特效

時間 2019-12-01

標籤 css3 css 特效欄目 CSS 简体版

原文原文鏈接

transition：javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動畫過渡效果屬性 transition</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            margin: 50px auto;
            background-color: red;
            transition: all 1s;
        }

        .box:hover {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: aliceblue;
            /*transition-property: width, height, border-radius;*/
            /*transition-duration: 1s;*/
            /*transition-timing-function: ease-in;*/
            /*transition-delay: 500ms;*/
            transition: all 1s ease-in 500ms;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

animation：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動畫效果屬性 animation</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            margin: 50px auto;
            background-color: red;
        }

        .box:hover {
            /*animation-name: hover;*/
            /*animation-duration: 1s;*/
            /*animation-timing-function: ease-in;*/
            /*animation-iteration-count: infinite;*/
            animation: hover 1s ease-in infinite;
        }

        @keyframes hover {
            0% {
                width: 100px;
                height: 100px;
                border-radius: 50%;
            }
            50% {
                width: 200px;
                height: 200px;
                border-radius: 50%;
            }
            100% {
                width: 100px;
                height: 100px;
                border-radius: 50%;
            }
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

transform：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 變形</title>
    <style type="text/css">
        .transform {
            width: 1000px;
            background-color: #fdfdfd;
            margin: 50px auto;
        }

        .transform:after {
            clear: both;
            content: " ";
            display: block;
            overflow: hidden;
        }

        .transform > p {
            width: 230px;
            float: left;
            border: 1px #999 solid;
            margin-right: 10px;
            text-align: center;
            padding-bottom: 10px;
        }

        .transform > p strong {
            display: block;
            background-color: #eee;
            line-height: 28px;
            font-size: 20px;
            font-family: "Microsoft YaHei UI";
            color: #333;
            margin-bottom: 10px;
        }

        .transform > p span {
            display: block;
            width: 100px;
            height: 100px;
            margin: 0 auto;
            border: 1px #ccc solid;
            background-color: #0099ff;
        }

        .transform.origin > p span {
            background-color: #0c0;
            transform-origin: 0 -100px;
        }

        .transform > p .rotate {
            transform: rotate(20deg);
        }

        .transform > p .translate {
            transform: translate(20px, 20px);
        }

        .transform > p .scale {
            transform: scale(.5);
        }

        .transform > p .skew {
            transform: skew(20deg, -30deg);
        }
    </style>
</head>
<body>

<div class="transform">
    <p>
        <strong>旋轉(rotate)</strong>
        <span class="rotate"></span>
    </p>
    <p>
        <strong>移動(translate)</strong>
        <span class="translate"></span>
    </p>
    <p>
        <strong>縮放(scale)</strong>
        <span class="scale"></span>
    </p>
    <p>
        <strong>扭曲(skew)</strong>
        <span class="skew"></span>
    </p>
</div>

<div class="transform origin">
    <p>
        <strong>旋轉(rotate)</strong>
        <span class="rotate"></span>
    </p>
    <p>
        <strong>移動(translate)</strong>
        <span class="translate"></span>
    </p>
    <p>
        <strong>縮放(scale)</strong>
        <span class="scale"></span>
    </p>
    <p>
        <strong>扭曲(skew)</strong>
        <span class="skew"></span>
    </p>
</div>

</body>
</html>

shadow：java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 陰影</title>
    <style type="text/css">
        .box_shadow {
            width: 1000px;
            margin: 50px auto;
            text-align: center;
        }

        .box_shadow:after {
            clear: both;
            content: " ";
            display: block;
            overflow: hidden;
        }

        .box_shadow p {
            width: 100px;
            height: 100px;
            float: left;
            border: 1px #999 solid;
            line-height: 100px;
            background-color: #f9f9f9;
            margin-right: 100px;
            font-size: 20px;
        }

        .box_shadow p:first-child {
            box-shadow: 5px 5px 3px 2px rgba(0, 0, 0, .3);
        }

        .box_shadow p:last-child {
            box-shadow: inset 5px 5px 3px 2px rgba(0, 0, 0, .3);
        }
    </style>
</head>
<body>
<div class="box_shadow">
    <p>外陰影</p>
    <p>內陰影</p>
</div>
</body>
</html>

gardient： jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 漸變背景色</title>
    <style type="text/css">
        .line-gradient {
            width: 1000px;
            margin: 50px auto;
            text-align: center;
        }

        .line-gradient p {
            width: 100px;
            height: 100px;
            float: left;
            border: 1px #999 solid;
            line-height: 100px;
            margin-right: 100px;
            font-size: 20px;
        }

        .line-gradient p:first-child {
            background: -webkit-linear-gradient(top, #09f, #fff, #0c0);
            /*要加-webkit- 不然沒法解析top 不加可用180deg代替*/
            /*background: -webkit-linear-gradient(top, #09f, #fff 20px, #0c0);*/
            /*可決定位置*/
        }

        .line-gradient p:last-child {
            background: linear-gradient(20deg, #09f, #fff, #0c0);
        }
    </style>
</head>
<body>
<div class="line-gradient">
    <p>普通漸變</p>
    <p>角度漸變</p>
</div>
</body>
</html>

彈球效果：web

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>彈球動畫效果</title>
    <style type="text/css">
        .box {
            width: 400px;
            height: 300px;
            border: 1px #ccc solid;
            margin: 30px auto;
            position: relative;
        }

        .box .ball {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -70px;
            background: linear-gradient(180deg, #fff, #999);
            box-shadow: inset 0 0 30px #999, inset 0 -15px 70px #999;
            animation: jump 1s ease-in-out infinite;
            z-index: 1;
        }

        .box .ball:after {
            content: " ";
            display: block;
            width: 70px;
            height: 30px;
            border-radius: 50%;
            position: absolute;
            top: 10px;
            left: 50%;
            margin-left: -35px;
            background: linear-gradient(#fff, #ccc);
        }

        .shadow {
            width: 80px;
            height: 60px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -40px;
            background: rgba(20, 20, 20, .1);
            box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);
            transform: scaleY(.3);
            animation: shrink 1s infinite;
        }

        @keyframes jump {
            0% {
                top: 0;
                animation-timing-function: ease-in;
            }
            65% {
                top: 160px;
                height: 140px;
            }
            75% {
                height: 120px;
            }
            100% {
                top: 0;
                height: 140px;
            }
        }

        @keyframes shrink {
            0% {
                width: 90px;
                height: 60px;
                animation-timing-function: ease-in;
            }
            65% {
                width: 10px;
                height: 5px;
                margin-left: -5px;
                background: rgba(20, 20, 20, .3);
                box-shadow: 0 0 25px 20px rgba(20, 20, 20, .3);
            }
            100% {
                width: 90px;
                height: 60px;
                background: rgba(20, 20, 20, .1);
                box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="ball"></div>
    <div class="shadow"></div>
</div>
</body>
</html>

loading特效：ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>loading特效</title>
    <style type="text/css">
        .box {
            width: 100%;
            padding: 3%;
            box-sizing: border-box;
            overflow: hidden;
        }

        .box .loader {
            width: 30%;
            float: left;
            height: 200px;
            margin-right: 3%;
            border: 1px #ccc solid;
            box-sizing: border-box;

            display: flex;
            align-items: center;
            justify-content: center;
        }

        .loader-1 {
            width: 35px;
            height: 35px;
            position: relative;
        }

        .loader-1 i {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(transparent 0%, transparent 70%, #333 30%, #333 100%);
            animation: loading-1 0.6s linear infinite;
        }

        @keyframes loading-1 {
            0% {
                transform: rotate(0);
            }
            50% {
                transform: rotate(180deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .loader-2 i {
            display: inline-block;
            width: 4px;
            height: 35px;
            border-radius: 2px;
            margin: 0 2px;
            background-color: #333;
        }

        .loader-2 i:nth-child(1) {
            animation: loading-2 1s ease-in 0.1s infinite;
        }

        .loader-2 i:nth-child(2) {
            animation: loading-2 1s ease-in 0.2s infinite;
        }

        .loader-2 i:nth-child(3) {
            animation: loading-2 1s ease-in 0.3s infinite;
        }

        .loader-2 i:nth-child(4) {
            animation: loading-2 1s ease-in 0.4s infinite;
        }

        .loader-2 i:nth-child(5) {
            animation: loading-2 1s ease-in 0.5s infinite;
        }

        @keyframes loading-2 {
            0% {
                transform: scaleY(1);
            }
            50% {
                transform: scaleY(.4);
            }
            100% {
                transform: scaleY(1);
            }
        }

        .loader-3 {
            position: relative;
        }

        .loader-3 i {
            display: block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #333;
            position: absolute;
        }

        .loader-3 i:nth-child(1) {
            top: 25px;
            left: 0;
            animation: loading-3 1s ease 0s infinite;
        }

        .loader-3 i:nth-child(2) {
            top: 17px;
            left: 17px;
            animation: loading-3 1s ease -0.12s infinite;
        }

        .loader-3 i:nth-child(3) {
            top: 0;
            left: 25px;
            animation: loading-3 1s ease -0.24s infinite;
        }

        .loader-3 i:nth-child(4) {
            top: -17px;
            left: 17px;
            animation: loading-3 1s ease -0.36s infinite;
        }

        .loader-3 i:nth-child(5) {
            top: -25px;
            left: 0;
            animation: loading-3 1s ease -0.48s infinite;
        }

        .loader-3 i:nth-child(6) {
            top: -17px;
            left: -17px;
            animation: loading-3 1s ease -0.6s infinite;
        }

        .loader-3 i:nth-child(7) {
            top: 0;
            left: -25px;
            animation: loading-3 1s ease -0.72s infinite;
        }

        .loader-3 i:nth-child(8) {
            top: 17px;
            left: -17px;
            animation: loading-3 1s ease -0.84s infinite;
        }

        @keyframes loading-3 {
            50% {
                transform: scale(.4);
                opacity: .3;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="loader">
        <div class="loader-1">
            <i></i>
        </div>
    </div>
    <div class="loader">
        <div class="loader-2">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
    <div class="loader">
        <div class="loader-3">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>loading特效</title>
    <style type="text/css">
        .box {
            width: 100%;
            padding: 3%;
            box-sizing: border-box;
            overflow: hidden;
        }

        .box .loader {
            width: 30%;
            float: left;
            height: 200px;
            margin-right: 3%;
            border: 1px #ccc solid;
            box-sizing: border-box;

            display: flex;
            align-items: center;
            justify-content: center;
        }

        .loading-1 {
            width: 60px;
            height: 60px;
            position: relative;
        }

        .loading-1 i {
            display: block;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #333;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }

        .loading-1 i:nth-child(1) {
            animation: loading-1 1s linear 0s infinite;
        }

        .loading-1 i:nth-child(2) {
            animation: loading-1 1s linear 0.2s infinite;
        }

        .loading-1 i:nth-child(3) {
            animation: loading-1 1s linear 0.4s infinite;
        }

        @keyframes loading-1 {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            5% {
                opacity: 1;
            }
            100% {
                transform: scale(1);
                opacity: 0;
            }
        }

        .loading-2 {
            width: 40px;
            height: 40px;
            position: relative;
        }

        .loading-2 i {
            display: block;
            border: 2px solid #333;
            border-color: transparent #333;
            border-radius: 50%;
            position: absolute;
        }

        .loading-2 i:first-child {
            width: 35px;
            height: 35px;
            top: 0;
            left: 0;
            animation: loading-2 1s ease-in-out 0s infinite;
        }

        .loading-2 i:last-child {
            width: 15px;
            height: 15px;
            top: 10px;
            left: 10px;
            animation: loading-2 1s ease-in-out 0.5s infinite reverse;
        }

        @keyframes loading-2 {
            0% {
                transform: rotate(0) scale(1);
            }
            50% {
                transform: rotate(180deg) scale(.6);
            }
            100% {
                transform: rotate(360deg) scale(1);
            }
        }

        .loading-3 {
            width: 80px;
            height: 20px;
            position: relative;
        }

        .loading-3 i {
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #333;
            margin-right: 10px;
            position: absolute;
        }

        .loading-3 i:nth-child(1) {
            animation: loading-3 2s linear 0s infinite;
        }

        .loading-3 i:nth-child(2) {
            animation: loading-3 2s linear -0.4s infinite;
        }

        .loading-3 i:nth-child(3) {
            animation: loading-3 2s linear -0.8s infinite;
        }

        .loading-3 i:nth-child(4) {
            animation: loading-3 2s linear -1.2s infinite;
        }

        .loading-3 i:nth-child(5) {
            animation: loading-3 2s linear -1.6s infinite;
        }

        @keyframes loading-3 {
            0% {
                left: 100px;
                top: 0;
            }
            80% {
                left: 0;
                top: 0;
            }
            85% {
                left: 0;
                top: -20px;
                width: 20px;
                height: 20px;
            }
            90% {
                width: 40px;
                height: 20px;
            }
            95% {
                left: 100px;
                top: -20px;
                width: 20px;
                height: 20px;
            }
            100% {
                left: 100px;
                top: 0;
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="loader">
        <div class="loading-1">
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
    <div class="loader">
        <div class="loading-2">
            <i></i>
            <i></i>
        </div>
    </div>
    <div class="loader">
        <div class="loading-3">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
</div>
</body>
</html>

3D旋轉導航： flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D 菜單翻轉動畫特效</title>
    <style type="text/css">
        .nav {
            width: 610px;
            margin: 50px auto;
            background-color: #fdfdfd;
            border: 1px #ccc solid;
        }

        .nav:after {
            clear: both;
            display: block;
            overflow: hidden;
            content: "";
        }

        .nav .item {
            width: 200px;
            height: 100px;
            margin-right: 5px;
            float: left;
            perspective: 4000px;
        }

        .nav .item:last-child {
            margin-right: 0;
        }

        .nav .item a {
            display: block;
            height: 100px;
            text-decoration: none;
            transition: all .5s;
            transform-style: preserve-3d;
        }

        .nav .item a p {
            height: 100px;
            margin: 0;
            line-height: 100px;
            color: #fff;
            text-align: center;
            font-size: 20px;
            font-family: "Microsoft YaHei";
            border-radius: 2px;
            transition: all .5s;
        }

        .nav .item a p:first-child {
            background-color: #090;
            transform: translateZ(50px);
        }

        .nav .item a p:last-child {
            background-color: #009;
            transform: translateZ(50px) rotateX(-90deg);
            margin-top: -50px;
        }

        .nav .item a:hover {
            transform: rotateX(90deg);
        }

        .nav .item a:hover p:last-child {
            transform: translateZ(0) rotateX(-90deg);
            margin-top: 0;
        }

    </style>
</head>
<body>

<div class="nav">
    <div class="item">
        <a href="#">
            <p>首頁</p>
            <p>Home</p>
        </a>
    </div>
    <div class="item">
        <a href="#">
            <p>問答</p>
            <p>Q &amp; A</p>
        </a>
    </div>
    <div class="item">
        <a href="#">
            <p>關於咱們</p>
            <p>About us</p>
        </a>
    </div>
</div>

</body>
</html>

下拉菜單特效：動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉選擇框-1</title>
    <style type="text/css">
        body, p, ul {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: aquamarine;
            color: #333;
        }

        .content {
            padding-top: 5%;
        }

        .content .select {
            width: 300px;
            height: 40px;
            margin: 0 auto;
            font-size: 16px;
            font-family: "Microsoft YaHei";
            background-color: #fff;
            position: relative;
        }

        .content .select:after {
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            border-left: 1px #ccc solid;
            border-bottom: 1px #ccc solid;
            position: absolute;
            top: 11px;
            right: 12px;
            transform: rotate(-45deg);
            transition: transform .3s ease-out, top .3s ease-out;
        }

        .content .select p {
            padding: 0 15px;
            line-height: 40px;
            cursor: pointer;
        }

        .content .select ul {
            list-style-type: none;
            background-color: #fff;
            width: 100%;
            overflow: auto;
            position: absolute;
            top: 40px;
            left: 0;
            max-height: 0;
            transition: max-height .3s ease-out;
        }

        .content .select ul li {
            padding: 0 15px;
            line-height: 40px;
            cursor: pointer;
        }

        .content .select ul li:hover {
            background-color: #e0e0e0;
        }

        .content .select ul li.selected {
            background-color: #39f;
            color: #fff;
        }

        .content .select.open ul {
            max-height: 250px;
            transform-origin: 50% 0;
            transition: max-height .2s ease-out;
            animation: slide-down .5s ease-in;
        }

        @keyframes slide-down {
            0% {
                transform: scale(1, 0);
            }
            25% {
                transform: scale(1, 1.2);
            }
            50% {
                transform: scale(1, 0.85);
            }
            75% {
                transform: scale(1, 1.05);
            }
            100% {
                transform: scale(1, 1);
            }
        }

        .content .select.open:after {
            transform: rotate(-225deg);
            top: 18px;
            transition: all .3s ease-in;
        }

    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.select > p').on('click', function (e) {
                $('.select').toggleClass('open');
                e.stopPropagation();
            });
            $('.select ul li').on('click', function (e) {
                var _this = $(this);
                $('.select > p').text(_this.attr('data-value'));
                _this.addClass('selected').siblings().removeClass('selected');
                $('.select').removeClass('open');
                e.stopPropagation();
            });
            $(document).on('click', function () {
                $('.select').removeClass('open');
            })
        });
    </script>
</head>
<body>

<div class="content">
    <div class="select">
        <p>全部選項</p>
        <ul>
            <li data-value="全部選項" class="selected">全部選項</li>
            <li data-value="Html">Html</li>
            <li data-value="CSS">CSS</li>
            <li data-value="JavaScript">JavaScript</li>
            <li data-value="JQuery">JQuery</li>
        </ul>
    </div>
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉選擇框-2</title>
    <style type="text/css">
        body, p, ul {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: aquamarine;
            color: #333;
        }

        .content {
            padding-top: 20%;
        }

        .content .select {
            width: 300px;
            height: 40px;
            margin: 0 auto;
            font-size: 16px;
            font-family: "Microsoft YaHei";
            background-color: #fff;
            position: relative;
        }

        .content .select > i {
            position: absolute;
            top: 12px;
            right: 10px;
            width: 20px;
            height: 11px;
            border-top: 3px #ccc solid;
            border-bottom: 3px #ccc solid;
        }

        .content .select > i:after {
            content: '';
            position: absolute;
            top: 4px;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #ccc;
        }

        .content .select p {
            padding: 0 15px;
            line-height: 40px;
            cursor: pointer;
        }

        .content .select ul {
            list-style-type: none;
            position: absolute;
            top: 20px;
            left: 0;
            z-index: 1;
            background-color: #fff;
            width: 100%;
            overflow: hidden;
            height: 0;
            transition: height .3s ease-out, top .3s ease-out;
        }

        .content .select ul li {
            padding: 0 15px;
            line-height: 40px;
            cursor: pointer;
            opacity: 0;
            transform: translateX(300px);
            transition: transform .3s ease-out;
        }

        .content .select ul li:hover {
            background-color: #e0e0e0;
        }

        .content .select ul li.selected {
            background-color: #39f;
            color: #fff;
        }

        .content .select.open ul {
            height: 200px;
            top: -80px;
            transition: all .2s ease-in;
        }

        .content .select.open ul li {
            opacity: 1;
            transform: translateX(0);
        }

        .content .select.open ul li:nth-child(1) {
            transition: opacity .3s ease-in .05s, transform .3s ease-in .05s;
        }
        .content .select.open ul li:nth-child(2) {
            transition: opacity .3s ease-in .1s, transform .3s ease-in .1s;
        }
        .content .select.open ul li:nth-child(3) {
            transition: opacity .3s ease-in .15s, transform .3s ease-in .15s;
        }
        .content .select.open ul li:nth-child(4) {
            transition: opacity .3s ease-in .2s, transform .3s ease-in .05s;
        }
        .content .select.open ul li:nth-child(5) {
            transition: opacity .3s ease-in .25s, transform .3s ease-in .25s;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.select > p').on('click', function (e) {
                $('.select').toggleClass('open');
                e.stopPropagation();
            });
            $('.select ul li').on('click', function (e) {
                var _this = $(this);
                $('.select > p').text(_this.attr('data-value'));
                _this.addClass('selected').siblings().removeClass('selected');
                $('.select').removeClass('open');
                e.stopPropagation();
            });
            $(document).on('click', function () {
                $('.select').removeClass('open');
            })
        });
    </script>
</head>
<body>

<div class="content">
    <div class="select">
        <p>全部選項</p>
        <i></i>
        <ul>
            <li data-value="全部選項" class="selected">全部選項</li>
            <li data-value="Html">Html</li>
            <li data-value="CSS">CSS</li>
            <li data-value="JavaScript">JavaScript</li>
            <li data-value="JQuery">JQuery</li>
        </ul>
    </div>
</div>

</body>
</html>

單選框： this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>單選框的動畫特效</title>
    <style type="text/css">
        .radio-1 {
            width: 980px;
            margin: 0 auto;
            padding: 3% 0;
            background-color: #3cc;
            text-align: center;
        }

        .radio-1 [type="radio"] {
            display: none;
        }

        .radio-1 label {
            display: inline-block;
            position: relative;
            width: 28px;
            height: 28px;
            border: 1px #ccc solid;
            background-color: #fff;
            margin-right: 10px;
            cursor: pointer;
            border-radius: 100%;
        }

        .radio-1 label:after {
            content: '';
            position: absolute;
            top: 4px;
            left: 4px;
            width: 20px;
            height: 20px;
            background-color: #666;
            border-radius: 50%;
            transform: scale(0);
            transition: transform .2s ease-out;
        }

        .radio-1 [type="radio"]:checked + label {
            background-color: #eee;
            transition: background-color .2s ease-in;
        }

        .radio-1 [type="radio"]:checked + label:after {
            transform: scale(1);
            transition: transform .2s ease-in;
        }

        /*------------radio-2-------------*/
        .radio-2 {
            width: 980px;
            margin: 0 auto;
            padding: 3% 0;
            background-color: #fc9;
            text-align: center;
        }

        .radio-2 [type="radio"] {
            display: none;
        }

        .radio-2 label {
            display: inline-block;
            position: relative;
            overflow: hidden;
            width: 28px;
            height: 28px;
            border: 1px #ccc solid;
            background-color: #fff;
            margin-right: 10px;
            cursor: pointer;
            border-radius: 100%;
        }

        .radio-2 label:after {
            content: '';
            position: absolute;
            top: 4px;
            left: 4px;
            width: 20px;
            height: 20px;
            background-color: #666;
            border-radius: 50%;
            transform-origin: -2px 50%;
            transform: rotate(-180deg);
            transition: transform .2s ease-out;
        }

        .radio-2 [type="radio"]:checked + label:after {
            transform: rotate(0);
            transition: transform .2s ease-in;
        }
    </style>
</head>
<body>

<div class="radio-1">
    <input type="radio" name="radio-1" id="radio-1-1" checked="checked">
    <label for="radio-1-1"></label>

    <input type="radio" name="radio-1" id="radio-1-2">
    <label for="radio-1-2"></label>

    <input type="radio" name="radio-1" id="radio-1-3">
    <label for="radio-1-3"></label>
</div>


<div class="radio-2">
    <input type="radio" name="radio-2" id="radio-2-1" checked="checked">
    <label for="radio-2-1"></label>

    <input type="radio" name="radio-2" id="radio-2-2">
    <label for="radio-2-2"></label>

    <input type="radio" name="radio-2" id="radio-2-3">
    <label for="radio-2-3"></label>
</div>
</body>
</html>

複選框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>複選框的動畫特效</title>
    <style type="text/css">
        .checkbox-1 {
            width: 980px;
            margin: 0 auto;
            text-align: center;
            padding: 3% 0;
            background-color: #9cc;
        }

        .checkbox-1 label {
            display: inline-block;
            width: 10px;
            height: 10px;
            padding: 9px;
            border: 1px #ccc solid;
            border-radius: 4px;
            background-color: #fff;
            color: #333;
            margin-right: 10px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }

        .checkbox-1 label:after {
            content: '+';
            font-family: Arial;
            color: #fff;
            background-color: #399;
            width: 26px;
            height: 26px;
            line-height: 26px;
            position: absolute;
            left: 1px;
            top: 1px;
            border-radius: 4px;
            transform: translateY(-30px);
            transition: transform .2s ease-out;
        }

        .checkbox-1 [type = "checkbox"] {
            display: none;
        }

        .checkbox-1 [type = "checkbox"]:checked + label:after {
            transform: translateY(0);
            transition: transform .2s ease-in;
        }

        /*--------------checkbox-2-----------------*/
        .checkbox-2 {
            width: 980px;
            margin: 0 auto;
            text-align: center;
            padding: 3% 0;
            background-color: #fc9;
        }

        .checkbox-2 label {
            display: inline-block;
            width: 68px;
            height: 34px;
            border: 1px #ccc solid;
            border-radius: 18px;
            background-color: #fafafa;
            margin-right: 10px;
            position: relative;
            cursor: pointer;
            transition: background-color .1s ease-in;
        }

        .checkbox-2 label:after {
            content: '';
            position: absolute;
            left: 1px;
            top: 1px;
            width: 30px;
            height: 30px;
            border: 1px #eee solid;
            border-radius: 50%;
            background-color: #fff;
            transition: left .1s ease-out;
        }

        .checkbox-2 [type = "checkbox"] {
            display: none;
        }

        .checkbox-2 [type = "checkbox"]:checked + label {
            background-color: #3c6;
            transition: background-color .1s ease-in;
        }

        .checkbox-2 [type = "checkbox"]:checked + label:after {
            left: 35px;
            transition: left .1s ease-in;
        }
    </style>
</head>
<body>

<div class="checkbox-1">
    <input type="checkbox" name="checkbox-1" id="checkbox-1-1" checked="checked">
    <label for="checkbox-1-1"></label>

    <input type="checkbox" name="checkbox-1" id="checkbox-1-2">
    <label for="checkbox-1-2"></label>

    <input type="checkbox" name="checkbox-1" id="checkbox-1-3">
    <label for="checkbox-1-3"></label>
</div>

<div class="checkbox-2">
    <input type="checkbox" name="checkbox-2" id="checkbox-2-1" checked="checked">
    <label for="checkbox-2-1"></label>

    <input type="checkbox" name="checkbox-2" id="checkbox-2-2">
    <label for="checkbox-2-2"></label>

    <input type="checkbox" name="checkbox-2" id="checkbox-2-3">
    <label for="checkbox-2-3"></label>
</div>
</body>
</html>

地球儀3D：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>立體線框球形旋轉動畫特效</title>
    <style type="text/css">
        body {
            background-color: #000;
        }

        .ball-box {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -150px 0 0 -150px;
            perspective-origin: 50% 50%;
            perspective: 3000px;
        }

        .ball {
            height: 100%;
            transform-style: preserve-3d;
            /*transform: rotateZ(-30deg) rotateY(0deg);*/
            animation: rotate3D 30s infinite linear;
        }

        @keyframes rotate3D {
            0% {
                transform: rotateZ(-30deg) rotateY(0deg);
            }
            100% {
                transform: rotateZ(-30deg) rotateY(360deg);
            }
        }

        .ball:after {
            content: '';
            width: 1px;
            height: 500px;
            background-color: #ff0;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            transform: translateX(150px) translateY(-100px);
        }

        .ball > div {
            border: 1px #fff solid;
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 100%;
        }

        .ball .line-1 {
            transform: rotateY(0);
        }

        .ball .line-2 {
            transform: rotateY(36deg);
        }

        .ball .line-3 {
            transform: rotateY(72deg);
        }

        .ball .line-4 {
            transform: rotateY(108deg);
        }

        .ball .line-5 {
            transform: rotateY(144deg);
        }
    </style>
</head>
<body>

<div class="ball-box">
    <div class="ball">
        <div class="line-1"></div>
        <div class="line-2"></div>
        <div class="line-3"></div>
        <div class="line-4"></div>
        <div class="line-5"></div>
    </div>
</div>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。