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;
}

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

转载于:https://www.cnblogs.com/foreverZ/p/nice-style-with-css3.html

CSS3 画点好玩的东西相关推荐

纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
css 画小黄人,纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
如何用c语言画个叮当猫,如何使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...
用css3画一个哆啦A梦
今天偶然看到朋友用纯css3画了一个素描杯,很受启发,css3这么好玩的代码再不玩就要荒废了,于是决定画个哆啦A梦来复习一下css基础知识.用css作画最重要的就是要做好定位,其次是通过边框属性来切割 ...
css3画一个三角形,css3 画三角形
/*箭头向上*/ .arrow-up { width:0; height:0; border-left:20px solid transparent; border-right:20px solid ...
html设计动画小黄人,纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
好玩的东西，测试一下
好玩的东西,测试一下看到我的blog左边公告栏下面有一个QQ的图标了吗? 点击它就可以给我的QQ发消息了,不用加我为好友当然,前提是你机器上的QQ正在运行着测试一下,我还没用过呢
[css] 使用css3画一个扇形
[css] 使用css3画一个扇形四个半圆叠加,过半调整 z-index .container { width: 200px; height: 200px; position: relative; ...
[css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...

CSS3 画点好玩的东西

CSS3 画点好玩的东西相关推荐

最新文章

热门文章