利用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 开发工具收集
Apr 17 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
css3高级选择器使用方法
Dec 02 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
使用CSS连接数据库的方式
Feb 28 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下使用无限生命期Session的方法
2007/03/16 PHP
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
php获取远程文件内容的函数
2015/11/02 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
javascript 打印内容方法小结
2009/11/04 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
语文教育专业推荐信范文
2013/11/25 职场文书
单位实习鉴定评语
2015/01/04 职场文书
Python基础之元编程知识总结
2021/05/23 Python