利用CSS3实现折角效果实例源码


Posted in HTML / CSS onSeptember 28, 2016

先来看看静态的效果图

利用CSS3实现折角效果实例源码

利用CSS3实现折角效果实例源码

实例代码

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: #eaf0f2;
}
h1{text-align: center;}
.box{width:500px;height:300px;margin:0 auto;position:relative;}
.img-layer{position: absolute;width: 500px;height: 300px;top: 0;left: 0;overflow: hidden;}
.img-layer img {width: 500px;cursor: pointer;}
.img-layer:before{ content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0;
border-color: rgba(0,0,0,0.2) #fff;
border-radius: 0 0 0 4px;
box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-webkit-transition: all 0.4s ease-out;
transition:all 0.4s ease-out;}
.img-layer:hover:before{
border-right-width:100px;
border-bottom-width:100px;
}
</style>
</head>
<body>
<h1>折角效果</h1>
<div class="box">
<div class="img-layer">
<img src="<a href="http://p6.qhimg.com/d/inn/3f563406/table.jpg">http://p6.qhimg.com/d/inn/3f563406/table.jpg</a>" alt="">
</div>
</div>
</body>
</html>

总结
以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用CSS3能有所帮助。谢谢大家对三水点靠木的支持。

HTML / CSS 相关文章推荐
css3动画效果小结(推荐)
Jul 25 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 #HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 #HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 #HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 #HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 #HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 #HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 #HTML / CSS
You might like
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
javascript 闭包详解
2015/07/02 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
jsTree使用记录实例
2016/12/01 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
深入理解Python中的内置常量
2017/05/20 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
2014年党员整改措施
2014/10/24 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
python多线程方法详解
2022/01/18 Python