利用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实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
Dec 24 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 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 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
PHP children()函数讲解
2019/02/03 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
PHP PDO操作总结
2014/11/17 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
python使用mysql的两种使用方式
2018/03/07 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Python tkinter常用操作代码实例
2020/01/03 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
小区门卫岗位职责
2013/12/31 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL