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动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
第三节--定义一个类
2006/11/16 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
python复制文件代码实现
2013/12/23 Python
python中as用法实例分析
2015/04/30 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
大学毕业的自我鉴定
2013/10/08 职场文书
如何做好总经理助理
2013/11/12 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
倡议书格式范文
2014/04/14 职场文书
课外小组活动总结
2014/08/27 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
《实心球》教学反思
2016/02/23 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python