For this challenge, you'll change the opacity of an animated element so it gradually fades as it reaches the right side of the screen.

In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the @keyframes rule.

练习题目:

Target the element with the id of ball and add the opacity property set to 0.1 at 50%, so the element fades as it moves to the right.

练习代码:

 <style>

   #ball {
width: 70px;
height: 70px;
margin: 50px auto;
position: fixed;
left: 20%;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: fade;
animation-duration: 3s;
} @keyframes fade {
50% {
left: 60%;
opacity: 0.1;
}
} </style> <div id="ball"></div>

效果:

一个带好看背景色的圆形图案,从左到右移动,透明度opacity渐变为0.1,背景色渐渐消失的效果

FCC---Create Visual Direction by Fading an Element from Left to Right---一个带好看背景色的圆形图案,从左到右移动,透明度opacity渐变为0.1,背景色渐渐消失的效果的更多相关文章

  1. Qt之界面出现、消失动画效果(简单好用)

    在学习Qt的这2.3个月里,对Qt越发感兴趣,从刚开始的盲目.无所适从到现在的学习.研究.熟练.掌握的过程中,我学到了很多东西,也学会了如何通过自学让自己更加成熟.强大起来,如何更有效地提高自己学习. ...

  2. Qt之界面出现、消失动画效果

    在学习Qt的这2.3个月里,对Qt越发感兴趣,从刚开始的盲目.无所适从到现在的学习.研究.熟练.掌握的过程中,我学到了很多东西,也学会了如何通过自学让自己更加成熟.强大起来,如何更有效地提高自己学习. ...

  3. Axure实现提示文本单击显示后自动消失的效果

    Axure实现提示文本单击显示后自动消失的效果 方法/步骤     如图所示,框出的部分为提示文本(已经命名为tooltip),希望达到的效果是默认加载时不显示,点击帮助图标后显示,且2秒后自动消失. ...

  4. (vue.js)Vue element tab 每个tab用一个路由来管理?

    (vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理     时间:2017/5/13 0:24:01     关键词:   关于网友提出的“ (vue.js) ...

  5. 使用element的upload组件实现一个完整的文件上传功能(下)

    本篇文章是<使用element的upload组件实现一个完整的文件上传功能(上)>的续篇. 话不多说,接着上一篇直接开始 一.功能完善—保存表格中每一列的文件列表状态 1.思路 保存表格中 ...

  6. UIButton 一个控件 实现 左图标右文本的效果

    UIButton 一个控件 实现 左图标右文本的效果 如图,我们要实现一个 左边图标右边文本的效果,一般 可以考虑是 UIImageView + UILabel 不过,其实一个UIButton就可以搞 ...

  7. .NET 开源了,Visual Studio 开始支持 Android 和 iOS 程序编写并自带 Android 模拟器

    .NET 开源了,Visual Studio 开始支持 Android 和 iOS 程序编写并自带 Android 模拟器 北京时间今天凌晨的 Connect(); 大会上,多少程序员的假想成为现实. ...

  8. 收藏一个带动画效果的ScrollViewer以及ScrollBar的模板

    这里介绍一个带动画效果的ScrollViewer和ScrollBar,总共分为两个资源字典,直接拿来引用即可: 1 ScrollBarStyle.xaml <ResourceDictionary ...

  9. 创建一个长度是5的数组,并填充随机数。使用for循环或者while循环,对这个数组实现反转效果

    package day01; import java.util.Random; /** * 首先创建一个长度是5的数组,并填充随机数.使用for循环或者while循环,对这个数组实现反转效果 * @a ...

随机推荐

  1. 【分析工具】阿里巴巴Arthas--线上问题分析利器

    目录 1. Arthas是什么 2. Arthas能解决什么问题 3. 快速安装 第一步:下载 第二步:运行 第三步:选择进程 4. 实战使用 5. 总结 本博客转载自阿里开源的 Java 诊断工具 ...

  2. Pycharm自带Git实现版本管理

    之前一直使用本地的git客户端,通过命令来上传.下载代码到Gitlab:每次都需要启动git客户端,敲git命令来完成,不够灵活,因为强大的Pycharm就自带git功能,可以直接在Pycharm完成 ...

  3. JMeter压测“java.net.BindException: Address already in use: connect”解决方法

    之前在windows机上用JMeter压测,50并发下出现大量接口报“java.net.BindException: Address already in use: connect”错误. 从字面的意 ...

  4. SSH框架之Struts2第二篇

    1.2 知识点 1.2.1 Struts2的Servlet的API的访问 1.2.1.1 方式一 : 通过ActionContext实现 页面: <h1>Servlet的API的访问方式一 ...

  5. PHP stat 文件系统函数

    定义和用法 stat - 给出文件的信息 版本支持 PHP4 PHP5 PHP7 支持 支持 支持 语法 stat ( string $filename ) 获取由 filename 指定的文件的统计 ...

  6. [iOS开发]关于cocoapods的使用

    CocoaPods的使用 关于CocoaPods,相信做iOS开发的应该都比较熟悉了.Cocoapods是一个用来管理第三方库的比较好用的管理工具.关于Cocoapods的东西不再多说,接下来进入正题 ...

  7. 【React Native】react-native之集成支付宝支付、微信支付

    一.在使用支付宝支付.微信支付之前导入桥接好的头文件 github地址:https://github.com/xujianfu/react-native-pay 二.集成支付宝支付流程 RN支付宝需要 ...

  8. Fundebug网站升级HTTP/2,真的变快了!

    作为新一代的HTTP协议,HTTP/2可以提高网站性能,优化用户体验,Fundebug也是时候升级HTTP/2了,虽然已经有点晚了. 升级HTTP/2是一件很简单的事情,改1行Nginx配置就好了,但 ...

  9. HDFS与YARN HA部署配置文件

    core-site.xml <!--Yarn 需要使用 fs.defaultFS 指定NameNode URI --> <property> <name>fs.de ...

  10. MongoDB的模糊查询操作(类关系型数据库的 like 和 not like)

    1.作用与语法描述 作用: 正则表达式是使用指定字符串来描述.匹配一系列符合某个句法规则的字符串.许多程序设计语言都支持利用正则表达式进行字符串操作.MongoDB 使用 $regex 操作符来设置匹 ...