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

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

.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. 浅谈web前端安全

    单纯地在你的客户端弹出信息只是类似于迫使你在自己的房间脱衣服--没人看得到,自然也不算啥恶意行为.那么如果我把你的信息通过脚本发送到我的服务器保存起来呢?先放心,我不打算这么做,也没那笔闲钱去购置一个 ...

  2. Java中String的split()方法的一些疑问和试验

    http://tjuking.iteye.com/blog/1507855 和我想的还是不大一样,因为不知道源码也不知道具体是怎么实现的,我的理解如下: 当字符串只包含分隔符时,返回数组没有元素:当字 ...

  3. Hibernate命名查询

    hibernate命名的查询是通过一些有意义的名称来使用查询的方式.就类似于使用别名一样. Hibernate框架提供命名查询的概念,以便应用程序员不需要将查询分散到所有的java代码,进一步提高代码 ...

  4. struts.properties文件

    此配置文件提供了一种机制来更改默认行为的框架.其实所有的struts.propertiesconfiguration文件中包含的属性也可以被配置在web.xml中使用的init-param,以及在st ...

  5. Eclipse 创建 Java 项目

    打开新建 Java 项目向导 通过新建 Java 项目向导可以很容易的创建 Java 项目.打开向导的途径有: 通过点击 "File" 菜单然后选择 New > Java P ...

  6. Java-文件上传和下载

    文件上传和下载的原理 设置将表单的两个属性的:method="post",enctype="multipart/form-data",让表单以二进制编码的方式提 ...

  7. Mysql权限体系

    1,MySQL权限体系 MySQL 的权限体系大致分为5个层级: 全局层级: 全局权限适用于一个给定服务器中的所有数据库.这些权限存储在mysql.user表中.GRANT ALL ON .和REVO ...

  8. ios - 视图 渐变

    // // YViewGradient.m // AoleYou20170907 // // Created by XY IOS on 2018/4/25. // Copyright © 2018年 ...

  9. Android获取网络类型

    public static final String NETWORK_CLASS_UNKNOWN = "unknown"; public static final String N ...

  10. Eclipse调试部分手机不显示日志问题解决

    在拨号键盘输入一串指令,然后会进入到工程模式,最后可以在Log设置里面设置了. 华为:*#*#2846579#*#* 酷派:*20121220#