<!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. 【协议】5、gossip 协议

    Gossip是一种去中心化.容错并保证最终一致性的协议. Background:分布式环境 Gossip是为了解决分布式遇到的问题而设计的.由于服务和数据分布在不同的机器上,节点之间的每次交互都伴随着 ...

  2. javascript之揭示模式

    一.该模式优缺点1.优点:该模式可以使脚本语法更加一致,在模块代码底部,它很容易指出哪些函数和变量可以被公开访问,从而改善可读性. 2.缺点:如果一个私有函数引用一个公有函数,公有函数是不能被覆盖的. ...

  3. 10折交叉验证（10-fold Cross Validation）与留一法（Leave-One-Out）、分层采样（Stratification）

    10折交叉验证 我们构建一个分类器,输入为运动员的身高.体重,输出为其从事的体育项目-体操.田径或篮球. 一旦构建了分类器,我们就可能有兴趣回答类似下述的问题: . 该分类器的精确率怎么样? . 该分 ...

  4. spring项目获取ServletContext

    (1)生命周期 ServletContext中的属性的生命周期从创建开始,到服务器关闭而 (2).获取ServletContext 1.request获取servletContext ServletC ...

  5. webpack单独打包一个less文件

    需要将btn.less文件用webpack打包后,放到项目中.在网上百度了各种,遇到了很多问题,现在我将整个步骤整理如下: 1.建一个空的文件夹,命名为init_webpack,在该文件夹下运行: 这 ...

  6. 2017-12-01 中英文代码对比之ZLOGO 4 & LOGO

    基于前文中文编程语言之Z语言初尝试: ZLOGO 4的一些评论, 此文尝试作一个非常简单的代码对比, 使讨论更加有实例根据. 下图是节选自前文最后的示例代码, 由于选取的对照LOGO版本 (alanc ...

  7. 【代码笔记】iOS-tableView滑动的范围函数

    //tableview滑动的范围 -(void)scrollViewDidScroll:(UIScrollView *)scrollView { myTableView.contentSize = C ...

  8. opencv学习网站［国外网站］+ 各种学习资料

    1．Learn OpenCV 使用C++和python和opencv结合编写的教程,上面有丰富的小实验,并且有完整的源码． 2．pyimagesearch python+opencv编写的实例教程,有 ...

  9. Jmeter进阶篇之逻辑控制器

    最近,遇到了一个困扰很多人的问题.情景如下: 业务流程:登录一个网站,反复进行充值. 通常的做法是使用jmeter对登录和充值的接口进行反复的执行: 但是实现的方法却不能完美的贴合业务流程.并且,在进 ...

  10. JavaScript大杂烩8 - 理解文本解析的"黄金搭档"

    文本解析"黄金搭档" - String与RegExp对象 文本解析是任何语言中最常用的功能,JavaScript中也是一样,而正则表达式作为最常用的方式,JavaScript也同样 ...