欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

基于css3的鼠标经过动画显示详情特效_html/css_WEB-ITnose

程序员文章站 2022-05-09 13:59:49
...
之前为大家分享过一款基于jquery的手风琴显示详情,今天给大家分享基于css3的鼠标经过动画显示详情特效。这款实例鼠标经过的时候基于中间动画放大,效果非常不错,效果图如下:

在线预览 源码下载

实现的代码。

html代码:

 
  • Vakmanschap en ambacht
  • Begeleiding op het werk
  • Leren van elkaar
  • Vaste ploeg
  • RI&E
  • Direct contact

css3代码:

html        {            font-family: 'Noto Sans' , serif;        }                .blocks        {            margin: auto;            max-width: 1070px;            padding: 0;        }                .blocks li        {            color: #fff;            background-color: #2196F3;            cursor: default;            float: left;            list-style: none;            margin: 1%;            padding: 60px 0;            position: relative;            text-align: center;            -webkit-transition: .3s cubic-bezier(.3,0,0,1.3);            transition: .3s cubic-bezier(.3,0,0,1.3);            width: 31%;            border-radius: 4px;            font-weight: bold;        }                .blocks li:hover        {            -webkit-transform: scale(.7);            -ms-transform: scale(.7);            transform: scale(.7);            z-index: 3000;        }                .popup        {            background-color: inherit;            color: #fff;            height: 100%;            width: 100%;            left: 0;            opacity: 0;            position: absolute;            top: 0;            padding: 15px;            border-radius: 4px;            -webkit-transition: .3s cubic-bezier(.3,0,0,1.37);            transition: .3s cubic-bezier(.3,0,0,1.37);        }                .popup span        {            font-size: 12px;            font-weight: normal;            left: 0;            padding: 15px 25px;            position: absolute;            top: 50%;            -webkit-transform: translateY(-50%);            -ms-transform: translateY(-50%);            transform: translateY(-50%);        }                .popup h3        {            font-size: 13px;            margin: 0 0 5px;            padding: 0;        }                .blocks li:hover .popup        {            opacity: 1;            -webkit-transform: scale(2);            -ms-transform: scale(2);            transform: scale(2);            box-shadow: 0 0 10px 2px rgba(0,0,0,.4);        }