<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>22222</title>
<style>

.form{
width:405px;
height:200px;
background:Yellow;
position:relative;
overflow:hidden;
margin:30px auto;
}
.corner{
background: -webkit-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);

width: 90px;
height:90px;
border-radius: 0 0 0px 90px / 0 0 0 30px;
-webkit-transform: rotate(-90deg);

position: absolute;
left:-4px;
top: -4px;
box-shadow: 5px 2px 8px black;
overflow:hidden;
-webkit-transition:all 0.3s linear 0s;

}

.corner:after{
height:100%;
width:100%;
position: absolute;
content: "56666666666";
top: -15px;
left: -82px;
border-radius: 90px 90px 0px 0 / 40px 40px 0 0;
z-index: 1;
background: Blue;
-webkit-transform: rotate(77deg);

box-shadow: 0px 0px 8px black inset;
}

</style>
</head>
<body>
<div class="page">
<div class="form" id="form">
<div class="corner" id="corner">
</div>
</div>
</div>
<script type="text/javascript">

var form = document.getElementById("form");
var corner = document.getElementById("corner")
var ftop = form.offsetTop;
var fleft = form.offsetLeft;
var switchopen = 0;
corner.onmousedown = function (e) {
e.preventDefault();
form.style.cursor = "move";
switchopen = 1;
}
form.onmousemove = function (e) {
if (switchopen == 1) {
if (e.pageX - fleft > 90 || e.pageY - ftop > 90) {
corner.style.width = corner.style.height = 90 + "px";
corner.style.left = corner.style.top = -4 + "px"
}
else {
corner.style.width = corner.style.height = e.pageY - ftop + "px";

}
}
}
form.onmouseup = function () {
switchopen = 0;
this.style.cursor = "default";
}

</script>
</body>
</html>

css卷叶效果的更多相关文章

  1. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  2. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  3. CSS Shake – 摇摆摇摆！动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  4. Simptip – 使用 Sass 制作的 CSS Tooltip 效果

    Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...

  5. CSS 居中效果完整指南

    本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...

  6. 纯CSS手风琴效果

    CSS手风琴效果 主体代码如下:                                                                                     ...

  7. 按钮制作技巧（css精灵效果）-高级版

    [转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...

  8. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  9. CSS文本效果

    前面的话 本文将详细介绍CSS文本效果 凸版印刷效果 这种效果尤其适用于中等亮度背景配上深色文字的场景:但它也可用于深色底.浅色字的场景,只要文字不是黑色并且背景不是纯黑或纯白就行 [浅色背景深色文本 ...

随机推荐

  1. java Concurrent 中的数据结构

    一:阻塞数据结构(线程安全) ArrayBlockingQueue:一个由数组结构组成的有界阻塞队列. LinkedBlockingQueue:一个由链表结构组成的有界阻塞队列. PriorityBl ...

  2. 在OS X 10.9配置WebDAV服务器联合NSURLSessionUploa…

    CHENYILONG Blog   在OS X 10.9配置WebDAV服务器联合NSURLSessionUploadTask实现文件上传iOS7推出的NSURLSession简化了NSURLConn ...

  3. LCA 算法（一）ST表

    介绍一种解决最近公共祖先的在线算法,st表,它是建立在线性中的rmq问题之上.   代码:   //LCA: DFS+ST(RMQ) #include<cstdio> #include&l ...

  4. ffmpeg查看音频文件信息

    查看音频文件的信息(基于本地路径) import subprocess import json path = r'D:\learn\download\NosVJ60QCIs0b8PVHMPomZJsr ...

  5. DSO 优化代码中的 Schur Complement

    接上一篇博客<直接法光度误差导数推导>,DSO 代码中 CoarseInitializer::trackFrame 目的是优化两帧(ref frame 和 new frame)之间的相对状 ...

  6. 洛谷 P3749: LOJ 2146: [SHOI2017]寿司餐厅

    题目传送门:LOJ #2146. 题意简述: 有 \(n\) 种寿司,第 \(i\) 种寿司的类型为 \(a_i\). 如果你吃了第 \(i\) 种到第 \(j\) 种寿司,你会得到 \(d_{i,j ...

  7. Linux那些事儿之我是Hub(大结局)挂起自动化【转】

    转自:http://blog.csdn.net/fudan_abc/article/details/1805471 目睹了当今大学校园的素质流氓化,kiss公开化,消费白领化,上课梦游化,逃课普遍化, ...

  8. df -h执行卡住不动问题解决【转】

    昨天生产环境报日志写不进去了,因此 登陆线上环境后,习惯用df -h命令查看空间使用情况,结果发现该命令执行半天也没有返回. 因此使用mount命令查看该机器上的目录: [conversant@swi ...

  9. VMWare 虚拟机 安装 Mac OS X

    VMWare安装Mac OS X 随着iPhone.iPad.Mac等苹果产品越来越火爆,越来越多的初学者想要了解和尝试苹果平台,包括苹果操作系统Mac OS X.苹果演示软件Keynote.苹果开发 ...

  10. 常用的 Windows 键

    常用的 Windows 键 Windows 键 + 空格键 功能:透明化所有窗口,快速查看桌面.使用此快捷键可以立即将目前所有打开的窗口透明化,以便查看桌面. Windows 键 + 字母键“D”  ...