0
篇帖子
之前学css3的时候,搜百度怎么也搜不到画心形的办法,偶然看到这个方法就马克下来权当笔记,下面代码。
用 CSS3 画心形
1、先来个class=“heart”的div
2、讲上面的 div 整成红色的正方形,然后转 45 度变成个菱形样
.heart { position: relative; width: 300px; height: 300px; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); background: red; }3、通过:after和:before伪元素,画两个一样大小的圆
.heart:before, .heart:after { position: absolute; display: block; content: “; width: 300px; height: 300px; border-radius: 100%; background: red; }4、把上面的两个圆移到div适当的位置,心形就出来了
.heart:before { left: -50%; top: 0; } .heart:after { right: 0; top: -50%; }5、最后效果,可以给它加个 css3 动画效果,实现心脏跳动的动画(缩小一倍后居中显示):
1、新建个div,或者span什么的
.ex-search { position: relative; }2、用:before伪元素画一个圆并给一些内阴影,内阴影根据需要调整
.ex-search:before { content: ‘ ‘; position: absolute; width: 30px; height: 30px; border: 1px solid #666; border-radius: 30px; box-shadow: inset 1px 1px 10px rgba(0,0,0,.3); }3、用:after伪元素画一个放大镜手柄状图,要是够无聊还可以 css3 渐变一下,并旋转 45 度,旋转度数可以按自己需要设定
.ex-search::after { content: ‘ ‘; position: absolute; width: 18px; height: 5px; background: #666; border-radius: 5px 0 0 5px; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); }4、把上面两部画的图形移动到一起组合成一个放大镜的图标,实际位置根据实际情况调整
.ex-search:before { top: 0; left: 0; } .ex-search:after { right: -42px; bottom: -36px; }5、最后效果,可以结合其他 hover 什么的效果使用
在字体图标面前,这些都是浮云,就是无聊玩玩。摘自:不亦乐乎
本博客内所有原创和翻译的文章的版权归本人所有,允许第三方转载,但转载时请务必保留作者名,并注明出处链接,否则本人将保留追究其法律责任的权利。
「人生在世,留句话给我吧」