CSS3 애니메이션 탐색 모음 3D

jacklove
풀어 주다: 2018-06-11 22:56:55
원래의
2819명이 탐색했습니다.

소스 코드 네트워크 디스크

MOOC.com에서 만든 CSS3 소형 특수 효과 탐색 모음을 기반으로 아이콘이 다르게 표시됩니다.

页面布局

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<p class="nav">
    <ul>
        <li>
            <a class="tooltip tooltip-effect-1" href="#">Home
                <span class="tooltip-content">
                <i class="fa fa-fw fa-home"></i>
            </span>
            </a>
        </li>
        <li>
            <a class="tooltip tooltip-effect-2" href="#">About me
                <span class="tooltip-content">
            <i class="fa fa-fw fa-user"></i>
        </span>
            </a>
        </li>
        <li>
            <a class="tooltip tooltip-effect-3" href="#">Photography
                <span class="tooltip-content">
                <i class="fa fa-fw fa-camera-retro"></i>
            </span>
            </a>
        </li>
        <li>
            <a class="tooltip tooltip-effect-4" href="#">Work
                <span class="tooltip-content">
                <i class="fa fa-fw fa-briefcase"></i>
            </span>
            </a>
        </li>
        <li>
            <a class="tooltip tooltip-effect-5" href="#">Contact
                <span class="tooltip-content">
                <i class="fa fa-fw fa-envelope"></i>
            </span>
            </a>
        </li>
    </ul>
</p>
</body>
</html>
로그인 후 복사
样式

*{
    -webkit-box-sizing: border-box;
}
html,body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #47c9af;;
    color: #74777b;
    font-family: &#39;Raleway&#39;, Arial, sans-serif;
}

ul {
    list-style: none;
}

a{
    text-decoration: none;
    color: rgba(0, 0, 0, 0.3);
    display: inline-block;
    font-weight: 700;
}

a:hover, .nav a:focus {
    color: #fff;
}

.nav {
    width: 820px;
    height: 300px;
    margin: 200px auto 0 auto;
    font-weight: 300;
}

.nav ul li {
    display: inline-block;
    position: relative;
    margin: 0 20px;
    font-size: 1.5em;
}

.tooltip-content {
    position: absolute;
    width: 80px;
    height: 80px;
    padding-top: 25px;
    left: 50%;
    margin-left: -40px;
    bottom: 20px;
    border-radius: 50%;
    text-align: center;
    background: #fff;
    color: #47c9af;
    opacity: 0;
    margin-bottom: 20px;
    cursor: pointer;
}

.tooltip-effect-1 .tooltip-content {
    -webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg);
    -webkit-transform-origin: 50% 100%;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-1 .tooltip-content i {
    -webkit-transform: scale3d(0, 0, 1);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-2 .tooltip-content {
    -webkit-transform: translate3d(0, 10px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-2 .tooltip-content i {
    -webkit-transform: translate3d(0, 15px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-3 .tooltip-content {
    -webkit-transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg);
    -webkit-transform-origin: 50% 100%;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-3 .tooltip-content i {
    -webkit-transform: scale3d(0, 0, 1);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-4 .tooltip-content {
    -webkit-transform: translate3d(0, -20px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-4 .tooltip-content i {
    -webkit-transform: translate3d(0, 20px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-5 .tooltip-content {
    -webkit-transform: scale3d(0, 0, 1);
    -webkit-transform-origin: 50% 100%;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-5 .tooltip-content i {
    -webkit-transform: translate3d(0, 20px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
}

.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content i {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
로그인 후 복사

이 문서에서는 CSS3 애니메이션 탐색 모음 3D에 대해 설명합니다. PHP 중국어 웹사이트를 주의 깊게 살펴보시기 바랍니다.

관련 권장 사항:

프론트엔드 통화 WeChat 결제 인터페이스

jQuery 개체 및 DOM 개체

jQuery 플러그인 개발 표준 작성 방법

위 내용은 CSS3 애니메이션 탐색 모음 3D의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!