教大家用html/css简单写一个心形，表白必学

1，建议大家使用Sublime编辑软件去编写，先给大家看个效果图

二，教程开始，图像是由三个图像合成的，两个圆形，一个正方形，大部分用div布局完成的

1，首先建一个大的div

效果图

2，建一个圆形，首先画一个正方形，新建多一个div，css的width属性为260~270px吧，height为150px吧，然后再通过border-radius这个属性把弧边化，

设置border-radius: 50%，把背景颜色改成红色，然后用overflow属性把多出来多出来就切掉

效果图

3，新建一个div，class为r，class名字自己可以起多一个起的，建多一个圆形，使用步骤2的方法新建多一个一样的圆形，然后用相对定位relative或者绝对定位absolute的方法把第二个圆形定位在右边，

如图

效果图

4，然后用div画一个正方形用定位方法定位到中心点，再用transform:translate这个属性把图形旋转45度，

如图

效果图

5，可以通过@keyframes这个来添加特效

transform:后面自己可以添加自己想要的效果

完，代码在下面

源码我也就不发了，

同样方法可以弄两个心形

教大家用html/css简单写一个心形，表白必学相关推荐

html5效果浪漫表白,程序员用HTML5做了一个心形表白特效，其实我们也懂浪漫！...
520爱心表白特效谁说程序员不懂浪漫? 曾经有一份真挚的爱情摆在我面前,但是我没有珍惜,[因为我是程序员] 等到了失去的时候才追悔莫及,尘世间最痛苦的事莫过于此. 如果老天可以再给我一个再来一次的机 ...
python自动填写小程序表单_新年好！教大家用Python写一个自动回复拜年信息的小程序！...
原标题:新年好!教大家用Python写一个自动回复拜年信息的小程序! 过年期间,想必大家都收到很多拜年信息吧!有没有也被拜年短信(大部分是群发)搞得很焦虑?不回复似乎显得很没有礼貌,一一回复又累心劳神 ...
教大家用按键精灵写一个快手自动抢红包脚本
教大家用按键精灵写一个快手自动抢红包脚本先设计好界面,为了节省大家的时间,界面方面我们早就设计好了,请看下面设计好界面后就进入写代码的步骤,这个其实你可以先录制一遍,然后把录制的代码进行二次修改, ...
利用Html,Css,javaScript简单写一个计算一天秒的倒计时
利用Html,Css,javaScript简单写一个计算一天还剩多少秒的倒计时页面代码我放下面,不多,就是我那个背景图我没有用精灵图,主要拼接太麻烦了,我直接img了,然后display:none; ...
animation基础练习源码_用vue简单写一个音乐播放组件「附源码」
作者:vipbic 转发链接:https://segmentfault.com/a/1190000022980992 前言上次小编也分享一个关于Vue 开发过音乐播放对项目: 基于 electron ...
小福利，教大家用excel函数实现切片器的功能
小福利,教大家用excel函数实现切片器的功能源数据如下图所示我们要实现的效果是如下图: 当我们选择不同街道的时候,会显示出所有的楼盘名称和价格,制作成柱状图第一步,选择所有街道名称复制到she ...
用HTML，css,boostrap写一个综合大型购物网站
用HTML,css,boostrap写一个综合大型购物网站首先来看看页面的效果: 有需要的可以参考首先是首页index: <!DOCTYPE html> <html>< ...
如何用最简洁的css代码写一个导航栏
如何用最简洁的css代码写一个导航栏首先我们在里面通过标签添加一个logo,然后通过标签简单的设置几个导航栏中的内容. 注:标签主要是用于设置超链接. <div><img src= ...
[css] 手写一个满屏品字布局的方案
[css] 手写一个满屏品字布局的方案 <!DOCTYPE html> <html><head><meta name="viewport" ...

教大家用html/css简单写一个心形，表白必学

教大家用html/css简单写一个心形，表白必学相关推荐

最新文章

热门文章