1. 首页首页
  2. 编程笔记编程笔记

2024年html下拉菜单代码

编程笔记 • • 阅读 0

html下拉菜单代码CSS 语言 CSSSCSS 确定 html background rgba 0 0 0 0 03 body text align center font family Open Sans h1 display block font size 42px

CSS

语言：

CSSSCSS

确定

html {

background: rgba(0, 0, 0, 0.03);

}

body {

text-align: center;

font-family: Open Sans;

}

h1 {

display: block;

font-size: 42px;

text-align: center;

font-weight: 300;

margin: 40px 0px 20px 0px;

}

.heartIt {

margin-top: 50px;

margin-bottom: 80px;

}

.heartIt p {

font-size: 24px;

line-height: 40px;

}

.heartIt img {

width: 64px;

height: auto;

}

.sepLine {

width: 70px;

height: 1px;

background-color: rgba(0, 0, 0, 0.4);

margin-top: 20px;

margin-bottom: 10px;

display: inline-block;

left: 50%;

}

.auth {

font-weight: 400;

color: black;

position: relative;

display: block;

}

.auth a {

color: black;

font-weight: 400;

}

a {

text-decoration: none;

}

.container {

-moz-perspective: 1000;

-webkit-perspective: 1000;

perspective: 1000;

max-width: 560px;

/*

position:absolute;

left:50%;

@include transform(translate3d(-50%,0,0));*/

display: inline-block;

}

.circCont {

display: inline-block;

}

.circle {

width: 40px;

height: 40px;

background: transparent;

border: 4px solid #e91e63;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

position: relative;

cursor: pointer;

display: inline-block;

margin: 10px 20px;

}

.circle:after {

width: 24px;

height: 4px;

background-color: #e91e63;

content: "";

left: 50%;

top: 50%;

margin-left: -12px;

margin-top: -2px;

position: absolute;

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

/*@include transform-origin(100%,100%);*/

transform: rotate(-45deg);

}

.circle:before {

left: 50%;

top: 50%;

margin-left: -12px;

margin-top: -2px;

width: 24px;

height: 4px;

background-color: #e91e63;

content: "";

position: absolute;

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

/*@include transform-origin(0%,0%);*/

transform: rotate(45deg);

}

.circle + p {

text-transform: lowercase;

font-size: 14px;

margin-bottom: 10px;

}

.simpleRotate {

-moz-animation: rotate 0.1s 2 ease-in-out alternate;

-webkit-animation: rotate 0.1s 2 ease-in-out alternate;

animation: rotate 0.1s 2 ease-in-out alternate;

}

@-moz-keyframes rotate {

0% {

-moz-transform: scale(1);

transform: scale(1);

}

100% {

-moz-transform: scale(0.8);

transform: scale(0.8);

}

}

@-webkit-keyframes rotate {

0% {

-webkit-transform: scale(1);

transform: scale(1);

}

100% {

-webkit-transform: scale(0.8);

transform: scale(0.8);

}

}

@keyframes rotate {

0% {

-moz-transform: scale(1);

-ms-transform: scale(1);

-webkit-transform: scale(1);

transform: scale(1);

}

100% {

-moz-transform: scale(0.8);

-ms-transform: scale(0.8);

-webkit-transform: scale(0.8);

transform: scale(0.8);

}

}

.circle[data-animation="simpleRotate"]:not(.simpleRotate) {

-moz-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

-o-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

-webkit-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

}

.circle[data-animation="simpleRotate"]:not(.simpleRotate):hover {

-moz-transform: scale(1.1);

-ms-transform: scale(1.1);

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

.circle[data-animation="rotateY"] {

-moz-transition: 300ms ease-in-out;

-o-transition: 300ms ease-in-out;

-webkit-transition: 300ms ease-in-out;

transition: 300ms ease-in-out;

}

.circle[data-animation="rotateY"]:after {

-moz-transition-delay: 150ms;

-o-transition-delay: 150ms;

-webkit-transition-delay: 150ms;

transition-delay: 150ms;

}

.circle[data-animation="rotateY"]:before {

-moz-transition-delay: 150ms;

-o-transition-delay: 150ms;

-webkit-transition-delay: 150ms;

transition-delay: 150ms;

}

.circle[data-animation="rotateX"] {

-moz-transition: 300ms ease-in-out;

-o-transition: 300ms ease-in-out;

-webkit-transition: 300ms ease-in-out;

transition: 300ms ease-in-out;

}

.circle[data-animation="rotateX"]:after {

-moz-transition-delay: 150ms;

-o-transition-delay: 150ms;

-webkit-transition-delay: 150ms;

transition-delay: 150ms;

}

.circle[data-animation="rotateX"]:before {

-moz-transition-delay: 150ms;

-o-transition-delay: 150ms;

-webkit-transition-delay: 150ms;

transition-delay: 150ms;

}

.rotateY {

-moz-transform: rotateY(180deg) scale(0.5);

-ms-transform: rotateY(180deg) scale(0.5);

-webkit-transform: rotateY(180deg) scale(0.5);

transform: rotateY(180deg) scale(0.5);

}

.rotateY:after {

-moz-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

.rotateY:before {

-moz-transform: rotate(90deg);

-ms-transform: rotate(90deg);

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

}

.rotateX {

-moz-transform: rotateX(180deg) scale(0.5);

-ms-transform: rotateX(180deg) scale(0.5);

-webkit-transform: rotateX(180deg) scale(0.5);

transform: rotateX(180deg) scale(0.5);

}

.rotateX:after {

-moz-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

.rotateX:before {

-moz-transform: rotate(90deg);

-ms-transform: rotate(90deg);

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

}

.scaleUp:not(.scaleDown):not(.minimize) {

-moz-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.575);

-o-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.575);

-webkit-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.575);

transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.575);

}

.scaleUp:not(.scaleDown):not(.minimize):hover {

-moz-transform: scale(1.2);

-ms-transform: scale(1.2);

-webkit-transform: scale(1.2);

transform: scale(1.2);

}

.scaleUp:not(.scaleDown):not(.minimize):hover:after {

-moz-transform: scale(1.1) rotate(45deg);

-ms-transform: scale(1.1) rotate(45deg);

-webkit-transform: scale(1.1) rotate(45deg);

transform: scale(1.1) rotate(45deg);

}

.scaleUp:not(.scaleDown):not(.minimize):hover:before {

-moz-transform: scale(1.1) rotate(-45deg);

-ms-transform: scale(1.1) rotate(-45deg);

-webkit-transform: scale(1.1) rotate(-45deg);

transform: scale(1.1) rotate(-45deg);

}

.scaleDown {

-moz-transition: 300ms ease-in-out;

-o-transition: 300ms ease-in-out;

-webkit-transition: 300ms ease-in-out;

transition: 300ms ease-in-out;

-moz-transform: scale(0);

-ms-transform: scale(0);

-webkit-transform: scale(0);

transform: scale(0);

}

.minimize {

-moz-transition: 300ms ease-in-out;

-o-transition: 300ms ease-in-out;

-webkit-transition: 300ms ease-in-out;

transition: 300ms ease-in-out;

-moz-transform: scale(0.3);

-ms-transform: scale(0.3);

-webkit-transform: scale(0.3);

transform: scale(0.3);

}

.boxShadow {

-moz-transition: box-shadow 200ms ease-out, -moz-transform 200ms ease-out, opacity 200ms ease-in-out;

-o-transition: box-shadow 200ms ease-out, -o-transform 200ms ease-out, opacity 200ms ease-in-out;

-webkit-transition: box-shadow 200ms ease-out, -webkit-transform 200ms ease-out, opacity 200ms ease-in-out;

transition: box-shadow 200ms ease-out, transform 200ms ease-out, opacity 200ms ease-in-out;

}

.boxShadow:after,

.boxShadow:before {

-moz-transition: 400ms linear;

-o-transition: 400ms linear;

-webkit-transition: 400ms linear;

transition: 400ms linear;

}

.boxShadow:hover:not(.fadeOut) {

-moz-box-shadow: 0px 0px 0px 20px #e91e63 inset;

-webkit-box-shadow: 0px 0px 0px 20px #e91e63 inset;

box-shadow: 0px 0px 0px 20px #e91e63 inset;

-moz-transform: scale(0.8);

-ms-transform: scale(0.8);

-webkit-transform: scale(0.8);

transform: scale(0.8);

}

.boxShadow:hover:not(.fadeOut):after {

background-color: #fff;

-moz-transform: rotate(-45deg) scale(0.6);

-ms-transform: rotate(-45deg) scale(0.6);

-webkit-transform: rotate(-45deg) scale(0.6);

transform: rotate(-45deg) scale(0.6);

}

.boxShadow:hover:not(.fadeOut):before {

background-color: #fff;

-moz-transform: rotate(45deg) scale(0.6);

-ms-transform: rotate(45deg) scale(0.6);

-webkit-transform: rotate(45deg) scale(0.6);

transform: rotate(45deg) scale(0.6);

}

.fadeOut {

opacity: 0;

}

.circle[data-animation="magnify"]:not(.magnify) {

-moz-transition: 100ms ease-in-out;

-o-transition: 100ms ease-in-out;

-webkit-transition: 100ms ease-in-out;

transition: 100ms ease-in-out;

}

.circle[data-animation="magnify"]:not(.magnify):hover {

-moz-transform: scale(0.9);

-ms-transform: scale(0.9);

-webkit-transform: scale(0.9);

transform: scale(0.9);

}

.circle.magnify {

-moz-transition: 200ms ease-in-out;

-o-transition: 200ms ease-in-out;

-webkit-transition: 200ms ease-in-out;

transition: 200ms ease-in-out;

-moz-transform: scale(1.6);

-ms-transform: scale(1.6);

-webkit-transform: scale(1.6);

transform: scale(1.6);

opacity: 0;

}

.fromMiddle:before,

.fromMiddle:after {

z-index: 9999;

-moz-transition-delay: 150ms;

-o-transition-delay: 150ms;

-webkit-transition-delay: 150ms;

transition-delay: 150ms;

-moz-transition: 400ms ease-in-out;

-o-transition: 400ms ease-in-out;

-webkit-transition: 400ms ease-in-out;

transition: 400ms ease-in-out;

}

.fromMiddle span {

width: 44px;

height: 44px;

background-color: #e91e63;

display: inline-block;

position: absolute;

-moz-border-radius: 100%;

-webkit-border-radius: 100%;

border-radius: 100%;

left: -2px;

top: -2px;

z-index: -9999;

-moz-transform: scale(0.3);

-ms-transform: scale(0.3);

-webkit-transform: scale(0.3);

transform: scale(0.3);

opacity: 0;

-moz-transition: 300ms ease-in-out;

-o-transition: 300ms ease-in-out;

-webkit-transition: 300ms ease-in-out;

transition: 300ms ease-in-out;

}

.fromMiddle:hover:before,

.fromMiddle:hover:after {

position: absolute;

background-color: #fff;

}

.fromMiddle:hover span {

-moz-transform: scale(1);

-ms-transform: scale(1);

-webkit-transform: scale(1);

transform: scale(1);

opacity: 1;

}

.circle[data-animation="downBorder"] {

-moz-transition: 200ms ease-out;

-o-transition: 200ms ease-out;

-webkit-transition: 200ms ease-out;

transition: 200ms ease-out;

}

.circle[data-animation="downBorder"]:hover:not(.downBorder) {

-moz-transform: rotate(10deg);

-ms-transform: rotate(10deg);

-webkit-transform: rotate(10deg);

transform: rotate(10deg);

}

.downBorder {

border: 4px solid transparent;

-moz-transform: scale(0.3) rotate(45deg);

-ms-transform: scale(0.3) rotate(45deg);

-webkit-transform: scale(0.3) rotate(45deg);

transform: scale(0.3) rotate(45deg);

}

.circle[data-animation="radiusPlus"] {

-moz-transition: 300ms ease-out;

-o-transition: 300ms ease-out;

-webkit-transition: 300ms ease-out;

transition: 300ms ease-out;

}

.circle[data-animation="radiusPlus"]:before,

.circle[data-animation="radiusPlus"]:after {

-moz-transition: 300ms ease-out;

-o-transition: 300ms ease-out;

-webkit-transition: 300ms ease-out;

transition: 300ms ease-out;

}

.radiusPlus {

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

-moz-transform: scale(0.7);

-ms-transform: scale(0.7);

-webkit-transform: scale(0.7);

transform: scale(0.7);

}

.radiusPlus:before {

-moz-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

.radiusPlus:after {

-moz-transform: rotate(-90deg);

-ms-transform: rotate(-90deg);

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

}

.circle[data-animation="shrinkRadius"] {

-moz-transition: 400ms ease-in-out;

-o-transition: 400ms ease-in-out;

-webkit-transition: 400ms ease-in-out;

transition: 400ms ease-in-out;

}

.circle[data-animation="shrinkRadius"]:after,

.circle[data-animation="shrinkRadius"]:before {

-moz-transition: 400ms ease-in-out;

-o-transition: 400ms ease-in-out;

-webkit-transition: 400ms ease-in-out;

transition: 400ms ease-in-out;

}

.circle.shrinkRadius {

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

-moz-transform: scale(0.3);

-ms-transform: scale(0.3);

-webkit-transform: scale(0.3);

transform: scale(0.3);

}

.circle.shrinkRadius:before {

-moz-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

.circle.shrinkRadius:after {

-moz-transform: rotate(-90deg);

-ms-transform: rotate(-90deg);

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

}

.circle[data-animation="xMarks"] {

border: 0px solid white;

overflow: hidden;

-moz-box-shadow: 0px 0px 0px 0px #e91e63 inset;

-webkit-box-shadow: 0px 0px 0px 0px #e91e63 inset;

box-shadow: 0px 0px 0px 0px #e91e63 inset;

-moz-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

-o-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

-webkit-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

}

.circle[data-animation="xMarks"]:before,

.circle[data-animation="xMarks"]:after {

-moz-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

-o-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

-webkit-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

}

.circle[data-animation="xMarks"]:not(.xMarks):hover {

-moz-box-shadow: 0px 0px 0px 6px #e91e63 inset;

-webkit-box-shadow: 0px 0px 0px 6px #e91e63 inset;

box-shadow: 0px 0px 0px 6px #e91e63 inset;

}

.circle[data-animation="xMarks"]:not(.xMarks):hover:before {

-moz-transform: scale(0.7) rotate(45deg);

-ms-transform: scale(0.7) rotate(45deg);

-webkit-transform: scale(0.7) rotate(45deg);

transform: scale(0.7) rotate(45deg);

-moz-transition-delay: 100ms;

-o-transition-delay: 100ms;

-webkit-transition-delay: 100ms;

transition-delay: 100ms;

}

.circle[data-animation="xMarks"]:not(.xMarks):hover:after {

-moz-transform: scale(0.7) rotate(-45deg);

-ms-transform: scale(0.7) rotate(-45deg);

-webkit-transform: scale(0.7) rotate(-45deg);

transform: scale(0.7) rotate(-45deg);

-moz-transition-delay: 100ms;

-o-transition-delay: 100ms;

-webkit-transition-delay: 100ms;

transition-delay: 100ms;

}

.circle.xMarks {

-moz-transition: -moz-transform 400ms ease-out, opacity 200ms ease-in;

-o-transition: -o-transform 400ms ease-out, opacity 200ms ease-in;

-webkit-transition: -webkit-transform 400ms ease-out, opacity 200ms ease-in;

transition: transform 400ms ease-out, opacity 200ms ease-in;

-moz-transition-delay: opacity 100ms;

-o-transition-delay: opacity 100ms;

-webkit-transition-delay: opacity 100ms;

transition-delay: opacity 100ms;

-moz-transform: scale(2);

-ms-transform: scale(2);

-webkit-transform: scale(2);

transform: scale(2);

opacity: 0;

-moz-box-shadow: 0px 0px 0px 20px #e91e63 inset;

-webkit-box-shadow: 0px 0px 0px 20px #e91e63 inset;

box-shadow: 0px 0px 0px 20px #e91e63 inset;

}

.circle.xMarks:before {

background-color: white;

-moz-transform: scale(2) rotate(45deg);

-ms-transform: scale(2) rotate(45deg);

-webkit-transform: scale(2) rotate(45deg);

transform: scale(2) rotate(45deg);

}

.circle.xMarks:after {

background-color: white;

-moz-transform: scale(2) rotate(-45deg);

-ms-transform: scale(2) rotate(-45deg);

-webkit-transform: scale(2) rotate(-45deg);

transform: scale(2) rotate(-45deg);

}

.circle[data-animation="showShadow"] {

-moz-box-shadow: 0px 0px 0px 0px #e91e63 inset;

-webkit-box-shadow: 0px 0px 0px 0px #e91e63 inset;

box-shadow: 0px 0px 0px 0px #e91e63 inset;

-moz-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

-o-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

-webkit-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

border: 0px solid white;

}

.circle[data-animation="showShadow"]:before,

.circle[data-animation="showShadow"]:after {

-moz-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

-o-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

-webkit-transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

transition: 200ms cubic-bezier(0.175, 0.885, 0.52, 1.775);

}

.circle[data-animation="showShadow"]:not(.showShadow):hover {

-moz-box-shadow: 0px 0px 0px 6px #e91e63 inset;

-webkit-box-shadow: 0px 0px 0px 6px #e91e63 inset;

box-shadow: 0px 0px 0px 6px #e91e63 inset;

}

.circle[data-animation="showShadow"]:not(.showShadow):hover:before {

-moz-transform: scale(0.7) rotate(45deg);

-ms-transform: scale(0.7) rotate(45deg);

-webkit-transform: scale(0.7) rotate(45deg);

transform: scale(0.7) rotate(45deg);

-moz-transition-delay: 100ms;

-o-transition-delay: 100ms;

-webkit-transition-delay: 100ms;

transition-delay: 100ms;

}

.circle[data-animation="showShadow"]:not(.showShadow):hover:after {

-moz-transform: scale(0.7) rotate(-45deg);

-ms-transform: scale(0.7) rotate(-45deg);

-webkit-transform: scale(0.7) rotate(-45deg);

transform: scale(0.7) rotate(-45deg);

-moz-transition-delay: 100ms;

-o-transition-delay: 100ms;

-webkit-transition-delay: 100ms;

transition-delay: 100ms;

}

.circle.showShadow {

-moz-transition: 300ms ease-out;

-o-transition: 300ms ease-out;

-webkit-transition: 300ms ease-out;

transition: 300ms ease-out;

-moz-transform: scale(0);

-ms-transform: scale(0);

-webkit-transform: scale(0);

transform: scale(0);

opacity: 0;

}

.followlinks {

position: fixed;

right: 35px;

bottom: 15px;

display: table;

}

.followlinks a {

display: table-cell;

vertical-align: middle;

padding-left: 10px;

color: black;

}

知秋君
知秋君

知秋君

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请关注公众号“全栈程序员社区”联系小编举报，一经查实，本站将立刻删除。
上一篇 2024-11-12 21:36
下一篇 2024-11-16 10:55

相关推荐