如何用CSS3做简单的渐变效果

最近在看CSS3的视频，看是看了，还得实践一下，先从最简单的小效果来实践吧，这个效果因为自己写错了单词而没有实现，最后找原因，终于找到原因并改正过来。

操作方法

  • 01

    打开DW网页编辑工具，可以新建一个文档写H5页面，并不是传说中的去掉标头，标头可以保留。

  • 02

    不过最好不要保留，按照标准来，标准的不用记住标头，这样能够节省时间。

  • 03

    下面我们来看一下CSS样式代码，代码如下，<style type="text/css">.bian{ width:300px; height:100px;padding:10px;-webkit-transition-property:background-color;-webkit-transition-duration:5s;-webkit-transition-timing-function:ease:}.bian:hover{background-color:#f00; color:#fff;}</style>写的时候注意别把这些CSS3代码写错，写错了可就出不来效果啦。

  • 04

    写完了CSS样式代码，我们来看一下DIV代码，这个很简单。代码如下所示，<div class="bian">这是一个渐变</div>。

  • 05

    这样渐变效果就写好了，在浏览器上打开，鼠标移到文字区域，这块区域由白变红，最终效果如下所示。

  • 06

    鼠标移开后，效果会慢慢变暗，这是鼠标移开3秒后的效果。

  • 07

    这是鼠标没移动到文字区域与鼠标离开大于5秒后的效果。

  • 08

    如果你想把效果看的更好，我们可以把时间设置的更长一些。

赞 (0)

相关推荐

  • 如何用PS做简单的逐帧动画

    在网上我们经常会看到一些简单的动图,其实许多对完整度要求不是很高的gif用PS的时间轴也可以制作,比起那些结构完整情节丰富的动画,用PS做的简单gif动画简洁形象,也多些趣味:当然,只要学会了原理,如 ...

  • 教你如何用PS做简单的封面。

    你还在为没有简单的PS封面教程而苦恼吗?!你还在为教程的素材太多而伤心吗?!快来这里吧!不要素材轻松搞定![注:>^<这个比较适合PS新手,求大神勿嫌弃.] 操作方法 01 首先我们需要打 ...

  • 如何用ps做简单的像素画

    我们都知道像素画是由一个一个的像素点组成的画,今天我就带领大家来看看使用ps是如何画简单的像素画的吧. 操作方法 01 打开ps我们按下Ctrl+N键在弹出的对话框内设置参数如图所示: 02 设置好参 ...

  • 如何用ps做抠图：[1]纯色背景如何抠图

    抠图是ps里的重要组成部分,那么如何用ps做简单的抠图呢?今天,我们就来学习一下最最简单的抠图方法. 操作方法 01 首先,打开ps,使用快捷键ctrl+o,打开图片中的图像. 02 然后在用魔棒工具 ...

  • 如何用word做k线图?word简单制作K线图的方法介绍

    K线图(Candlestick Charts)又称蜡烛图.日本线.阴阳线.棒线等,常用说法是“K线”,因其标画方法具有独到之处,人们把它引入股票市场价格走势的分析中.那么,你知道在word上如何画K线 ...

  • 如何用Excel软件做简单的销售数据分析

    今天小编要和大家分享的是如何用Excel软件做简单的销售数据分析,希望能够帮助到大家. 操作方法 01 首先在我们的电脑桌面上新建一个excel表格并点击它,如下图所示. 02 然后在表格当中输入我们 ...

  • 如何用VB6做一个简单的程序

    用VB可以开发和设计简单的小程序,当我们装好编程软件VB6后,就可以动手编程了,从哪里开始呢,先熟悉界面,然后就可以动手做小程序了,先从简单的开始,慢慢地加深,你会感觉自己也可以编程了.以下步骤就是做 ...

  • 如何用微信做拜年视频，太简单！

    微信作为一种社交软件在我们生活中的地位是很高的,基本上每个人每天会拿起手机看30次的微信.那么如何用微信做拜年视频呢?小编分享下自己的心得体会,希望能帮助到有需要的小伙伴. 操作方法 01 打开手机, ...

  • MAKA H5制作是什么意思?如何用MAKA做一个漂亮的微信H5

    MAKA H5制作是什么意思?如何用MAKA做一个漂亮的微信H5

    MAKA H5制作是一个H5页面制作软件,也就是目前最新的HTML5网络页面,可以在手机上面看,这些网站可以不用代码编辑,除了maka这些网站知名的还有兔展,微页初页之类的. 那么如何用MAKA做一个 ...