css: button

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.trapdoor {
  -webkit-transform: translateZ(0px);
  -webkit-font-smoothing: antialiased;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -25px;
  width: 200px;
  height: 50px;
  box-shadow: inset -7px 0px 12px -8px rgba(0,0,0,0.3), inset 7px 0px 12px -8px rgba(0,0,0,0.3);
  background: rgba(0,0,0,0.3);
  -webkit-transition: background 400ms ease-in-out;
  -moz-transition: background 400ms ease-in-out;
  -ms-transition: background 400ms ease-in-out;
  -o-transition: background 400ms ease-in-out;
  transition: background 400ms ease-in-out;
   
  &:hover {
    background: #fff;
     
    .door {
       box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.4);
       -webkit-transform: scale(1.08);
       -moz-transform: scale(1.08);
       -ms-transform: scale(1.08);
       -o-transform: scale(1.08);
       transform: scale(1.08);
    }

　　

 

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
input[type="button"],
input[type="submit"],
    button,
    .button {
    border-radius: 15px 15px 15px 15px;
    background: #f3e8e6; /* Old browsers */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3e8e6), color-stop(100%,#f3e8e6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f3e8e6 0%,#f3e8e6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f3e8e6 0%,#f3e8e6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f3e8e6 0%,#f3e8e6 100%); /* IE10+ */
    background: linear-gradient(top,  #f3e8e6 0%,#f3e8e6 100%); /* W3C */
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(255,255,255, .22);
}

　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
 
#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; / Safari 4+ /
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; / Fx 5+ /
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; / Opera 12+ /
  animation:         NAME-YOUR-ANIMATION 5s infinite; / IE 10+, Fx 29+ /
}

　　

　

posted @   ®Geovin Du Dream Park™  阅读(37)  评论(0)  编辑  收藏  举报
相关博文：
·  css: normalize.css
·  CSS: Button with Gradient Border
·  教务管理系统之css层
·  CSS input 蛮好看的
·  自设园子之导航页面
阅读排行：
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 按钮权限的设计及实现
历史上的今天：
2021-12-07 Python: open excel file
2015-12-07 sql server: sql script
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示
SQL AI 助手