返回顶部

收藏

CSS模拟android电视盒子卡片选中变大特效

更多
/* 核心样式 */
.card {
    /* 定义过渡属性,就是平滑的变大,看起来不会那么生硬  */
    transition: all 1s 1 ease-in-out;
    /* webkit写法,现在的chrome版本已经支持transition这种方式了 */
    -webkit-transition: all 1s 1 ease-in-out;
}
.card:hover,.card:focus {
    /* 依次定义变换、阴影、阴影的动画  */
    transform: scale(1.2);
    box-shadow: 2px 4px 6px #555555;
    animation: glow 1500ms ease-out infinite alternate;

    -webkit-transform: scale(1.2);
    -webkit-box-shadow: 2px 4px 6px #555555;
    -webkit-animation: glow 1500ms ease-out infinite alternate;

    outline: none;
}

/* 阴影的呼吸灯效果 */
@keyframes glow {
    0% {
        border-color: #FFF;
        box-shadow: 0 0 5px 5px transparent;
    }   
    100% {
        border-color: #FFF;
        box-shadow: 0 0 10px 5px #FFF;
    }
}
@-webkit-keyframes glow {
    0% {
        border-color: #FFF;
        box-shadow: 0 0 5px 5px transparent;
        -webkit-box-shadow: 0 0 5px 5px transparent;
    }   
    100% {
        border-color: #FFF;
        box-shadow: 0 0 10px 5px #FFF;
        -webkit-box-shadow: 0 0 10px 5px #FFF;
    }
}

标签:css

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. 设计 达人 发表 2017-12-20 13:30:28 小创意:圣诞球切换开关
  2. zak 发表 2017-12-19 02:20:44 css禁止鼠标事件
  3. Leon 发表 2017-12-19 13:28:08 通过css修改select下拉列表框的默认样式
  4. asuncool@gmail.com(y 发表 2017-12-15 03:32:59 网页加载了CSS,却不生效的奇葩问题
  5. 米豆网 - 1000seo 发表 2017-12-05 08:32:33 纯css 实现 Star Rating
  6. zee 发表 2017-01-18 03:57:48 按钮加载效果实现
  7. 博主 发表 2017-12-03 00:00:00 Web Animation API - 在 JavaScript 中释放 CSS keyframes
  8. Ian McBurnie 发表 2015-11-04 08:00:00 How Our CSS Framework Helps Enforce Accessibility
  9. ayqy 发表 2017-11-12 04:33:41 外边距合并规则
  10. 朱本威 发表 2017-12-07 09:45:22 前端不止:Retina屏幕下两倍图
  11. Airen 发表 2017-11-29 14:02:00 CSS overscroll-behavior
  12. Airen 发表 2017-12-05 13:18:07 使用Firefox 网格检查器调试 CSS网格布局

发表评论