CSS3 画点好玩的东西
虽然项目赶工还是挺忙的,但闲了总要找点乐子嘛,毕竟秃顶和猝死两座大山夹逼着编程员们。
好吧,其实是无聊起来我自己都怕,于是就做了点小玩意。
.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 画点好玩的东西的更多相关文章
- 纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- 使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...
- 如何使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...
- css3画三角形的原理
以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...
- 如何用CSS3画出一个立体魔方?
前言 最近在写<动画点点系列>文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎 ...
- C# PDF Page操作——设置页面切换按钮 C# 添加、读取Word脚注尾注 C#为什么不能像C/C++一样的支持函数只读传参 web 给大家分享一个好玩的东西,也许你那块就用的到
C# PDF Page操作——设置页面切换按钮 概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者 ...
- 如何用CSS3画出懂你的3D魔方?
作者:首席填坑官∙苏南公众号:honeyBadger8,群:912594095,本文原创,著作权归作者所有,转载请注明原链接及出处. 前言 最近在写<每周动画点点系列>文章,上一期分享了& ...
- 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)
[二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...
- 关于用CSS3画图形的一些思考
众所周知,用CSS3的圆角.转换可以画出各种不同的形状,制作不同的图案,早些前先驱者已画出经典的叮当猫,iphone手机等展示CSS3的强大实力,趁最近有空我也对CSS3进行了一些实践,颇有收获. 用 ...
随机推荐
- 修改Nginx与Apache上传文件大小限制
一.修改Nginx上传文件大小限制 我们使用ngnix做web server的时候,nginx对上传文件的大小有限制. 当超过大小的时候会报413错误. 这个时候我们要修改nginx参数. sudo ...
- Tomcat无法启动:Server Tomcat v8.5 Server at localhost failed to start
Tomcat无法启动 项目状态 Maven项目:基础环境(依赖,基本配置文件)搭建完成,前端页面都导入,部署测试项目环境,出现该问题 问题情景: 1.弹窗提示Tomcat启动失败 2.Console ...
- Shell脚本之监视指定进程的执行状态
在之前的博客中,以前写了自己主动化測试程序的实现方法,如今开发人员须要知道被測试的进程(在此指执行在LINUX上的主进程的)在异常退出之前的进程的执行状态,比如内存的使用率.CPU的使用率等. 现用s ...
- weblogic 8.1教程之部署(三)
在 weblogic 都配置好了之后.就能够部署项目了. 部署项目的时候,能够大体分为两个步骤: 1,创建缓冲池: 2,配置数据源. 先启动 weblogicserver.进入weblogic 的主页 ...
- Error:指向绑定函数的指针只能用于调用函数
a1.determinant; 改为: a1.determinant(); Eigen::MatrixXd a1(,);//ImagePoint a1<<n1,p1,n2,p2; doub ...
- Python中的多进程与多线程/分布式该如何使用
在批评Python的讨论中,常常说起Python多线程是多么的难用.还有人对 global interpreter lock(也被亲切的称为“GIL”)指指点点,说它阻碍了Python的多线程程序同时 ...
- 图像处理之Canny边缘检測
图像处理之Canny 边缘检測 一:历史 Canny边缘检測算法是1986年有John F. Canny开发出来一种基于图像梯度计算的边缘 检測算法,同一时候Canny本人对计算图像边缘提取学科的发展 ...
- Uva12663
题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=110383#problem/C 题目大意:有一些不同高度的桥,会涨几次水,水流初 ...
- 爬虫实战【6】Ajax内容解析-今日头条图集
Ajax技术 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). Ajax并不是新的编程语言,而是一种使用现有标准的新方法,当然 ...
- windows下在Eclipse中启动的tomcat没有乱码,单独部署到tomcat下乱码解决方案
今天遇到了一个很奇怪的问题,在Eclipse中调试,运行项目一切正常,项目的所有编码都是统一的UTF-8.但是在单独部署到tomcat上的时候出现了中文乱码. 解决方案 第一步:确保项目,jsp页面, ...