css动画及背景设置

这篇具有很好参考价值的文章主要介绍了css动画及背景设置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

css属性

clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。可以指定一些特定形状。

可以创建多边形内容显示区域polygon

 clip-path: polygon(0 0, 100% 0, 100% 75vh 0 100%);

顺序

1初始x y 为0 0

1向2位置   x轴移动100% y移动0

2向3位置   x轴为100% y移动75vh

3向4位置   x轴回到起始点0 y移动100%

css动画及背景设置

三角形

css动画及背景设置

 箭头

css动画及背景设置

 设置文字之间纵向的间距

 letter-spacing: 35px;

css动画及背景设置

设置文字的高度间距--如果和盒子高度相同,实现文字居中

 line-height: 50px;

css动画及背景设置

 文本样式--

 /* 定义文本样式仅有大写字母--用得少 */

 text-transform: uppercase;

 /* 取消默认样式 */

 text-decoration: none;

伪类选择器

/* 选择未访问链接样式: */

a:link

/* 选择访问过得链接样式 */

a:visited

设置一个动画

@keyframes moveInBottom {
    0% {
        opacity: 0;
        transform: translateY(60%);
    }
    80% {
        transform: translateY(-10%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

使用使用动画

  animation: moveInBottom 1s ease-out ;

css动画及背景设置

 当我设置延迟时间 为0.75s时,因为延迟时元素初始状态为可见,出现问题

  animation: moveInBottom 1s ease-out 0.75s;

css动画及背景设置

 此时就需要加上--元素样式为动画定义0%的样式文章来源地址https://www.toymoban.com/news/detail-417091.html

  /* 设置元素为动画初始状态 */
    animation-fill-mode: backwards;

到了这里,关于css动画及背景设置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css动画及背景设置

    css属性 clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。可以指定一些特定形状。 可以创建多边形内容显示区域polygon  clip-path: polygon(0 0, 100% 0, 100% 75vh 0 100%); 顺序 1初始x y 为0 0 1向2位置   x轴移动100% y移动0 2向3位置   x轴为100% y移动

    2023年04月18日
    浏览(47)
  • 【CSS3】CSS3 动画 ⑤ ( 动画速度曲线 | 设置动画步长 | 动画匀速执行 | 动画分 2 步执行 | 使用动画步长实现打字机效果 )

    CSS3 样式中 , 设置 动画速度曲线 的属性是 animation-timing-function 属性 ; animation-timing-function 属性定义了动画从 初始 CSS 样式 变为 结束状态 时 所消耗的时间 ; animation-timing-function 属性常用 属性值 如下 : linear : 动画在整个执行过程中速度都是匀速的 ; ease : 默认属性值 , 动画首先

    2024年02月13日
    浏览(47)
  • CSS 圆形分割按钮动画 带背景、图片

     

    2024年02月01日
    浏览(45)
  • 21.3 CSS 背景属性

    4.1 定位 4.2 像素定位 4.3 练习 4.3.1 图片居中 4.3.2 优先展示 4.3.3 图片拼接 4.3.4 图片重叠

    2024年02月10日
    浏览(43)
  • 9 CSS背景属性

    CSS 背景属性 1. background-color(背景颜色) 页面的背景颜色有四种属性值表示,分别是transparent(透明),RGB十进制颜色表示,十六进制颜色表示和颜色单词表示。 属性使用: 2. background-image(背景图片) background-image可以引入一张图片作为元素的背景图像。默认情况下,back

    2024年02月12日
    浏览(79)
  • css动画(animation)常用属性

                               1.animation-name:动画名称                                       2.@keyframes:动画定义,后面跟动画名称                                      3.animation-duration:动画持续时长,单位(s)                         

    2023年04月27日
    浏览(52)
  • CSS 实现 Turbo 官网 3D 网格线背景动画

    转载请注明出处,点击此处 查看更多精彩内容 查看 Turbo 官网 时发现它的背景动画挺有意思,就自己动手实现了一下。下面对关键点进行解释说明,查看完整代码及预览效果请 点击这里。 简单说明原理:使用 mask-image 遮罩绘制网格,使用 perspective 及 rotate 动画设置 3D 纵深效

    2024年02月17日
    浏览(45)
  • 【前端 - CSS】第 18 课 - 背景属性

            欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 ​​​​​​​   目录 1、缘起 2、背景属性 2.1、背景图 2.2、背景图平铺方式  2.3、背景图位置  2.4、背景图缩放  2.5、背景图固定 2.6、背景复合属性 3、总结 

    2024年01月23日
    浏览(59)
  • CSS特性、背景属性和显示模式

    CSS特性:化简代码 / 定位问题,并解决问题 继承性 层叠性 优先级 继承性 继承性:子级默认继承父级的 文字控制属性 。 注意:如果标签有默认文字样式会继承失败。 例如:a 标签的颜色、标题的字体大小。 层叠性 特点: 相同的属性会覆盖: 后面的 CSS 属性覆盖前面的

    2024年02月09日
    浏览(45)
  • 【CSS系列】第六章 · CSS列表、表格、背景、鼠标属性

            Hello大家好, 我是【 麟-小白 】,一位 软件工程 专业的学生,喜好 计算机知识 。希望大家能够一起 学习进步 呀!本人是一名 在读大学生 ,专业水平有限,如发现 错误 或 不足之处 ,请多多指正!谢谢大家!!!         如果 小哥哥小姐姐们 对我的文章感兴趣

    2024年02月13日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包