找回密码
当前位置：前端开发者 > CSS > 正文

前端开发CSS3效果_多效果组合

2018-11-30 21:29:55 分类：CSS 阅读(143) 评论(0)
前端软件开发岗位职责
软件技术前端应用开发就业前景
软件前端开发招工

本实例包含渐变、定位、全屏、点击链接、变形、动画、镂空字、阴影字等CSS3效果；在实际运用中可以将div换成图片。

html 代码

<!DOCTYPE html>
    <head lang=”en”>
        <meta charset=”UTF-8″ />
        <title></title>
        <style type=”text/css”>
            * {
                margin: 0;
                padding: 0;
            }
            html,
            body {
                height: 100%;
            }
            .wrap {
                width: 100%;
                height: 100%;
                position: relative;
                overflow: hidden;
            }
            .div1,
            .div2,
            .div3,
            .div4,
            .div5 {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 10;
                font-size: 300px;
                text-align: center;
                line-height: 600px;
                -webkit-text-stroke: 2px blue;
                color: transparent;
            }
            .div1 {
                background: repeating-radial-gradient(
                    300px 100px at center,
                    black 50%,
                    white
                );
            }
            .div2 {
                background: repeating-radial-gradient(
                    300px 100px at center,
                    red 50%,
                    green
                );
            }
            .div3 {
                background: repeating-radial-gradient(
                    300px 100px at center,
                    blue 50%,
                    yellow
                );
            }
            .div4 {
                background: repeating-radial-gradient(
                    300px 100px at center,
                    grey 50%,
                    brown
                );
            }
            .div5 {
                background: repeating-radial-gradient(
                    300px 100px at center,
                    purple 50%,
                    pink
                );
                color: blue;
                text-shadow: 9px 9px 9px orange, 3px 3px 3px red,
                    5px 5px 5px green, 7px 7px 7px grey;
            }
            .total {
                position: absolute;
                bottom: 10px;
                z-index: 1000;
                right: 0;
                width: 100%;
                text-align: center;
            }
            .total a {
                position: relative;
                display: inline-block;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                overflow: hidden;
                border: 10px solid rgba(255, 255, 255, 0.5);
            }
            .wrap :target {
                z-index: 100;
            }
            #bg1:target {
                animation: div1 1s;
            }
            @keyframes div1 {
                0% {
                    transform: translateX(-600px);
                }
                100% {
                    transform: translateX(0px);
                }
            }
            #bg2:target {
                animation: div2 1s;
            }
            @keyframes div2 {
                0% {
                    transform: rotateY(360deg);
                }
                100% {
                    transform: rotateY(0deg);
                }
            }
            #bg3:target {
                animation: div3 1s;
            }
            @keyframes div3 {
                0% {
                    transform: scaleX(0.2);
                }
                100% {
                    transform: scaleX(1);
                }
            }
            #bg4:target {
                animation: div4 1s;
            }
            @keyframes div4 {
                0% {
                    transform: skewX(180deg);
                }
                100% {
                    transform: skewX(0);
                }
            }
            #bg5:target {
                animation: div5 1s;
            }
            @keyframes div5 {
                0% {
                    transform: scaleY(0.1) rotateY(0deg);
                }
                100% {
                    transform: scaleY(1) rotateY(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class=”wrap”>
            <div class=”div1″ id=”bg1″>第1帧</div>
            <div class=”div2″ id=”bg2″>第2帧</div>
            <div class=”div3″ id=”bg3″>第3帧</div>
            <div class=”div4″ id=”bg4″>第4帧</div>
            <div class=”div5″ id=”bg5″>第5帧</div>
            <div class=”total”>
                <a href=”#bg1″> <div class=”div1″></div> </a>
                <a href=”#bg2″> <div class=”div2″></div> </a>
                <a href=”#bg3″> <div class=”div3″></div> </a>
                <a href=”#bg4″> <div class=”div4″></div> </a>
                <a href=”#bg5″> <div class=”div5″></div> </a>
            </div>
        </div>
    </body>
</html>
软件前端开发的待遇
软件开发前端后端
前端页面开发软件
» 本文来自：前端开发者 » 《前端开发CSS3效果_多效果组合》
» 本文链接地址：https://www.rokub.com/6889.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论