每日一更
分类:计算机网络

css3之3d导航,css33d

css3的新属性非常不错,目前IE除外其他浏览器都已支持

实现原理:比如元素a在hover时候可以改变元素b的状态。

效果如本农导航,欢迎采用和建议~

a:hover b{ 

  执行简单动画效果

}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D-navBar</title>
    <link rel="stylesheet" href="css/3dnavBar.css">
</head>
<body>
<header>
    <ul class="block-menu" id="F1">
        <li>
            <a href="javascript:;" class="three-d">Home

                    Home
                    Home

            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">Html

                    Html
                    Html

            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">CSS

                    CSS
                    CSS

            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">Javascript

                    Javascript
                    Javascript

            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">jQuery

                    jQuery
                    jQuery

            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">ajax

                    ajax
                    ajax

            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">php

                    php
                    php

            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">bootstrap

                    bootstrap
                    bootstrap

            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">angular

                    angular
                    angular

            </a>
        </li>
    </ul>
</header>
</body>
</html>

CSS

*{
    list-style: none;
    margin: 0;
    padding: 0;
}
.block-menu{
    background:#AA7A53;
    height:50px;
    overflow:hidden;
    padding-left:40px;
}
.block-menu li{
    float: left;
    margin-left: 15px;
}
.block-menu li a{
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    font-size:16px;
    line-height:20px;
    font-weight:bold;
    font-family: Arial, sans-serif;
    display:block;
    padding:15px 10px;
}
.three-d-box,.front,.back{
    width: 100%;
    display: block;
    height:50px;
    position:absolute;
    top:0;
    left:0;
    text-align: center;
    line-height: 50px;
    background:#AA7A53;
}
.three-d{
    perspective:200px;
    position:relative;
}
.three-d-box{
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform:translateZ(-25px);
    -moz-transform:translateZ(-25px);
    -o-transform:translateZ(-25px);
    -ms-transform:translateZ(-25px);
    transform:translateZ(-25px);
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.front{
    -webkit-transform:rotateX(0deg) translateZ(25px);
    -moz-transform:rotateX(0deg) translateZ(25px);
    -o-transform:rotateX(0deg) translateZ(25px);
    -ms-transform:rotateX(0deg) translateZ(25px);
    transform:rotateX(0deg) translateZ(25px);
}
.back{
    -webkit-transform:rotateX(-90deg) translateZ(25px);
    -moz-transform:rotateX(-90deg) translateZ(25px);
    -o-transform:rotateX(-90deg) translateZ(25px);
    -ms-transform:rotateX(-90deg) translateZ(25px);
    transform:rotateX(-90deg) translateZ(25px);
}
.three-d:hover .three-d-box{
    -webkit-transform: translateZ(-25px) rotateX(90deg);
    -moz-transform: translateZ(-25px) rotateX(90deg);
    -o-transform: translateZ(-25px) rotateX(90deg);
    -ms-transform: translateZ(-25px) rotateX(90deg);
    transform: translateZ(-25px) rotateX(90deg);
}

 

css3的新属性非常不错,目前IE除外其他浏览器都已支持 实现原理:比如元素a在hover时候可以改变元素b的状态。 效果如本...

css3的新属性非常不错,目前IE除外其他浏览器都已支持

CSS3之图片3D翻转效果(网页效果--每日一更),css3翻转

  今天,带来的是纯CSS3的效果--图片3D翻转。

  请看效果:

  这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animation属性,而是采用transition过渡属性。这个属性会将元素在两种效果之间进行切换,并产生一个过渡效果。详情请看代码。

  HTML结构:

 1     <div id="content">
 2         <div class="list">
 3             <img src="../Images/1.jpg">
 4             <div class="text">
 5                 这是小狗哦!!
 6             </div>
 7         </div>
 8         <div class="list">
 9             <img src="../Images/2.jpg">
10             <div class="text">
11                 这是小狗哦!!
12             </div>
13         </div>
14     </div>

  CSS样式:

 1 <style type="text/css">
 2         *{margin:0px;padding:0px;}
 3         #content{
 4             width:500px;
 5             margin:30px auto;
 6         }
 7         .list{
 8             width:200px;
 9             margin:25px;
10             float:left;
11             position:relative;
12         }
13         .list img{
14             width:200px;
15             height:200px;
16             transform:perspective(200px) rotateY(0deg);
17             opacity:1;
18             transition:transform 600ms ease,opacity 600ms ease;
19             -webkit-transition:transform 600ms ease,opacity 600ms ease;
20         }
21         .text{
22             height:200px;
23             width:200px;
24             line-height:200px;
25             background:#000;
26             color:#fff;
27             opacity:0;
28             position:absolute;
29             text-align:center;
30             font-weight:bold;
31             top:0px;
32             left:0px;
33             transform:perspective(200px) rotateY(-180deg);
34             transition:transform 600ms ease,opacity 600ms ease;
35             -webkit-transition:transform 600ms ease,opacity 600ms ease;
36         }
37         .list:hover img{
38             transform:perspective(200px) rotateY(180deg);
39             opacity:0;
40             transition:transform 600ms ease,opacity 600ms ease;
41             -webkit-transition:transform 600ms ease,opacity 600ms ease;
42         }
43         .list:hover .text{
44             transform:perspective(200px) rotateY(0deg);
45             opacity:1;
46             transition:transform 600ms ease,opacity 600ms ease;
47             -webkit-transition:transform 600ms ease,opacity 600ms ease;
48         }
49     </style>

  代码很容易理解,先为图片设置一个初始旋转角度,因为它是先展示的,所以角度为180deg,透明度为1。当鼠标滑过时,改变角度和透明度,使其翻转。而背后的文字也是如此道理。

  享受代码,享受生活,网页效果,每日一更。

实现原理:比如元素a在hover时候可以改变元素b的状态。

CSS3翻转图片问题

对你的问题倒是没有答案,只是看到你问题,想插句嘴。你注意-webkit前缀,你要用这种方式实现了,你不用webkit内核的浏览器完全没法看。你应该写:
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
目前情况下,正确的方式在目前是通过js配合css实现,css3距离普及还早着呢。目前主流浏览器对css3和html5的实现方式完全不一样,所以都得单独设置。  

效果如本农导航,欢迎采用和建议~

怎利用CSS代码控制导航图片翻转效果?

a:link{background:url("a.jpg")} 链接默认状态
a:visited{background:url("a.jpg")} 链接访问过以后的状态
a:hover{background:url("b.jpg")} 当鼠标移动上去的状态
a:active{background:url("c.jpg")} 当前的活动状态

放到样式里面就可以了

具体的导航名称自己定义!  

今天,带来的是纯CSS3的效果--图片3D翻转。 请看效果:...

a:hover b{ 

  执行简单动画效果

}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D-navBar</title>
    <link rel="stylesheet" href="css/3dnavBar.css">
</head>
<body>
<header>
    <ul class="block-menu" id="F1">
        <li>
            <a href="javascript:;" class="three-d">Home

                    Home
                    Home

            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">Html

                    Html
                    Html

            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">CSS

                    CSS
                    CSS

            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">Javascript

                    Javascript
                    Javascript

            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">jQuery

                    jQuery
                    jQuery

            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">ajax

                    ajax
                    ajax

            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">php

                    php
                    php

            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">bootstrap

                    bootstrap
                    bootstrap

            </a>
        </li>
        <li>
            <a href="javascript:;" class="three-d">angular

                    angular
                    angular

            </a>
        </li>
    </ul>
</header>
</body>
</html>

CSS

*{
    list-style: none;
    margin: 0;
    padding: 0;
}
.block-menu{
    background:#AA7A53;
    height:50px;
    overflow:hidden;
    padding-left:40px;
}
.block-menu li{
    float: left;
    margin-left: 15px;
}
.block-menu li a{
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    font-size:16px;
    line-height:20px;
    font-weight:bold;
    font-family: Arial, sans-serif;
    display:block;
    padding:15px 10px;
}
.three-d-box,.front,.back{
    width: 100%;
    display: block;
    height:50px;
    position:absolute;
    top:0;
    left:0;
    text-align: center;
    line-height: 50px;
    background:#AA7A53;
}
.three-d{
    perspective:200px;
    position:relative;
}
.three-d-box{
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform:translateZ(-25px);
    -moz-transform:translateZ(-25px);
    -o-transform:translateZ(-25px);
    -ms-transform:translateZ(-25px);
    transform:translateZ(-25px);
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.front{
    -webkit-transform:rotateX(0deg) translateZ(25px);
    -moz-transform:rotateX(0deg) translateZ(25px);
    -o-transform:rotateX(0deg) translateZ(25px);
    -ms-transform:rotateX(0deg) translateZ(25px);
    transform:rotateX(0deg) translateZ(25px);
}
.back{
    -webkit-transform:rotateX(-90deg) translateZ(25px);
    -moz-transform:rotateX(-90deg) translateZ(25px);
    -o-transform:rotateX(-90deg) translateZ(25px);
    -ms-transform:rotateX(-90deg) translateZ(25px);
    transform:rotateX(-90deg) translateZ(25px);
}
.three-d:hover .three-d-box{
    -webkit-transform: translateZ(-25px) rotateX(90deg);
    -moz-transform: translateZ(-25px) rotateX(90deg);
    -o-transform: translateZ(-25px) rotateX(90deg);
    -ms-transform: translateZ(-25px) rotateX(90deg);
    transform: translateZ(-25px) rotateX(90deg);
}

 

本文由美高梅网址发布于计算机网络,转载请注明出处:每日一更

上一篇:网址的正则代码,asp手机号码正则表达式代码 下一篇:没有了
猜你喜欢
热门排行
精彩图文