每天积累 CSS3 特效
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- .wrapper {
- max-width: 60rem;
- margin: 0 auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- margin-bottom: 3rem;
- }
- .box {
- width: 15rem;
- height: 20rem;
- padding: 0 2rem 3rem;
- -webkit-transition: opacity 0.5s linear 0.3s,
- -webkit-transform 0.3s linear 0s,
- -webkit-filter 0.5s linear 0.3s;
- transition: opacity 0.5s linear 0.3s,
- -webkit-transform 0.3s linear 0s,
- -webkit-filter 0.5s linear 0.3s;
- transition: transform 0.3s linear 0s,
filter 0.5s linear 0.3s,
opacity 0.5s linear 0.3s;
transition:
transform 0.3s linear 0s,
filter 0.5s linear 0.3s,
opacity 0.5s linear 0.3s,
- -webkit-transform 0.3s linear 0s,
- -webkit-filter 0.5s linear 0.3s;
- }
- .product {
- position: relative;
- width: 100%;
- height: 100%;
- border-radius: 0.2rem;
- background-image: url('//cdn.attach.qdfuns.com/notes/pics/201707/19/110042x7wljmh67ziffe4m.gif');
- background-color: #fff;
- background-position: top 3rem center;
- background-size: 80%;
- background-repeat: no-repeat;
- box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
- -webkit-transition: box-shadow 0.5s linear,
- height 0.1s linear 0s;
- transition:
- box-shadow 0.5s linear,
- height 0.1s linear 0s;
- }
- .name {
- display: block;
- padding: 1rem 0.5rem;
- }
- .description {
- position: absolute;
- bottom: 1rem;
- left: 0;
- right: 0;
- display: block;
- padding: 0 1.5rem;
- opacity: 0;
- -webkit-transition: opacity 0.1s linear 0s;
- transition: opacity 0.1s linear 0s;
- }
- .wrapper:hover .box:not(:hover) {
- -webkit-filter: blur(3px);
- filter: blur(3px);
- opacity: 0.5;
- }
- .box:hover {
- -webkit-transform: scale(1.1);
- transform: scale(1.1);
- -webkit-transition: opacity 0.1s linear 0s,
- -webkit-transform 0.3s linear 0.3s,
- -webkit-filter 0.1s linear 0s;
- transition: opacity 0.1s linear 0s,
- -webkit-transform 0.3s linear 0.3s,
- -webkit-filter 0.1s linear 0s;
- transition: transform 0.3s linear 0.3s,
filter 0.1s linear 0s,
opacity 0.1s linear 0s;
transition:
transform 0.3s linear 0.3s,
filter 0.1s linear 0s,
opacity 0.1s linear 0s,
- -webkit-transform 0.3s linear 0.3s,
- -webkit-filter 0.1s linear 0s;
- }
- .box:hover .product {
- box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
- -webkit-transition: box-shadow 1s linear,
- height 0.3s linear 0.5s;
- transition:
- box-shadow 1s linear,
- height 0.3s linear 0.5s;
- }
- .box:hover .description {
- opacity: 1;
- -webkit-transition: opacity 0.3s linear 0.75s;
- transition: opacity 0.3s linear 0.75s;
- }
- </style>
- <meta charset="utf-8" />
- <title > 模糊效果 </title>
- </head>
- <body>
- <div class="wrapper">
- <div class="box">
- <div class="product">
- </div>
- </div>
- <div class="box">
- <div class="product">
- </div>
- </div>
- <div class="box">
- <div class="product">
- </div>
- </div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/43075/4e1301c7a7958f78b024dcb22d358c4e.html