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中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 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
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
亚运会口号
2014/06/20 职场文书
明星员工获奖感言
2014/08/14 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
工作感想范文
2015/08/07 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS