<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<meta charset="utf-8" />
<title>CSS3悬停放大图片两边模糊显示 - 站长素材</title>

</head>
<body>
<br><br><br>

<div class="wrapper">
<div class="box">
<div class="product">
<span class="name">T-shirt</span>
<span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</div>
<div class="box">
<div class="product">
<span class="name">T-shirt</span>
<span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</div>
<div class="box">
<div class="product">
<span class="name">T-shirt</span>
<span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</div>
</div>

</body>
</html>

/*css部分*/

body {
margin: 0;
background: #d8f0ea;
}
h1, p, span {
font-family: monospace;
font-weight: 300;
text-align: center;
color: rgba(0, 0, 0, 0.5);
}
h1, h1 + p {
margin: 2rem 1rem;
}
.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;

/*弹性布局 wrap 多行排列自动换行 flexstart 换行后左侧对其效果*/
flex-wrap: wrap;
-webkit-justify-content:flex-start;
justify-content:flex-start;

}
.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;
/*transform-origin: top center;*/
}
.product {
position: relative;
width: 100%;
height: 100%;
border-radius: 0.2rem;
background-image: url(../img/shirts.jpg);
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;

/*yinyingxiaoguo*/
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}
.box:hover {
-webkit-transform: scale(2.2);/*放大倍数*/
transform: scale(2.2);

-webkit-transition: opacity 0.1s linear 0s,/*透明度 linear动画从头到尾的速度是相同的。*/
-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,/*transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。*/
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 {
height: 23rem;
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;
}

css3不错的教程的更多相关文章

  1. HTML5+CSS3网站设计教程 (张晓景,胡克) [iso]

    <HTML5+CSS3网站设计教程>系统地讲解了CSS的基础理论和实际运用技术,并结合多个案例讲解了采用CSS与层布局相结合制作网页的方法,在详细讲解各个案例的制作中,不仅介绍了CSS样式 ...

  2. 32+激发灵感的HTML5/CSS3网页设计教程

      HTML5是寄托在HTML4基础上取得了的广泛成就.这不仅意味着你不必完全放弃现有的一些标记,而是可以借鉴,以加强 它. CSS3也以同样的方式在互联网内容的安排下,提供了它的柔韧性.CSS3是开 ...

  3. 超漂亮的CSS3按钮制作教程分享

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 利用CSS3属性制作按钮,我们只需要用到G ...

  4. CSS3 box-shadow快速教程

    box-shadow 属性向框添加一个或多个阴影.这个CSS3的属性很常用,盒阴影.按钮状态等各种地方都有用到,但是你了解并记住各个参数的作用及用法吗? 展示 源码:http://codepen.io ...

  5. CSS3 3D笨蛋教程

    英文原文An Introduction to CSS 3-D Transforms 爱因斯坦说所有概念都必须介绍给儿童们,若他们无法了解,这些理论就毫无价值. 透视 一个元素需要一个透视点才能激活3D ...

  6. 关于学习springboot和springcloud的很不错的教程

    近日,逐步开始学习了springboot和springcloud.本以为很简单,但是随着学习的深入,发现其中有很多地方都需要认真揣摩.凡事都需要循序渐进,有一个好的开端就是成功的一半.于是在浩瀚的网络 ...

  7. CSS3 Flex 布局教程

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

  8. HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型

    本教程案例在线演示 有路网PC端 有路网移动端 教程配套源码资源 教程配套源码资源 div div 可定义文档中的分区(division). div 标签可以把网页分割为独立的.不同的部分. 可以看成 ...

  9. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

随机推荐

  1. jsonp请求

    发起一个jsonp请求 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q ...

  2. 使用css的类名交集复合选择器 《转》

    复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器.“并集”选择器.“后代”选择器. 交集选择器 “交集”复合选择器是由两个选择器直接连接构成,其结果是选中二者各 ...

  3. IdentityServer4-客户端定义-翻译

    客户端定义(Defining Client) 客户端可以从你的IDS服务器请求tokens. 通常,客户端需要遵循下面的通用设置: 一个唯一的Client ID 如果需要还可以提供密码 允许与toke ...

  4. 【Spring】20、使用TransactionSynchronizationManager在spring事务提交之后进行一些操作。

    本文内容 如何在spring事务提交之后进行一些操作,这些操作必须得在该事务成功提交后才执行,回滚则不执行. 要点 如何在spring事务提交之后操作 如何在spring事务回滚之后操作 实现方案 使 ...

  5. 2018 年终总结 & 2019 年度计划

    坎坷的今年,茫然的明年 <2017 年终总结 & 2018 年度计划> 2018 年度计划完成情况: 1.健身时间不少于350天:  未完成 借口很多,但结果就一个——懒   2. ...

  6. C语言字符串读入函数笔记

    gets(str)函数和scanf("%s",str)区别: 转自:https://zhidao.baidu.com/question/290403568.html 二者都是从终端 ...

  7. 【读书笔记】iOS-手势识别

    一,事件处理机制 事件是当用户手指触及屏幕,或地屏幕上滑动,或摇晃设备等时候,系统不断地把这些事件通过消息发送给应用程序对象.在iOS设备中能够捕获的事件有3种:触摸事件,移动事件和多媒体远程控制事件 ...

  8. React 入门学习笔记整理（七）—— 生命周期

    (1)react 生命周期 只有类组件有生命周期,函数组件没有生命周期 1.挂载阶段:这些方法会在组件实例被创建和插入DOM中时被调用: 1)constructor(props) 初始化组件的状态.绑 ...

  9. 从零开始学习html（二）认识标签(第一部分)——上

    一.语义化,让你的网页更好的被搜索引擎理 学习html标签过程中,主要注意两个方面的学习:标签的用途.标签在浏览器中的默认样式. 标签的用途:我们学习网页制作时,常常会听到一个词,语义化. 那么什么叫 ...

  10. Android系统启动流程 总结

    整体流程大致如下:   Android系统的启动,主要是指Android手机关机后,长按电源键后,Android手机开机的过程.从系统角度看,Android的启动程序可分为:   1.bootload ...