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 相关文章推荐
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 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
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
JavaScript经典效果集锦
2010/07/06 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
小程序实现分类页
2019/07/12 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
python如何让类支持比较运算
2018/03/20 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
配置nginx 重定向到系统维护页面
2021/06/08 Servers