<!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. S5PV210 时钟体系分析

    S5PV210 时钟体系 如下面时钟结构图所示,S5PV210 中包含 3 大类时钟域, 分别是主系统时钟域(简称 MSYS).显示相关的时钟域(简称 DSYS). 外围设备的时钟域(简称 PSYS) ...

  2. C# 快速释放内存的大数组

    本文告诉大家如何使用 Marshal 做出可以快速释放内存的大数组. 最近在做 3D ,需要不断申请一段大内存数组,然后就释放他,但是 C# 对于大内存不是立刻释放,所以就存在一定的性能问题. 在博客 ...

  3. 前端迷思与React.js

    前端迷思与React.js 前端技术这几年蓬勃发展, 这是当时某几个项目需要做前端技术选型时, 相关资料整理, 部分评论引用自社区. 开始吧: 目前, Web 开发技术框架选型为两种的占 80% .这 ...

  4. UDP服务器/客户端代码示例

    UDP服务器代码: #include <errno.h> #include <string.h> #include <stdlib.h> #include < ...

  5. HDU4825（01字典树）

    Xor Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Others)Total S ...

  6. 【代码笔记】Web-ionic-表单和输入框

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  7. 最全的android学习资料

    一.开发环境搭建 (已完成) 负责人:kris 状态:已完成 所整理标签为:搭建 SDK JDK NDK Eclipse ADT 模拟器 AVD 调试器(DEBUG) DDMS 测试 日志 Logca ...

  8. JavaWeb:Listener和Filter

    本文内容: Listener Filter 首发日期:2018-07-15 Listener 监听器Listener负责监听事件的发生.我们能在事件发生后执行一些自定义的操作,这就是监听器的意义. 监 ...

  9. maven管理项目的特点

    Maven介绍 我们在开发项目的过程中,会使用一些开源框架.第三方的工具等等,这些都是以jar包的方式被项目所引用,并且有些jar包还会依赖其他的jar包,我们同样需要添加到项目中,所有这些相关的ja ...

  10. [20171225]查看并行执行计划注意的问题.txt

    [20171225]查看并行执行计划注意的问题.txt --//如果使用dbms_xplan.display_cursor查看并行执行计划注意一些问题,通过例子说明: 1.环境: SCOTT@book ...