HTML+CSS画一朵向日葵
前几天看到一张图片，倔强的向日葵。（BGM，《倔强》）
看着挺有感触，就想用CSS做一个向日葵。
最终效果图如下：
演示地址：
http://suohb.com/work/sunflower.html
主要的难点就在花瓣的处理上，css暂时没有做到这样的尖角圆弧。
我想到的做法是用两个椭圆的部分弧度截取出来，拼接成一个花瓣样式。
原理如下：
CSS部分
.petal{
position:absolute;
width:50px;
height:130px;
transform-origin:50% 150%;
opacity:.9;
}
.petal > div:nth-child(1){
position:absolute;
left:;
top:;
width:50%;
height:100%;
overflow:hidden;
}
.petal > div:nth-child(1) > div{
position:absolute;
left:;
top:-20px;
width:160px;
height:250px;
background:#F00;
border-radius:50%;
box-shadow: 0 0 5px #000;
}
.petal > div:nth-child(2){
position:absolute;
left:50%;
top:;
width:50%;
height:100%;
overflow:hidden;
}
.petal > div:nth-child(2) > div{
position:absolute;
right:;
top:-20px;
width:160px;
height:250px;
background:#F00;
border-radius:50%;
border-radius:50%;
box-shadow: 0 0 5px #000;
}
HTML部分：
<div class="petal">
<div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
这样就画出一个花瓣，
然后我们将花瓣使用js创建出来，新增一个花瓣外层div#box；将生成的花瓣插入里边。花瓣的的transform-origin属性为正下方一段距离。复制并旋转
代码如下：
function addPetal(){
var len = 21 ,
i = 0 ,
scale = 1 ,
var fragment = document.createDocumentFragment();
for(i = 0 ; i < len ; i ++){
fragment.appendChild(getOnePetal(scale,Math.round(360/len*i)));
}
box.appendChild(fragment);
}
function getOnePetal(size,deg){
var div = document.createElement("div");
div.className = "petal" ;
div.innerHTML = "<div><div></div></div><div><div></div></div>";
div.style.left = 155 + "px";
div.style.top = 0 ;
div.style.transform = "rotate("+deg+"deg) scale("+size+")";
return div ;
}
现在基本上已经看出向日葵的轮廓，我们将花瓣多复制几层，越向内层越小。给花瓣加点阴影有写层次感。
到这里就完成一大半了，然后做向日葵中心部分，画一个渐变色圆，给他加一些线条。
先在向日葵中心圆上部话一般圆形div，只要border。设置tranform-origin到向日葵的中心位置。复制这个圆并旋转。得到下图：
这也是一个很有意思的图形。给中心圆加上overflow:hidden;放在向日葵中心
做到这里主要难点都已经做完了。接下来就是把花瓣主色调改成黄色渐变，花瓣角度做一点随机处理，中心加一些花蕊，就得到了一颗向日葵。
更多特效请关注这个微信公众号
最终完整代码：
<!doctype html>
<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<style type="text/css">
.petal{
position:absolute;
width:50px;
height:130px;
transform-origin:50% 150%;
opacity:.9;
}
.petal > div:nth-child(1){
position:absolute;
left:0;
top:0;
width:50%;
height:100%;
overflow:hidden;
}
.petal > div:nth-child(1) > div{
position:absolute;
left:0;
top:-20px;
width:160px;
height:250px;
background-image:linear-gradient(95deg,#fef10c 0%,#ffc701 8%,#fef10c 15%,#ffc701 20%);
box-shadow:0 0 10px rgba(0,0,0,.3);
border-radius:50%;
}
.petal > div:nth-child(2){
position:absolute;
left:50%;
top:0;
width:50%;
height:100%;
overflow:hidden;
}
.petal > div:nth-child(2) > div{
position:absolute;
right:0;
top:-20px;
width:160px;
height:250px;
background-image:linear-gradient(-95deg,#fef10c 0%,#ffc701 8%,#fef10c 15%,#ffc701 20%);
box-shadow:0 0 10px rgba(0,0,0,.3);
border-radius:50%;
}
#box{
width:370px;
height:370px;
margin: 0 auto;
position: relative;
}
.pistilShadow{
position:absolute;
left: 180px;
top:195px;
width:120px;
height:120px;
border-radius:50%;
transform:translate(-50%,-50%);
box-shadow: -5px 5px 80px #bd3d0e;
}
.pistil{
position:absolute;
left: 180px;
top:195px;
width:160px;
height:160px;
border-radius:50%;
transform:translate(-50%,-50%);
box-shadow: 0 0 80px #bd3d0e inset;
background:#325302;
overflow:hidden;
}
.pistilLine{
position:absolute;
left:20%;
top:-50%;
transform-origin: center bottom;
width:60%;
height:100%;
border-radius:50%;
border:solid 1px #2f1307;
}
.pistil2{
position:absolute;
left: 180px;
top:195px;
width:60px;
height:60px;
border-radius:50%;
transform:translate(-50%,-50%);
box-shadow: 0 0 25px #bd3d0e inset;
background:#325302;
}
.dot{
position:absolute;
left:28px;
top:0;
width:4px;
height:4px;
border-radius:50%;
background:#fded00;
box-shadow: 0 0 15px #fded00 inset;
transform-origin:center 30px;
}
</style>
</head>
<body>
<div id="box"></div>
<script> function addPetal(){
var len = 21 ,
layer = 3 ,
i = 0 ,
j = 0 ,
changeScale = 0.1 ,
scale = 1 ,
div;
var fragment = document.createDocumentFragment();
var pistil = document.createElement("div");
pistil.className = "pistil" ;
var pistil2 = document.createElement("div");
pistil2.className = "pistil2" ; for(j = 0 ; j < layer ; j ++){
for(i = 0 ; i < len ; i ++){
fragment.appendChild(getOnePetal(scale,Math.round(360/len*i + Math.random()*10)));
}
div = document.createElement("div");
div.className = "pistilShadow" ;
fragment.appendChild(div);
len -= 5 ;
scale -= changeScale ;
changeScale += changeScale ;
}
len = 40 ;
for(var i = 0 ;i < len ; i ++){
div = document.createElement("div");
div.className = "pistilLine" ;
div.style.transform = "rotate("+Math.round(360/len*i)+"deg)" ;
pistil.appendChild(div);
}
len = 30;
scale = 1 ;
changeScale = 0.15 ;
for(j = 0 ; j < layer ; j ++){
for(i = 0 ; i < len ; i ++){
pistil2.appendChild(getOneDot(scale,Math.round(360/len*i+j*10)));
}
len -= 4 ;
scale -= changeScale ;
}
fragment.appendChild(pistil);
fragment.appendChild(pistil2); box.appendChild(fragment);
}
function getOnePetal(size,deg){
var div = document.createElement("div");
div.className = "petal" ;
div.innerHTML = "<div><div></div></div><div><div></div></div>";
div.style.left = 155 + "px";
div.style.top = 0 ;
div.style.transform = "rotate("+deg+"deg) scale("+size+")";
return div ;
}
function getOneDot(size,deg){
var div = document.createElement("div");
div.className = "dot" ;
div.style.transform = "rotate("+deg+"deg) scale("+size+")";
return div ;
}
addPetal();
</script>
</body>
</html>
HTML+CSS画一朵向日葵的更多相关文章
- 一步一步教你用CSS画爱心
今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- Effective前端3：用CSS画一个三角形
p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 用css画图标
css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一 ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- CSS画三角形引发的一些思考
今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...
随机推荐
- 用Eclipse生成JPA元模型
在JPA criteria 动态查询中,有个"元模型"的东西,它是根据"实体"类动态生成的一个类,它的主要作用是实现JPA criteria查询的"类 ...
- javascript编程解决黑化的牛牛问题
问题描述 时间限制:1秒 空间限制:32768K 牛牛变得黑化了,想要摧毁掉地球.但他忘记了开启地球毁灭器的密码.牛牛手里有一个字符串S,牛牛还记得从S中去掉一个字符就恰好是正确的密码,请你帮牛牛求出 ...
- Angular4.0从入门到实战打造在线竞拍网站学习笔记之四--数据绑定&管道
Angular4.0基础知识之组件 Angular4.0基础知识之路由 Angular4.0依赖注入 数据绑定 数据绑定允许你将组件控制器的属性和方法与组件的模板连接起来,大大降低了开发时的编码量. ...
- Linux(3)用户和权限管理
用户, 权限管理 Linux中root账号通常用于系统的维护和管理, 它对操作系统的所有部分具有不受限制的访问权限 在Unix/Linux安装过程中, 系统会自动创建许多用户账号, 而这些默认的用户就 ...
- 数据结构与算法--KMP算法查找子字符串
数据结构与算法--KMP算法查找子字符串 部分内容和图片来自这三篇文章: 这篇文章.这篇文章.还有这篇他们写得非常棒.结合他们的解释和自己的理解,完成了本文. 上一节介绍了暴力法查找子字符串,同时也发 ...
- Given n pairs of parentheses, write a function to generate all combinations of well-formed parentheses. For example, given n = 3, a solution set is: "((()))", "(()())", "(())()", "()(())", "()()()"
思路:采用递归的思想,当左括号数大于右括号数时可以加左或者右括号,否则只能加左括号,当左括号数达到n时,剩下全部.不过,每一个方法的调用都会产生一个栈帧,每执行一个方法就会出现压栈操作,所以采用递归的 ...
- [算法题] Remove Duplicates from Sorted Array ii
题目内容 本题来源LeetCode Follow up for "Remove Duplicates": What if duplicates are allowed at mos ...
- JS正则密码复杂度校验之：JS正则匹配半角英文符号
概述 在JS密码校验中常常会遇到密码强度的校验需求,借用一位朋友提问的图,他在工作中遇到的一个比较经典的密码强度校验要求: 这个需求有两个难点,一,是如何使用正则匹配所有半角英文标点符号,二,是如何验 ...
- Python爬虫从入门到放弃（二十四）之 Scrapy登录知乎
因为现在很多网站为了限制爬虫,设置了为只有登录才能看更多的内容,不登录只能看到部分内容,这也是一种反爬虫的手段,所以这个文章通过模拟登录知乎来作为例子,演示如何通过scrapy登录知乎 在通过scra ...
- IE10 特有 MSGesture() 方法
gesturechange方法 是 ie10以上特有的方法. 初始化:oMsg = new MSGesture(); 主要功能和方法: 用于IE下浏览器的DOM元素触发事件 包括 : MSGestur ...