<!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. JQuery遍历，find()和each()方法

    find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 比如: $("#id") $("#"+"id&q ...

  2. c# Newtonsoft.Json封装

    public static T Deserialize<T>(string content) where T : class, new() { return JsonConvert.Des ...

  3. MVC 获取控制器名称和Action名称（转载）

    MVC在filter中如何获取控制器名称和Action名称   使用ActionExecutingContext对象可以获取控制器名称.Action名称.参数名称以及参数值.路由和Action返回值不 ...

  4. [PHP] 算法-把数组排成最小的数的PHP实现

    输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 解法1 1.数组排序, ...

  5. Python全栈学习_day002作业

    Day2作业及默写 1.判断下列逻辑语句的True,False. 1)1 > 1 or 3 < 4 or 4 > 5 and 2 > 1 and 9 > 8 or 7 & ...

  6. c语言学习笔记-switch

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.switch函数意义 选择性执行 二.switch函数结构 switch(表达式) { case: 常量表达式; 语句1; ...

  7. Python 练习：简单的购物车

    salary = int(input("Please input your salary: ")) msg = ''' 1. iphone6s 5800 2. mac book 9 ...

  8. WebGL学习笔记（一）

    作者:朱金灿 来源:http://blog.csdn.net/clever101 (一)WebGL是什么? WebGL是一门在网页上显示三维图形的技术,你可以把它理解为把OpenGL从C/S端搬到了B ...

  9. Apex 的异常处理

    Apex 中的异常处理 在 Apex 中,和其他语言类似,对于异常处理通常使用 try.catch.finally.throw 等关键字. 对于每一个 try 代码段,必须要有至少一个 catch 或 ...

  10. Docker 加速器设置

    在部署完docker的时候我们需要进行在镜像源下载镜像的时候有时候会出现特别慢的情况(这是因为本地到源的网络出现了问题),这时候就需要使用加速器来对镜像进行下载了,在面咱们就聊一聊docker加速器的 ...