点击那个点

下载代码

html

css

分享到微信朋友圈

html

css

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

html {
  font-size: 10px;
}

body {
  cursor: none;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
body:hover .c, body.clicked .c {
  display: block;
}
body.windows {
  background: #000;
}

.btn {
  font-size: 2rem;
  color: red;
  padding: 1rem 2rem;
  position: relative;
}
.btn::before, .btn::after {
  position: absolute;
  content: '';
  background: red;
  height: 2px;
  width: 50%;
  left: 0;
  bottom: 0;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  transition: all .2s ease-in;
}
.btn::after {
  right: 0;
  left: auto;
  -webkit-transform-origin: top right;
          transform-origin: top right;
}

/* OS X style (defualt). 
Windows style (below) swapped in as needed */
.c {
  display: none;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  -webkit-transform: rotate(-25deg) translateY(-1.1rem);
          transform: rotate(-25deg) translateY(-1.1rem);
  border-top: 1.1rem solid transparent;
  border-right: .5rem solid transparent;
  border-bottom: 1.1rem solid #222;
  border-left: .5rem solid transparent;
  -webkit-filter: drop-shadow(-0.1rem -0.1rem 0 #fff) drop-shadow(0.1rem 0.1rem 0 #fff) drop-shadow(0.01rem 0.01rem 0.1rem rgba(0, 0, 0, 0.4));
          filter: drop-shadow(-0.1rem -0.1rem 0 #fff) drop-shadow(0.1rem 0.1rem 0 #fff) drop-shadow(0.01rem 0.01rem 0.1rem rgba(0, 0, 0, 0.4));
}
.c::before {
  position: absolute;
  content: '';
  background: #222;
  width: .2rem;
  height: .7rem;
  bottom: -1.6rem;
  left: -.1rem;
}

/* i think windows ones look something like this?: */
.windows .c {
  border-top: 1.2rem solid transparent;
  border-right: .6rem solid transparent;
  border-bottom: 1.3rem solid #222;
  border-left: .6rem solid transparent;
  -webkit-filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.3));
          filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.3));
}
.windows .c::after {
  position: absolute;
  content: '';
  border-top: .9rem solid transparent;
  border-right: .5rem solid transparent;
  border-bottom: 1.1rem solid #fff;
  border-left: .5rem solid transparent;
  top: -.8rem;
  left: -.5rem;
  z-index: 10;
}
.windows .c::before {
  background: #fff;
  bottom: -1.9rem;
  width: .4rem;
  border: 1px solid #222;
  border-top: none;
  left: -0.2rem;
}

.clicked .btn::before {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.clicked .btn::after {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.clicked .c {
  -webkit-animation: 1s 0.2s drop forwards cubic-bezier(0.55, 0.055, 0.675, 0.19);
          animation: 1s 0.2s drop forwards cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

@-webkit-keyframes drop {
  from {
    top: 50%;
    -webkit-transform: rotate(-25deg) translateY(-1.1rem);
            transform: rotate(-25deg) translateY(-1.1rem);
  }
  to {
    top: 100%;
    -webkit-transform: rotate(-125deg) translateY(-1.1rem);
            transform: rotate(-125deg) translateY(-1.1rem);
    margin-top: -1.6rem;
  }
}

@keyframes drop {
  from {
    top: 50%;
    -webkit-transform: rotate(-25deg) translateY(-1.1rem);
            transform: rotate(-25deg) translateY(-1.1rem);
  }
  to {
    top: 100%;
    -webkit-transform: rotate(-125deg) translateY(-1.1rem);
            transform: rotate(-125deg) translateY(-1.1rem);
    margin-top: -1.6rem;
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg