TypechoJoeTheme

Dcr163的博客

统计

网站页面
类目归类
标签搜索

最新文章

2017-03-23

CSS3中设置动画播放次数
CSS3中设置动画播放次数
animation-iteration-count属性主要用来定义动画的播放次数。语法规则：animation-iteration-count: infinite | <number> [, infinite | <number>]* 1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。2、如果取值为infinite，动画将会无限次的播放。注意：Chrome或Safari浏览器，需要加入-webkit-前缀！
2017-03-23

日志

1,017 阅读
0 评论
2017年03月23日
1,017 阅读
0 评论
2017-03-23

CSS3中设置动画播放方式
CSS3中设置动画播放方式
animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。语法规则：animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <n...
2017-03-23

日志

1,224 阅读
0 评论
2017年03月23日
1,224 阅读
0 评论
2017-03-23

CSS3中设置动画播放时间
CSS3中设置动画播放时间
animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒语法规则animation-duration: <time>[,<time>]*取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）例如：让元素从红色变化到绿色，整个变化过程持续5s时间。<!DOCTYPE html> <html> <head>  <meta charset="utf-8"> <title>变形与动画</title> <style>         @keyframes changeColor&...
2017-03-23

日志

1,313 阅读
0 评论
2017年03月23日
1,313 阅读
0 评论
2017-03-23

CSS3中调用动画
CSS3中调用动画
animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。语法：animation-name: none | IDENT[,none|DENT]*;1、IDENT是由 @keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致）；2、none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。注意：需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-。例如：调用定义的动画“around”<!DOCTYPE html> <html> <head>  <meta charset="ut...
2017-03-23

日志

1,321 阅读
0 评论
2017年03月23日
1,321 阅读
0 评论
2017-03-18

CSS3中的动画--过渡所需时间 transition-duration
CSS3中的动画--过渡所需时间 transition-duration
transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。案例演示：在鼠标悬停（hover）状态下，让容器从直角慢慢过渡到圆角，并让整个动画持续0.5s。HTML:<div></div>CSS:div {   width: 300px;   height: 200px;   background-color: orange;   margin: 20px auto;  -webkit-transition-property: -webkit-border-radius;   transition-property: border-radius;   -webkit-transition-duration: .5s;  &...
2017-03-18

日志

1,512 阅读
0 评论
2017年03月18日
1,512 阅读
0 评论
2017-03-18

CSS3中的动画--过渡属性 transition-property
CSS3中的动画--过渡属性 transition-property
早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 第一，在默认样式中声明元素的初始状态样式； 第二，声明过渡元素最终状态样式，比如悬浮状态； 第三，在默认样式中通过添加过渡函数，添加一些不同的样式。CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：transition-property:指定过渡或动态模拟的CSS属性transition-duration:指定完成过渡所需的时间transition-timing-function:指定过渡函数transition-delay:指定开始出现的延迟时间先来看transition-property属性transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只...
2017-03-18

日志

1,185 阅读
0 评论
2017年03月18日
1,185 阅读
0 评论
2017-03-16

CSS3中的变形--位移 translate()
CSS3中的变形--位移 translate()
translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。translate我们分为三种情况：1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）2、translateX(x)仅水平方向移动（X轴移动）3、translateY(Y)仅垂直方向移动（Y轴移动）例如：让不知道宽度和高度的元素实现水平、垂直居中。<!DOCTYPE html> <html> <head>  <meta charset="utf-8"> <title>变形与动画</title> <link href="style.css" rel="stylesheet" type="text/css">...
2017-03-16

日志

1,068 阅读
0 评论
2017年03月16日
1,068 阅读
0 评论
508 文章数
67 评论量

人生倒计时

今日已经过去小时
这周已经过去天
本月已经过去天
今年已经过去个月

热门文章

最新回复

  1. http://goldenfiber.ru/forum/?PAGE_NAME=profile_view&UID=55151&backurl=%2Fforum%2F%3FPAGE_NAME%3Dprofile_view%26UID%3D32514
    2025-07-10

    I think that what you composed was actually very logical.
    But, consider this, suppose you composed a catchier post title?
    I am not saying your information is not good, however suppose you added a post title that makes people
    want more? I mean 个人介绍 - Dcr163的博客 is a little plain. You ought to peek at Yahoo's home page
    and note how they create post titles to grab people to click.
    You might add a related video or a related pic
    or two to get people excited about everything've got to say.
    Just my opinion, it could bring your website a little bit more interesting.
  2. https://www.triptipedia.com/user/phmapaladnet
    2025-05-08

    I think that what you said was very logical. But, consider this,
    suppose you added a little information? I ain't saying
    your content is not good., but suppose you added
    a title to maybe get folk's attention? I mean 个人介绍 - Dcr163的博客 is
    kinda vanilla. You should glance at Yahoo's home page and note how they create news headlines to grab
    people to click. You might try adding a video or a pic or two to get
    people interested about everything've written. In my opinion, it might make your posts a little bit more interesting.
  3. https://Sites.google.com/view/vavada-online-casino
    2025-04-12

    I comment each time I especially enjoy a article onn a site or if I havbe something too valuable to contribute to the discussion. It iss caused by thhe passion communicated
    in the article I looked at. And after this post rabbitmq-server line 85:
    erl: command not found 报错 - Dcr163的博客.
    I wass actually moved enough to create a comment :-)
    I actually do have a couple of questions for you iff you don't mind.
    Could it bbe simply me or do a few of these remarks appear
    as if thry are left by brain dead people?
    :-P And, if you are wrriting at additional sites, I'd like too keep up with anything new
    you have too post. Would you list every oone of all your
    shared pages like your titter feed, Facebook page or
    linkedin profile?
  4. https://x.com/jeetbuzzcom
    2025-04-07

    Thanks for finally writing about >个人介绍 - Dcr163的博客

  5. prozone.cc alternative
    2025-03-19

    Ꭲhanks foｒ finaⅼly writing abοut >个人介绍 - Dcr163的博客

标签云

CopyRight © Dcr163.cn 粤ICP备15066935号 2016 ~ 2025 64ms
RSS MAP