`
jsntghf
  • 浏览: 2511457 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

渐变打分条

阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
    <title>渐变效果</title>
    <style type="text/css">
      .ffbg
      {
        background-image: url(1.gif);
        background-repeat: no-repeat;
        background-position: 0px 0px;
        height: 55px;
        width: 296px;
      }
      .fft
      {
        background-image: url(2.gif);
        background-repeat: no-repeat;
        background-position: 0px 0px;
        height: 22px;
        width: 28px;
        color: #FFFFFF;
        text-align: center;
        font-size: 12px;
        float:right;
      }
    </style>
  </head>
  <body>
    <div style="left:200px; top: 20px; width: 300px; height: 59px; padding-top: 2px;"> 
      <div class="ffbg">
        <div id="divIn" style="width: 90%">
          <span class="fft">90</span>      
        </div>
      </div> 
    </div>
  </body>
</html>

 

效果图:


分享到:
评论

相关推荐

    纯css3 gradient属性制作6种渐变色的按钮样式

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了许多强大的新特性,其中之一就是gradient(渐变)属性。本教程将详细介绍如何利用纯CSS3的gradient属性来制作6种不同颜色的渐变按钮样式,以提升网页界面的...

    自定义星级评分条

    在IT界,自定义星级评分条是一种常见的用户界面(UI)元素,用于让用户对产品、服务或内容进行评价。这种控件通常由一系列星形图标组成,用户可以选择一颗或多颗星来表示他们的满意度等级。本篇文章将深入探讨如何在...

    半圆渐变评分进度条(自带带截图功能)

    半圆渐变评分进度条(自带带截图功能) 博客中的实例代码。 一个可以动画显示评分的半圆进度条。 进度条颜色为渐变色。并自带截图功能。

    js星级评分点击星级评论打分效果

    进度条通常用来表示平均评分或总体评分,可以使用`&lt;progress&gt;`元素或自定义的背景渐变来创建。点评条则可能是一个列表,展示用户的评论,可以通过遍历评论数据并动态生成HTML来实现。 总的来说,这个项目涵盖了...

    纯css3星星打分特效.zip

    总的来说,纯CSS3星星打分特效充分利用了CSS3的高级特性,包括伪类选择器、渐变、过渡、布局工具以及形状剪切等,实现了一种无需JavaScript交互的评分系统。这种技术对于提升网页的用户体验和互动性具有重要意义,...

    仿AppStore星级条,等级条,iOS代码,OC绘图

    然后,为了实现动态打分功能,我们需要在`drawRect:`中根据评分值调整星星的填充状态。一种常见的方式是创建一个分数比例,根据此比例决定哪些星星应被完全填充,哪些部分填充,以及哪些保持空心。可以通过修改`...

    类似appstore打分条功能

    标题中的“类似appstore打分条功能”指的是在iOS应用开发中实现的一种用户评价系统,模仿了Apple App Store中的评分条设计。App Store中的评分条允许用户对应用程序进行直观的一到五星评分,这一功能对于开发者来说...

    jq评分加进度条

    4. **动画效果**:jQuery的`.animate()`方法可以添加平滑的过渡效果,如评分改变时进度条的渐变填充。 5. **Ajax交互**:如果评分需要提交到服务器,可以使用`.ajax()`或`.post()`方法发送请求,同时处理响应以更新...

    CSS3评分百分比统计图

    2. **渐变(`linear-gradient`)**:线性渐变可用于创建百分比条的填充效果,通过调整角度和颜色停靠点,可以实现横向或纵向的填充条。 3. **旋转(`transform: rotate()`)**:如果需要将统计图旋转一定的角度,...

    安卓自定义控件相关-android自定义评分控件ratingbar.rar

    为了增强用户体验,自定义评分条可能包含动画效果,如评分改变时星星的渐变填充。这可能通过`ValueAnimator`、`ObjectAnimator`或者`AnimatorSet`实现。 7. **布局集成** 自定义控件可以像任何其他Android原生...

    ios-打分动态效果图.zip

    "ios-打分动态效果图.zip"文件显然包含了实现这种效果的资源,特别是模仿360安全卫士中分数展示的动态渐变过程。这种效果能够吸引用户的注意力,同时提供一种直观的方式来传达信息,例如系统性能、健康状况或者用户...

    ios-仿芝麻评分.zip

    4. **颜色(Color)和渐变(Gradient)**:通过`CGColor`和`CGGradient`,我们可以设置填充颜色、描边颜色,甚至实现渐变效果,使得评分条目更加生动。 5. **阴影(Shadow)**:`CGContextSetShadow()`可以添加阴影...

    评分星星图片

    2. 设计风格:设计风格应该与应用或网站的整体风格一致,可以是扁平化设计、拟物化设计或是具有渐变和阴影效果的设计。颜色通常是金色或银色,但也可以根据品牌调色板定制。 3. 交互性:在动态评分系统中,图片可能...

    jQuery表情图标评价打分代码.zip

    3. **jQuery特效**:在描述中提到的“非常实用的jquery代码”可能包含了一些动画效果,比如当用户点击表情图标时,评分的变化可能会有平滑过渡或者渐变等视觉效果,这些都是jQuery强大的动画功能的体现。 4. **...

    android 自定义评分

    例如,当用户改变评分时,星星可以从未选中渐变到选中状态。这可以通过`ObjectAnimator`或`ValueAnimator`实现。 9. **适配器与RecyclerView**: 如果评分组件在列表或网格中使用,可能需要将其集成到`Adapter`中...

    纯css3简单的星星打分特效

    "纯css3简单的星星打分特效"是指利用CSS3特性实现的一种交互式的评分展示方式,常用于评论系统或者产品评价中,让用户通过点击星星来给予评分。这个特效不仅美观,而且能够提升用户体验,因为它提供了直观且易于操作...

    iOS打星评分demo.zip

    为了提升用户体验,可以添加动画效果,比如星星在被选中时有渐变色的变化,或者在提交评分后给出反馈提示。 总的来说,"iOS打星评分demo.zip"包含了一个完整的五星评价系统的实现,涵盖了UI设计、手势识别、交互...

    几何渐变人事述职报告PPT模板.pptx

    报告应列出考核标准、评分机制,以及员工的绩效得分和排名,以便管理层了解团队和个人的工作成效。 5. **年度绩效考核**:年度考核是对员工全年工作的总结评价,通常包括个人目标达成、团队协作、能力提升等多个...

    基于CSS3实现六种不同动画效果星级评分特效源码.zip

    1. 渐变填充:CSS3的`linear-gradient`和`radial-gradient`允许我们创建线性和径向渐变背景,为星级评分添加平滑的色彩过渡。这可以用来模拟星星从未选中到选中的状态变化,给用户带来视觉上的连续感。 2. 动态填充...

Global site tag (gtag.js) - Google Analytics