CSS3径向渐变之大鱼吃小鱼之孤单的大鱼


Posted in HTML / CSS onApril 26, 2016

喜欢钓鱼还没那个技术钓到鱼,下面小编画条大鱼安慰我一下柔弱的心灵。先给大家展示小效果图,如果亲感觉还不错,很满意,请继续往下阅读。

先上图:

CSS3径向渐变之大鱼吃小鱼之孤单的大鱼

上面这个就是今晚上我要跟大家分享的小DEMO,我给他起名字就“大鱼吃小鱼之孤单的大鱼”。

转入正题,这条大鱼分为三部分:头,尾巴,眼睛。首先看一下这条鱼的框架,如下面所示,class已经说得很直接了

CSS Code复制内容到剪贴板
  1. <div class="fish">   
  2.         <div class="fisg-head"></div>   
  3.         <div class="fisg-tail"></div>   
  4.     </div>  

首先给整条鱼做一点小小的处理

CSS Code复制内容到剪贴板
  1. .fish{   
  2.             displayinline-block;   
  3.             position:relative;   
  4.         }  

然后就是精雕细刻了,第一步,绘制鱼头:

CSS Code复制内容到剪贴板
  1. .fisg-head{   
  2.             floatleft;   
  3.             width150px;   
  4.             height150px;   
  5.             border-radius: 100px;   
  6.             background: radial-gradient(0px 100px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,white 113px,green 100px,green 100%);   
  7.             background: -webkit-radial-gradient(0px 100px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,white 113px,green 100px,green 100%);   
  8.             background: -moz-radial-gradient(0px 100px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,white 113px,green 100px,green 100%);   
  9.             background: -ms-radial-gradient(0px 100px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,white 113px,green 100px,green 100%);   
  10.         }  

第二步,绘制尾巴:

CSS Code复制内容到剪贴板
  1. .fisg-tail{   
  2.             floatleft;   
  3.             width100px;   
  4.             height100px;   
  5.             transform: rotate(30deg);   
  6.             -webkit-transform: rotate(30deg);   
  7.             -moz-transform: rotate(30deg);   
  8.             -ms-transform: rotate(30deg);   
  9.             background: radial-gradient(100px 0px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,green 100px,green 100%);   
  10.             background: -webkit-radial-gradient(100px 0px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,green 100px,green 100%);   
  11.             background: -moz-radial-gradient(100px 0px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,green 100px,green 100%);   
  12.             background: -ms-radial-gradient(100px 0px ,rgba(255,255,255,0),rgba(255,255,255,0) 100px,green 100px,green 100%);   
  13.         }  

最后一步,画鱼点睛

CSS Code复制内容到剪贴板
  1. .fisg-head::after{   
  2.             content:"";   
  3.             display:block;   
  4.             position:absolute;   
  5.             top:20px;   
  6.             left:35%;   
  7.             width:20px;   
  8.             height:20px;   
  9.             border-radius:10px;   
  10.             background:rgba(220, 245, 29,1);   
  11.         }  

radial-gradient是CSS3的新特性,这里我是用的其中一种方式去实现的这条大鱼,大家还有其它的高招不妨分享出来,让我也开开眼界。

HTML / CSS 相关文章推荐
详解使用CSS3的@media来编写响应式的页面
Nov 01 HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 #HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 #HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 #HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 #HTML / CSS
CSS3不透明度实例讲解
Apr 26 #HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 #HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 #HTML / CSS
You might like
用session做客户验证时的注意事项
2006/10/09 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
js arguments.callee的应用代码
2009/05/07 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
javascript中 try catch用法
2015/08/16 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
Python抓取百度查询结果的方法
2015/07/08 Python
Python解析最简单的验证码
2016/01/07 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
Sanic框架Cookies操作示例
2018/07/17 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
使用python实现飞机大战游戏
2020/03/23 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
求职信的七个关键技巧
2014/02/05 职场文书
会计人员岗位职责
2014/03/19 职场文书
个人收入证明范本
2014/09/18 职场文书
英文导游词
2015/02/13 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技