border-radius结合transition的一个小应用（动画）

<head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box{            display:block;            height:350px;            width:250px;            background:#ddd;            cursor:pointer;            -webkit-transition: 0.4s;            -moz-transition: 0.4s;            -ms-transition: 0.4s;            -o-transition: 0.4s;            transition: 0.4s;        }        .box:hover{            border-top-right-radius:180px 120px;background: rgba(246,246,247,0.9);        }    </style></head><body><a class="box"></a></body></html>
时间： 2024-10-29 19:08:57

border-radius结合transition的一个小应用（动画）的相关文章

CSS3实现一个小风车【纯DOM+CSS3】

前言 用CSS3实现了一个小风车的效果...转转转,挺简单.. 效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小风车-转啊转</title> <style type="text/css"> html { font-size: 10px; } html * {

一个小效果引出的兼容性探讨

最近在做个小效果,没想到引出了几个以前的没认真去自己探讨的兼容问题,最后虽然这个效果还是不是很满意,但在这里想分享一下过程 首先想做的效果是 每次点击页面时,出现一个小波纹,然后自动消失 可以先看一下demo 到最后实现后,发现这个效果实用性不是很高,但是过程引出了一些值得积累的问题 引出知识点: transition的兼容支持 事件兼容 transitionend的兼容 如果我out了,请点击关闭 首先看一下 transition 的兼容性 1 <span style="font-siz

【二次元的CSS】—— 用 DIV + LESS 做一个小黄人构造器

仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各个细节的形状,当然也不会使用任何图片哦.那就没意思了. 有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了. 这次用到了一些LESS的特性,通过设置一些指定的参数来生成不同种类.不同身材的小黄人. GitHub传送门:https://github.com/lancer07/css3Minons 效果是这个样子的 首先 先做个标准版的(ps:也就是图中的第一个小黄人

10分钟，利用canvas画一个小的loading界面（顺便讨论下绘制效率问题）

首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" style="border: 1px solid #808080;display: block;margin: 100px auto;>你的游览器不支持canvas</canvas> 这里主要要说的就是宽高,不要在style里面定义,不然会被拉伸.(对于这点,建议大家看下W3c文档,不是很

10分钟，利用canvas画一个小的loading界面

首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" style="border: 1px solid #808080;display: block;margin: 100px auto;>你的游览器不支持canvas</canvas> 这里主要要说的就是宽高,不要在style里面定义,不然会被拉伸.(对于这点,建议大家看下W3c文档,不是很

制作一个小黄鸭转圈跳舞的页面。

我们来制作一个小黄鸭转圈跳舞的页面. 分析一下 1.分析一下这个页面,要完成这些效果,一共需要3步: 把鸭子都放到一个盒子当中 在盒子里,把每个鸭子的位置摆好 让盒子旋转 2.让鸭子在盒子中的位置摆好,需要怎么做: 先让鸭子站在圆心的位置(需要先了解父相子绝定位方式) 沿一个方向移动一个半径的距离(3d) 每个鸭子旋转一个角度,让鸭子均匀的分布一圈 开始写代码 要用到的知识包括几个HTML标签和一部分的css知识. 先把图片放到页面里边. 先来在页面中添加一个img标签,将小黄鸭跳舞的gif图放

关于链表的一个小程序

关于链表的一个小程序: /**************************链表*****************************//* 具备功能 *//* 链表按元素位置插入 *//* 链表按元素位置删除 *//* 链表全表遍历 *//* 链表整表创建(头插法) *//* 链表整表创建(尾插法) *//* 链表整表删除 *//**************************链表*****************************/ #include<stdio.h>#in

原创观点：还在认为企业或个人只能申请一个小程序吗？

今天第一次体验了整个小程序注册流程,使用的是我自己的这个简单的教程(个人无appid如何进行申请开发者权限,简单操作步骤),教程虽然是我的,我自己却没有真的实践过,真是误人子弟,自己也不一定能知道:今天亲自测试了一下:首先走完邮箱验证: 验证完毕后,开始进入信息登录,这里,有一些关键信息,是本文观点的主要支撑: 请输入管理员的身份证号码,一个身份证号码只能注册5个小程序. 然后填写完毕后,到了第二个关键点: 为了验证你的身份,请用绑定了管理员本人银行卡的微信扫描二维码. 这个点,透露了两个信息,

先做一个“小程序”——关于微信应用号的六大猜想

先做一个“小程序”——关于微信应用号的六大猜想 9月 21 日,苦等了9个多月的时间,应用号终于与我们见面了,命名为「小程序」. 01 为什么推出小程序? 考虑到小程序对整个APP市场的影响,毫无疑问会对现有的APP生态带来一定的冲击.但是,之所以推出小程序,最直接的原因可能是为了构建和扩充微信生态链,让微信更具开放性. 如我们所知,目前微信公众号分为三类: • 服务号,连接人和商品,目前很多电商企业,以及在微信端提供产品和服务的企业都用服务号. • 订阅号,微信官方的定位是阅读,连接人和资讯的