虽然项目赶工还是挺忙的,但闲了总要找点乐子嘛,毕竟秃顶和猝死两座大山夹逼着编程员们。

好吧,其实是无聊起来我自己都怕,于是就做了点小玩意。

.heart {
position: relative;
transform: rotate(45deg);
width: 3em;
height: 3em;
background: red;
margin: 50px auto;
}
.heart:before, .heart:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
  border-radius: 100%;
}
.heart:before {transform: translate(-50%,0);}
.heart:after {transform: translate(0,-50%);}

画个桃心送给女朋友(没错,我没法让她变成空心的,要空心的话那就去玩玩 Font Awesome 什么的吧)

.warning {
position: relative;
width: 0;
height: 0;
font-size: 2rem;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
border-bottom: 2em solid #e67e22;
text-align: center;
line-height: 2em;
}
.warning:after {
content: "!";
font-size: 2em;
color: #fff;
position: absolute;
transform: translate(-50%,0);
}

警告,你的污力已超标(改掉 .warning 的 font-size 就能改整体大小咯)

.chooseButton {
position: relative;
font-size: 1rem;
width: 4em;
height: 2em;
display: inline-block;
background: lightblue;
border: 1px solid #ccc;
border-radius: 1000px;
transition: .3s;
}
.chooseButton:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
border-radius: 100%;
background: #fff;
transition: .3s;
}
.chooseButton:focus {
background: pink;
}
.chooseButton:focus:after {
left: 50%;
}

这个倒是挺简单的,到时候把 :focus 换成类然后与事件绑定,是个不错的表单

.word {
color: lightblue;
text-shadow: 0 1px 0 #999, 0 2px 0 #888, 0 3px 0 #777, 0 4px 0 #666, 0 5px 0 #555, 0 4px 8px #000;
}

好吧好吧,先放这些吧,以后再来一波...

CSS3 画点好玩的东西的更多相关文章

  1. 纯CSS3画出小黄人并实现动画效果

    前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...

  2. 使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...

  3. 如何使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...

  4. css3画三角形的原理

    以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...

  5. 如何用CSS3画出一个立体魔方?

    前言 最近在写<动画点点系列>文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎 ...

  6. C# PDF Page操作——设置页面切换按钮 C# 添加、读取Word脚注尾注 C#为什么不能像C/C++一样的支持函数只读传参 web 给大家分享一个好玩的东西,也许你那块就用的到

    C# PDF Page操作——设置页面切换按钮   概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者 ...

  7. 如何用CSS3画出懂你的3D魔方?

    作者:首席填坑官∙苏南公众号:honeyBadger8,群:912594095,本文原创,著作权归作者所有,转载请注明原链接及出处. 前言 最近在写<每周动画点点系列>文章,上一期分享了& ...

  8. 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)

    [二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...

  9. 关于用CSS3画图形的一些思考

    众所周知,用CSS3的圆角.转换可以画出各种不同的形状,制作不同的图案,早些前先驱者已画出经典的叮当猫,iphone手机等展示CSS3的强大实力,趁最近有空我也对CSS3进行了一些实践,颇有收获. 用 ...

随机推荐

  1. plsql programming 08 字符串

    一般, char 和 nchar 类型很少使用. 建议使用 varchar2 和 nvarchar2, 其中( n 开头的是国家字符集, 没有n开头的是数据库字符集 ) 一般也不怎么使用国家字符集 v ...

  2. spark 1.3 发布了

    悄悄地,spark 还是像往常一样,发布了1.3版本,从release notes可以看出,这一版本比较大的变化是1. 增加了DataFrame API,这样以后操作一些结构化的数据集时将会变的非常方 ...

  3. Eclipse 重启选项

    重启 Eclipse 重启选项允许用户重启 Eclipse. 我们可以通过点击 File 菜单选择 Restart 菜单项来重启 Eclipse. 在安装插件后,用户一般都会被提醒要重启 Eclips ...

  4. poj 2195(KM求最小权匹配)

    题目链接:http://poj.org/problem?id=2195 思路:我们都知道KM使用来求最大权匹配的,但如果要求最小权匹配,只需把图中的权值改为负值,求一次KM,然后权值和取反即可. ht ...

  5. iOS --转载2018苹果$299美元企业级开发者账号申请攻略

    前言篇 现在苹果企业级开发者账号申请十分严格,大部分企业都无法申请下来,本人尝试过多次申请,现将一些审核技巧分享出来,希望能帮到你们通过申请,需要帮助请看本文最后 2018年6月7号申请成功案例   ...

  6. 绝对定位position: absolute;

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. java中InputStream转化为byte[]数组

    //org.apache.commons.io.IOUtils.toByteArray已经有实现 String filePath = "D:\\aaa.txt"; in = new ...

  8. 带参数的main函数

    带参数的main函数 int main(int argc,char **argv)  或int main(int argc,char *argv[])  /*解析 依据<C程序设计语言(第二版. ...

  9. httpclient设置proxy与proxyselector

    If single proxy for all targets is enough for you: HttpComponentsClientHttpRequestFactory clientHttp ...

  10. android菜鸟学习笔记29----Android应用向用户发送提示信息的方式总结

    常见的向用户发送提示信息的方式有3种,分别为: 1)发送Toast信息 2)弹出对话框 3)发送通知 总结如下: 方式1:发送Toast信息: 这种方式最简单,在之前的学习中多次使用过.Toast是在 ...