下拉菜单旋转出现css

最新推荐文章于 2023-05-08 09:52:51 发布
最新推荐文章于 2023-05-08 09:52:51 发布
阅读量167 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zjz666/p/11163881.html
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        @charset "utf-8";
        body{
            margin: 0;
            padding: 0;
            -webkit-text-size-adjust: none;
            /*background-image: url("../img/hat.jpg");*/
            font: 12px "宋体";
        }

        a img {
            border: 0
        }

        ul, ol, li {
            list-style-type: none;
            vertical-align: 0
        }

        a {
            outline-style: none;
            color: #535353;
            text-decoration: none
        }

        a:hover {
            color: #D40000;
            text-decoration: none
        }

        .clear {
            height: 0;
            overflow: hidden;
            clear: both
        }
        header{
            height: 100px;
        }
        input{
            border: none;
        }
        .button {
            display: inline-block;
            zoom: 1;
            *display: inline;
            vertical-align: baseline;
            margin: 0 2px;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            font: 14px/100% Arial, Helvetica, sans-serif;
            padding: 0.25em 0.6em 0.3em;
            text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
        }

        /*restCSS结束，应用特效时，以上样式可删除*/
        /* 需要的css样式 */
        .nav {
            width: 970px;
            margin: 0 auto;
            text-align: center;
        }

        .menu, .menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .menu {
            height: 58px;
            margin-top: 20px;
        }

        .menu li {
            background-color: #0C0000;
            border-bottom: 2px solid #181818;
            border-top: 2px solid #303030;
            min-width: 160px;
        }

        .menu > li {
            display: block;
            float: left;
            position: relative;
        }

        .menu > li:first-child {
            border-radius: 5px 0 0;
        }

        .menu a {
            border-left: 3px solid rgba(0, 0, 0, 0);
            /*background: url("../img/back.jpg");*/
            color: #808080;
            display: block;
            font-size: 18px;
            line-height: 54px;
            padding: 0 25px;
            text-decoration: none;
            text-transform: uppercase;
        }

        .menu li:hover {
            background-color: #1c1c1c;
            background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
            background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
            background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
            background: -o-linear-gradient(#1c1c1c, #1b1b1b);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
            background: linear-gradient(#1c1c1c, #1b1b1b);
            border-bottom: 2px solid #222222;
            border-top: 2px solid #1B1B1B;
            /*改变加深父元素的背景*/
        }

        .menu li:hover > a {
            border-radius: 5px 0 0 0;
            border-left: 3px solid #C4302B;
            color: #C4302B;
        }

        .submenu {
            left: 0;
            max-height: 0;
            position: absolute;
            top: 100%;
            z-index: 0;
            -webkit-perspective: 400px;
            -moz-perspective: 400px;
            -ms-perspective: 400px;
            -o-perspective: 400px;
            perspective: 400px;
        }

        .submenu li {
            opacity: 0;
            -webkit-transform: rotateY(90deg);
            -moz-transform: rotateY(90deg);
            -ms-transform: rotateY(90deg);
            -o-transform: rotateY(90deg);
            transform: rotateY(90deg);
            -webkit-transition: opacity .4s, -webkit-transform .5s;
            -moz-transition: opacity .4s, -moz-transform .5s;
            -ms-transition: opacity .4s, -ms-transform .5s;
            -o-transition: opacity .4s, -o-transform .5s;
            transition: opacity .4s, transform .5s;
            /*实现下拉菜单螺旋淡出*/
        }

        .menu .submenu li:hover a {
            border-left: 3px solid #454545;
            border-radius: 0;
            color: #ffffff;
        }

        .menu > li:hover .submenu, .menu > li:focus .submenu {
            max-height: 2000px;
            z-index: 10;
        }

        .menu > li:hover .submenu li, .menu > li:focus .submenu li {
            opacity: 1;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }
        /*动画递进的时间 实现一个个螺旋子菜单*/
        .menu li:hover .submenu li:nth-child(1) {
            -webkit-transition-delay: 0s;
            -moz-transition-delay: 0s;
            -ms-transition-delay: 0s;
            -o-transition-delay: 0s;
            transition-delay: 0s;
        }

        .menu li:hover .submenu li:nth-child(2) {
            -webkit-transition-delay: 50ms;
            -moz-transition-delay: 50ms;
            -ms-transition-delay: 50ms;
            -o-transition-delay: 50ms;
            transition-delay: 50ms;
        }

        .menu li:hover .submenu li:nth-child(3) {
            -webkit-transition-delay: 100ms;
            -moz-transition-delay: 100ms;
            -ms-transition-delay: 100ms;
            -o-transition-delay: 100ms;
            transition-delay: 100ms;
        }

        .menu li:hover .submenu li:nth-child(4) {
            -webkit-transition-delay: 150ms;
            -moz-transition-delay: 150ms;
            -ms-transition-delay: 150ms;
            -o-transition-delay: 150ms;
            transition-delay: 150ms;
        }

        .menu li:hover .submenu li:nth-child(5) {
            -webkit-transition-delay: 200ms;
            -moz-transition-delay: 200ms;
            -ms-transition-delay: 200ms;
            -o-transition-delay: 200ms;
            transition-delay: 200ms;
        }

        .menu li:hover .submenu li:nth-child(6) {
            -webkit-transition-delay: 250ms;
            -moz-transition-delay: 250ms;
            -ms-transition-delay: 250ms;
            -o-transition-delay: 250ms;
            transition-delay: 250ms;
        }

        .menu li:hover .submenu li:nth-child(7) {
            -webkit-transition-delay: 300ms;
            -moz-transition-delay: 300ms;
            -ms-transition-delay: 300ms;
            -o-transition-delay: 300ms;
            transition-delay: 300ms;
        }

        .menu li:hover .submenu li:nth-child(8) {
            -webkit-transition-delay: 350ms;
            -moz-transition-delay: 350ms;
            -ms-transition-delay: 350ms;
            -o-transition-delay: 350ms;
            transition-delay: 350ms;
        }

        .submenu li:nth-child(1) {
            -webkit-transition-delay: 350ms;
            -moz-transition-delay: 350ms;
            -ms-transition-delay: 350ms;
            -o-transition-delay: 350ms;
            transition-delay: 350ms;
        }

        .submenu li:nth-child(2) {
            -webkit-transition-delay: 300ms;
            -moz-transition-delay: 300ms;
            -ms-transition-delay: 300ms;
            -o-transition-delay: 300ms;
            transition-delay: 300ms;
        }

        .submenu li:nth-child(3) {
            -webkit-transition-delay: 250ms;
            -moz-transition-delay: 250ms;
            -ms-transition-delay: 250ms;
            -o-transition-delay: 250ms;
            transition-delay: 250ms;
        }

        .submenu li:nth-child(4) {
            -webkit-transition-delay: 200ms;
            -moz-transition-delay: 200ms;
            -ms-transition-delay: 200ms;
            -o-transition-delay: 200ms;
            transition-delay: 200ms;
        }

        .submenu li:nth-child(5) {
            -webkit-transition-delay: 150ms;
            -moz-transition-delay: 150ms;
            -ms-transition-delay: 150ms;
            -o-transition-delay: 150ms;
            transition-delay: 150ms;
        }

        .submenu li:nth-child(6) {
            -webkit-transition-delay: 100ms;
            -moz-transition-delay: 100ms;
            -ms-transition-delay: 100ms;
            -o-transition-delay: 100ms;
            transition-delay: 100ms;
        }

        .submenu li:nth-child(7) {
            -webkit-transition-delay: 50ms;
            -moz-transition-delay: 50ms;
            -ms-transition-delay: 50ms;
            -o-transition-delay: 50ms;
            transition-delay: 50ms;
        }

        .submenu li:nth-child(8) {
            -webkit-transition-delay: 0s;
            -moz-transition-delay: 0s;
            -ms-transition-delay: 0s;
            -o-transition-delay: 0s;
            transition-delay: 0s;
        }

    </style>
</head>
<body>
<div class="nav">
    <ul class="menu">
        <li><a href="javascript:;">HOME</a>
            <ul class="submenu">
                <li><a href="javascript:;">options</a></li>
                <li><a href="javascript:;">options</a></li>
                <li><a href="javascript:;">options</a></li>
                <li><a href="javascript:;">options</a></li>
                <li><a href="javascript:;">options</a></li>
            </ul>
        </li>
        <li><a href="javascript:;">ABOUT</a>
            <ul class="submenu">
                <li><a href="javascript:;">options</a></li>
                <li><a href="javascript:;">options</a></li>
                <li><a href="javascript:;">options</a></li>
            </ul>
        </li>
        <li><a href="javascript:;">TEAM</a></li>
        <li><a href="javascript:;">NEWS</a></li>
        <li><a href="javascript:;">JALLERY</a></li>
        <li><a href="javascript:;">CONTENT</a></li>
    </ul>
</div>

</body>
</html>

 

转载于:https://www.cnblogs.com/zjz666/p/11163881.html

agzs70106
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css实现旋转菜单栏
Lucky_ze的博客
03-25 772
html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/demo.css"/> <title></title> </head&g...
css3 3d旋转下拉菜单
01-10
"css3 3d 旋转 下拉菜单"是其中一个创新的应用，它将传统的下拉菜单与CSS3的3D变换结合，实现了动态、立体的交互效果。下面我们将深入探讨这个主题，包括CSS3的关键概念、3D变换原理以及如何创建一个3D旋转的下拉...
旋转CSS3下拉菜单
cuken7684698822的博客
08-02 377
Whirling CSS3 dropdown menu CSS3 menu. Various dropdown menus can be easily created with CSS3 with the help of selectors. Just connect your imagination – and you will create a truly new and unique de...
旋转卡片出现动效(css)
m0_52340128的博客
11-05 187
旋转卡片出现动效(css)` 没话说,直接用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
css实现下拉菜单以及下拉箭头旋转效果
wax9092的博客
01-11 9118
下拉菜单动画制作 *{margin:0;padding:0;box-sizing: border-box;list-style: none;} .nav{width: 100%;height: 30px;background: #f2f2f2;} .nav ul{width: 800px;margin:0 auto} .nav ul li{position:relative;float
快速开发超酷的CSS3回转下拉菜单
rains_xy的专栏
11-07 469
http://www.gbtags.com/gb/share/2313.htm
CSS3动画下拉导航菜单
06-05
例如，下拉菜单可以向上旋转90度展开，再向下旋转回原位： ```css @keyframes rotateIn { from { transform: translateY(-100%) rotateX(90deg); opacity: 0; } to { transform: translateY(0) rotateX(0); ...
css3旋转下拉菜单和滑动下拉菜单动画特效
11-19
本话题主要聚焦于使用CSS3实现的旋转和滑动下拉菜单动画特效，这可以极大地提升网站的用户体验和界面的吸引力。 旋转下拉菜单通常指的是主菜单项在被触发时，其子菜单会以旋转的方式展开或收起。这种效果可以通过...
css3 3D下拉菜单特效代码
03-20
本知识点主要聚焦于使用CSS3实现的3D下拉菜单特效代码，这是一种利用3D翻转效果增强用户交互体验的UI设计。 首先，3D下拉菜单的核心在于CSS3的3D转换属性。这些属性包括`transform`, `perspective`, `rotateX`, `...
纯css3实现螺旋状动态旋转导航下拉菜单
06-12
css3实现的导航菜单代码 不需要额外的js实现的动态效果 占用客户端内存极低 当鼠标悬停在一级导航上，二级导航呈现螺旋状效果下拉展示 使用方法： 1、引入lanrenzhijia.css样式 2、将index.html中的...
酷炫下拉框（自行实现，3d翻转效果）
07-28
使用div实现的下拉框，已经封装，并配有例子
CSS3 3D旋转下拉菜单
08-23
这是一款带有3D动画特效的CSS3菜单，该菜单有以下几个特点：首先是菜单时基于CSS3的，因此浏览器兼容性都还可以；其次这款菜单支持二级下拉菜单，功能上也基本能满足大部分开发者；最后这款菜单最大的亮点在于展开下拉菜单时，子菜单可以旋转的展开和收缩，给人3D的视觉效果。
代码-：Dark +，但＃1c1c1c
02-18
代码+主题
实现3D旋转下拉菜单
u014041540的博客
04-20 548
*{ margin: 0; padding: 0; text-decoration:none; } #containter{ margin: 20px; height: 100%; width: 100%; text-align: center; } .menu{ height: 30px; }
颜色代码
badboyer的专栏
12-21 1446
<br />颜色代码大全<br /> <br /> ffff00ffff33ffff66ffff99ffffccffffffffcc00ffcc33ffcc66ffcc99ffccccffccffff9900ff9933ff9966ff9999ff99ccff99ffff6600ff6633ff6666ff6699ff66ccff66ffff3300ff3333ff3366ff3399ff33ccff33ffff0000ff0033ff0066ff0099ff00ccff00ffccff00ccff33cc
css最简单的轮播效果和旋转（跑马灯）效果的实现
z1093541823的博客
04-24 1216
附代码，代码拿来就能用，只需要将图片替换为自己的就可以，和html同级别即可 .
css案例_下拉三角翻转
hupei
06-24 1331
css案例_下拉三角翻转、常见于 下拉导航 、表单下拉多选等场景。
css旋转效果
咸鱼起码是条鱼
05-08 654
除了旋转函数，我们还可以使用 transform-origin 属性来改变元素的旋转中心点。transform-origin 属性指定了元素的中心点，从而决定了元素在旋转时的中心点。常见的旋转函数包括 rotate()、rotateX()、rotateY() 和 rotateZ()，它们分别可以沿着元素的 X、Y 和 Z 轴旋转。transform 属性可以通过一系列的函数来改变元素的形状、大小和位置，其中就包括旋转函数。上面的代码将元素的中心点设置为它的中心位置，从而在旋转时绕着自己的中心点旋转。
请css模仿旋转弹出菜单
最新发布
06-01
好的，可以使用CSS3中的transition和transform属性来实现旋转弹出菜单效果。下面是一份示例代码： HTML代码： ```html <div class="menu"> <button class="menu-btn">菜单</button> <ul class="menu-list"> <li><a href="#">选项1</a></li> <li><a href="#">选项2</a></li> <li><a href="#">选项3</a></li> <li><a href="#">选项4</a></li> </ul> </div> ``` CSS代码： ```css .menu { position: relative; display: inline-block; } .menu-btn { padding: 10px 20px; border: none; background-color: #333; color: #fff; cursor: pointer; } .menu-list { position: absolute; top: 100%; right: 0; background-color: #fff; border: 1px solid #ccc; padding: 10px; list-style: none; transform: rotateX(-90deg); transform-origin: top; transition: transform 0.3s ease-out; opacity: 0; } .menu:hover .menu-list { transform: rotateX(0deg); opacity: 1; } ``` 解释一下代码： 首先，我们将菜单按钮和菜单内容包含在一个`<div>`元素中，并设置该元素的`position`为`relative`。然后，我们给菜单按钮添加样式，包括背景颜色、颜色、边框等。菜单按钮的样式可以根据自己的需要进行调整。 接下来，我们给菜单内容添加样式。我们将菜单内容的`position`设置为`absolute`，并设置`top`和`right`属性使其显示在菜单按钮的下方。我们还设置了菜单内容的背景颜色、边框、内边距和列表样式，使其看起来像一个标准的下拉菜单。 但是，我们并没有让菜单内容默认显示出来。我们使用了CSS3中的`transform`属性，将菜单内容旋转90度，使其不可见。我们还设置了`transform-origin`属性，将旋转的中心点设置在菜单内容的顶部。 接下来，我们使用了CSS3中的`transition`属性，使菜单内容在显示/隐藏时具有动画效果。当鼠标悬停在菜单按钮上时，我们使用CSS伪类`:hover`，将菜单内容的`transform`属性设置为旋转0度，使其显示出来。同时，我们将菜单内容的`opacity`属性设置为1，使其完全可见。 这样就完成了一个简单的旋转弹出菜单效果。您可以根据需要进行调整和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值