广州建网站兴田德润可信,南京企业建站系统模板,重庆今天的新消息,找一个网站做优化分析前言
本文给大家分享三个具有过渡效果的汉堡图标#xff0c;当点击汉堡图标时#xff0c;过渡为叉号图标。这种具有过渡特效的图标挺炫酷的#xff0c;感觉一下子给网页增加一点新颖特色。早在2015年左右#xff0c;国外挺多优秀门户网站都有使用类似的图标#xff0c;那…前言
本文给大家分享三个具有过渡效果的汉堡图标当点击汉堡图标时过渡为叉号图标。这种具有过渡特效的图标挺炫酷的感觉一下子给网页增加一点新颖特色。早在2015年左右国外挺多优秀门户网站都有使用类似的图标那时不知道怎么实现现在研究了一下大概是使用了CSS伪类和动画的技巧来实现。
一、示例代码
1/src/views/Example/HamburgerIcon/index.vue
templatediv classhamburger-icondiv classhamburger-icon-boxdiv classhamburger-1 :classisActiveHamburger1 ? : is-active clickisActiveHamburger1 !isActiveHamburger1span classline /span classline /span classline //div/divdiv classhamburger-icon-boxdiv classhamburger-2 :classisActiveHamburger2 ? : is-active clickisActiveHamburger2 !isActiveHamburger2span classline /span classline /span classline //div/divdiv classhamburger-icon-boxdiv classhamburger-3 :classisActiveHamburger3 ? : is-active clickisActiveHamburger3 !isActiveHamburger3span classline /span classline /span classline //div/div/div
/templatescript
export default {data: () ({isActiveHamburger1: true,isActiveHamburger2: true,isActiveHamburger3: true,}),methods: {// Todo }
}
/scriptstyle langless scoped.hamburger-icon {display: flex;width: 100%;height: 100%;background-color: #2c3e50;.hamburger-icon-box {position: relative;flex: 1;display: table;margin: auto;}/* ---- ^ hamburger-1 ---- */.hamburger-1 {position: relative;width: 100px;margin: auto;:hover {cursor: pointer;}.line {width: 40px;height: 5px;background-color: #ffffff;border-radius: 5px;display: block;margin: 7.5px auto;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}.is-active .line:nth-child(1) {-webkit-transform: translateY(12.5px) rotate(45deg);-ms-transform: translateY(12.5px) rotate(45deg);-o-transform: translateY(12.5px) rotate(45deg);transform: translateY(12.5px) rotate(45deg);}.is-active .line:nth-child(2) {opacity: 0;}.is-active .line:nth-child(3) {-webkit-transform: translateY(-12.5px) rotate(-45deg);-ms-transform: translateY(-12.5px) rotate(-45deg);-o-transform: translateY(-12.5px) rotate(-45deg);transform: translateY(-12.5px) rotate(-45deg);}}/* ---- / hamburger-1 ---- *//* ---- ^ hamburger-2 ---- */.hamburger-2 {position: relative;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;:hover {cursor: pointer;}.line {width: 40px;height: 5px;background-color: #ffffff;border-radius: 5px;display: block;margin: 8px auto;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}:before {content: ;position: absolute;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 70px;height: 70px;border: 5px solid transparent;top: calc(50% - 35px);left: calc(50% - 35px);border-radius: 100%;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}.is-active {-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}.is-active:before {border: 5px solid #ecf0f1;}.is-active .line {width: 35px;}.is-active .line:nth-child(1) {-webkit-transform: translateY(13px);-ms-transform: translateY(13px);-o-transform: translateY(13px);transform: translateY(13px);}.is-active .line:nth-child(2) {opacity: 0;}.is-active .line:nth-child(3) {-webkit-transform: translateY(-13px) rotate(90deg);-ms-transform: translateY(-13px) rotate(90deg);-o-transform: translateY(-13px) rotate(90deg);transform: translateY(-13px) rotate(90deg);}}/* ---- / hamburger-2 ---- *//* ---- ^ hamburger-3 ---- */.hamburger-3 {position: relative;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;:hover {cursor: pointer;}.line {width: 40px;height: 5px;background-color: #ffffff;border-radius: 5px;display: block;margin: 8px auto;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}.is-active {animation: smallbig 0.6s forwards;}.is-active .line:nth-child(1) {-webkit-transform: translateY(13px) rotate(45deg);-ms-transform: translateY(13px) rotate(45deg);-o-transform: translateY(13px) rotate(45deg);transform: translateY(13px) rotate(45deg);}.is-active .line:nth-child(2) {opacity: 0;}.is-active .line:nth-child(3) {-webkit-transform: translateY(-13px) rotate(-45deg);-ms-transform: translateY(-13px) rotate(-45deg);-o-transform: translateY(-13px) rotate(-45deg);transform: translateY(-13px) rotate(-45deg);}.hamburger-3.is-active .line:nth-child(1),.hamburger-3.is-active .line:nth-child(2),.hamburger-3.is-active .line:nth-child(3) {-webkit-transition-delay: 0.2s;-o-transition-delay: 0.2s;transition-delay: 0.2s;}keyframes smallbig {0%, 100% {-webkit-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}50% {-webkit-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);}}}/* ---- / hamburger-3 ---- */}
/style二、运行效果
