前端开发分享一种交互效果

后端与前端开发的区别
web和前端开发的区别吗
web前端设计与开发的区别

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>circle 扭动</title>
        <style type=”text/css”>
            * {
                padding: 0;
                margin: 0;
            }
            .circle-wrap {
                position: relative;
                float: left;
                margin-left: 20px;
                width: 210px;
                height: 210px;
                border-radius: 50%;
                box-sizing: border-box;
                overflow: hidden;
            }
            .circle-wrap .circle-shut {
                width: 210px;
                height: 210px;
                border: 10px solid #000;
                border-right-color: red;
                border-bottom-color: red;
                border-radius: 50%;
                box-sizing: border-box;
                transition: all 0.8s ease-in-out;
            }
            .circle-wrap .circle-img {
                position: absolute;
                top: 10px;
                left: 10px;
                width: 190px;
                height: 190px;
                z-index: -1;
                border-radius: 50%;
                box-sizing: border-box;
            }
            .circle-wrap .circle-img img {
                max-width: 100%;
            }
            .circle-wrap .circle-details {
                position: absolute;
                top: 10px;
                left: 10px;
                width: 190px;
                height: 190px;
                z-index: 2;
                box-sizing: border-box;
                background-color: #000;
                opacity: 0;
                transition: opacity 1s ease-in-out;
                border-radius: 50%;
            }
            .circle-wrap .circle-details-main {
                position: absolute;
                left: 0;
                top: 0;
                z-index: 3;
                width: 100%;
                height: 100%;
                text-align: center;
                line-height: 200px;
                color: #fff;
                font-weight: 700;
                opacity: 0;
                transition: opacity 1s ease-in-out;
            }
            .circle-wrap:hover .circle-shut {
                transform: rotate(90deg);
            }
            .circle-wrap:hover .circle-details {
                opacity: 0.5;
            }
            .circle-wrap:hover .circle-details-main {
                opacity: 1;
            }
        </style>
    </head>
    <body>
        <div class=”circle-wrap”>
            <div class=”circle-shut”></div>
            <div class=”circle-img”>
                <img
                    src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/10/190548ay41myypw4yz3m11.jpg”
                />
            </div>
            <div class=”circle-details”></div>
            <div class=”circle-details-main”>我是一个描述</div>
        </div>
        <div class=”circle-wrap”>
            <div class=”circle-shut”></div>
            <div class=”circle-img”>
                <img
                    src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/10/190548f29l67mx782c8m8q.jpg”
                />
            </div>
            <div class=”circle-details”></div>
            <div class=”circle-details-main”>我是一个描述</div>
        </div>
        <div class=”circle-wrap”>
            <div class=”circle-shut”></div>
            <div class=”circle-img”>
                <img
                    src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/10/190555iw5e7zttk7557wi4.jpg”
                />
            </div>
            <div class=”circle-details”></div>
            <div class=”circle-details-main”>我是一个描述</div>
        </div>
    </body>
</html>
前端开发与后台的区别
前端开发和美工的区别
手游开发前端和后端的区别
» 本文来自:前端开发者 » 《前端开发分享一种交互效果》
» 本文链接地址:https://www.rokub.com/7027.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!