利用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 27 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 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通过COM使用ADODB的简单例子
2006/12/31 PHP
收集的PHP中与数组相关的函数
2007/03/22 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
linux下php上传文件注意事项
2016/06/11 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
PHP实现简易图形计算器
2020/08/28 PHP
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
pandas 对group进行聚合的例子
2019/12/27 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
怎样自定义一个异常类
2016/09/27 面试题
教育学专业实习生的自我鉴定
2013/11/26 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
春节联欢会策划方案
2014/05/16 职场文书
幼师求职信
2014/06/23 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python