纯css画一个樱桃小丸子
纯css3画一个樱桃小小丸子,嘻嘻,废话不多少直接上代码吧!
<div class="main"><div class="head"><div class="liuhai"><div class="triangle_border_down"></div><div class="triangle_border_down"></div><div class="triangle_border_down"></div><div class="triangle_border_down"></div><div class="face"><div class="mm clearfix"><div class="meimao01 me fl"></div><div class="meimao02 me fr"></div></div><div class="yy clearfix"><div class="yes fl yes01"></div><div class="yes fr yes02"></div></div><div class="zui"></div></div><div class="left"></div><div class="right"></div></div><div class="hudei"></div><div class="hud02"></div><div class="yu"></div></div></div>
<style type="text/css">.main {width: 500px;height: 500px;margin: 200px auto;}.triangle_border_down {float: left;width: 0;height: 0;border-width: 30px 30px 0;border-style: solid;border-color: #333333 transparent transparent;/*灰 透明 透明 */}.liuhai {width: 250px;height: auto;margin: 0 auto;position: relative;top: 140px;}.head {background-color: #333333;width: 360px;/*宽度为高度的2倍*/height: 300px;position: relative;border-radius: 200px 200px 0 0;/*圆角半径为高度的值*/}.face {background: #ffffff;width: 240px;/*宽度为高度的2倍*/height: 220px;border: 1px solid #333333;border-radius: 0 0 200px 200px;/*圆角半径为高度的值*/}.left {width: 30px;height: 60px;/*高度为宽度的2倍*/border-radius: 25px 0 0 25px;/*圆角半径为宽度的值*/background: #FFFFFF;position: absolute;left: -20px;top: 60px;}.right {height: 60px;/*高度为宽度的2倍*/width: 30px;position: absolute;right: -15px;top: 60px;border-radius: 0 25px 25px 0;/*圆角半径为宽度的值*/background: #FFFFFF;}.fl {float: left;}.fr {float: right;}.yes { -webkit-animation: fade 5s ease infinite;-moz-animation: fade 5s ease infinite;animation: fade 5s ease infinite;}.yy {margin-top: 10px;}.yes01 {margin-left: 60px;}.yes02 {margin-right: 60px;}.me {width: 50px;height: 20px;border-top: 3px solid #333333;border-radius: 20px 20px 0 0;}.meimao01 {margin-left: 40px;}.meimao02 {margin-right: 40px;}.zui {width: 70px;height: 50px;border-radius: 0 0 60px 60px;background: red;position: relative;top: 50px;left: 85px;}.hudei {width: 0;height: 0;border-width: 50px 50px 0;border-style: solid;border-radius: 60px;position: absolute;right: 17px;top: 5px;transform: rotate(-35deg);border-color: orangered transparent transparent;}.hud02 {width: 0;height: 0;border-width: 50px 50px 0;border-style: solid;border-radius: 60px;position: absolute;right: -10px;top: 40px;transform: rotate(135deg);border-color: orangered transparent transparent;}.yu {width: 40px;height: 40px;border: 1px solid #FFFFFF;background: orangered;border-radius: 50px;position: absolute;right: 34px;top: 23px;}</style>
纯css画一个樱桃小丸子相关推荐
- 用纯CSS画一个萌萌哒的QQ企鹅
今天一时兴起,想用css画个企鹅. 先分析一下结构,页面分为一个容器,里面包括头部.左右眼.鼻子.围巾.肚子.左右脚.左右手共10个div,代码如下: html部分: <div class=&q ...
- html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果(附源码)...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.com ...
- android三角形切图软件,还在为小三角形切图?使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
- 如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画 效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
- html做微信logo,纯CSS实现一个微信logo,需要几个标签?_html/css_WEB-ITnose
博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的 html 标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用 ...
- html怎么画3角型当背景,纯CSS画三角原理解析
纯CSS画三角原理解析 因为之前做一个页面出现了很多三角,开始直接用图片感觉并不是很好用,看着总是怪怪的颜色还很难调整的跟背景一样,就搜了一波代码直接用上了,事后想了一下感觉不知道具体原理是什么,很奇 ...
- java转俯视图,如何使用纯CSS实现一个足球场的俯视图(附源码)
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个足球场的俯视图(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.c ...
- 如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形 第一步 画一个长方形 (Draw a rectangle) 这个长 ...
- html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言 如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理 在按钮中放置一个默认隐藏径向渐变的 ...
最新文章
- 基因组关联分析中的交互作用研究
- 年度最理性 AI 分析文章:预测 AI 未来,大部分人陷入了 7 大误区
- next_permutation(,)用法
- 手势识别兼容Android 1.x和2.x的代码【转】
- 应收应付重组配置和操作解析
- iOS之深入解析Runtime的objc_msgSend“快速查找”底层原理
- 每天一个实用小技巧!教你在Mac上快速输入长文本
- Windows下配置Mysql免安装版
- 被App Store拒绝的N个原因
- CommonLibrary——框架通用工具库
- 化学人学python有前途吗-Java之父点赞的开源Java深度学习框架,你不学下吗?
- python 内置变量
- 猿人学第二题,手撕OB混淆给你看(Step1-开篇)
- steam服务器102修复,steam社区打不开错误代码102解决方法
- 小程序登陆-微信小程序登录-支付宝小程序登录-头条小程序登录
- 网页设计师和网页前端开发我该选择哪一个
- 对傅里叶函数以及级数的理解
- 什么是jquery?简单的jquery代码
- Python 3语法小记(四)字典 dictionary
- 2021-09-10 网安实验-XCTF真题实战之密码学