工作笔记-1

四周边框阴影

www.w3school.com.cn/tiy/t.asp?f…
box-shadow: darkgrey 0px 0px 10px 10px;
jingyan.baidu.com/album/b2c18…

设置滚动条样式

::-webkit-scrollbar {
  width:10px;
  height:3px;
}
::-webkit-scrollbar-thumb {
  background-color:#881120;
  background-clip:padding-box;
  border-radius: 20px;
  min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
  background-color:#bbb;
}

放大缩小动态效果

.rob{
  animation:mymove 2s infinite;
  -webkit-animation:mymove 2s infinite; /*Safari and Chrome*/
  animation-direction:alternate;/*轮流反向播放动画。*/
  animation-timing-function: ease-in-out; /*动画的速度曲线*/
  /* Safari 和 Chrome */
  -webkit-animation:mymove 2s infinite;
  -webkit-animation-direction:alternate;/*轮流反向播放动画。*/
  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
}
@keyframes mymove
{
  0%{transform: scale(0.9);}  
  25%{transform: scale(1.1);}
  50%{transform: scale(0.9);}
  75%{transform: scale(1.1);}
  100%{transform: scale(0.9);}
}

让.fortune_bag有弹跳效果

.fortune_bag.jump{
  animation: jump 1s ease infinite;
}
@keyframes jump{
  0%{ transform:translateY(0) scale(1,1);}
  50%{transform:translateY(-50px) scale(0.97,1.03);}
  100%{transform:translateY(0) scale(1,1);}
}

设置input默认字体颜色：

input::-webkit-input-placeholder { /* WebKit browsers */
  color:#b38f8b;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:#b38f8b;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:#b38f8b;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color:#b38f8b;
}