CSS background-origin 属性用于指定背景图片的位置。示例您可以尝试运行以下代码来实现 background-origin 属性：在线演示                    #demo {             border: 5px dashed red;             padding: 10px;             background-image: url("https://tutorialspoint.com/css/images/css-mini-logo.jpg");             background-origin: content-box;          }                              www.tutorialspoint.com          网站 www.tutorialspoint.com ... 阅读更多

要使用 CSS 来实现 Bounce In Left 动画效果，可以尝试运行以下代码示例实时演示                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes bounceInLeft {             0% {                opacity: 0;                -webkit-transform: translateX(-2000px);             }             60% {                opacity: 1;                -webkit-transform: translateX(30px);             }             80% {                -webkit-transform: translateX(-10px);             }             100% {                -webkit-transform: translateX(0);             }          }          @keyframes bounceInLeft {             0% {                opacity: 0;                transform: translateX(-2000px);             }             60% {                opacity: 1;                transform: translateX(30px);             }             80% {                transform: translateX(-10px);             }             100% {                transform: translateX(0);             }          }          .bounceInLeft {             -webkit-animation-name: bounceInLeft;             animation-name: bounceInLeft;          }                           重新加载页面                function myFunction() {             location.reload();          }          

要通过 CSS 实现下滑弹跳动画效果，可尝试运行以下代码 − 示例在线演示                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes bounceInDown {             0% {                opacity: 0;                -webkit-transform: translateY(-2000px);             }             60% {                opacity: 1;                -webkit-transform: translateY(30px);             }             80% {                -webkit-transform: translateY(-10px);             }             100% {                -webkit-transform: translateY(0);             }          }          @keyframes bounceInDown {             0% {                opacity: 0;                transform: translateY(-2000px);             }             60% {                opacity: 1;                transform: translateY(30px);             }             80% {                transform: translateY(-10px);             }             100% {                transform: translateY(0);             }          }          .bounceInDown { -           webkit-animation-name: bounceInDown;             animation-name: bounceInDown;          }                           重新加载页面              function myFunction() {             location.reload();          }          

要使用 CSS 实现的弹跳动画效果，可以尝试运行下面的代码 − 示例活动演示                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes bounceIn {             0% {                opacity: 0;                -webkit-transform: scale(.3);             }             50% {                opacity: 1;                -webkit-transform: scale(1.05);             }             70% {                -webkit-transform: scale(.9);             }             100% {                -webkit-transform: scale(1);             }          }          @keyframes bounceIn {             0% {                opacity: 0;                transform: scale(.3);             }             50% {                opacity: 1;                transform: scale(1.05);             }             70% {                transform: scale(.9);             }             100% {                transform: scale(1);             }          }          .bounceIn {             -webkit-animation-name: bounceIn;             animation-name: bounceIn;          }                           重新加载页面                function myFunction() {             location.reload();          }          

如果您使用 ASCII 或 ISO-8859-1 以外的字符集书写文档，您可能希望在样式表的顶部设置 @charset 规则，以指出样式表是使用什么字符集编写的。@charset 规则必须写在样式表的开头，甚至连前后的空格都不能有。值需要用引号括起来，并且应该是标准字符集中的一个。示例我们来看一个示例    

弹跳动画效果用于在元素击中某表面后，快速向上、向后或远离该表面移动。示例您可以尝试运行以下代码来实现弹跳动画效果——在线演示                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 1s;             animation-duration: 1s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes bounce {             0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}             40% {-webkit-transform: translateY(-30px);}             60% {-webkit-transform: translateY(-15px);}          }          @keyframes bounce {             0%, 20%, 50%, 80%, 100% {transform: translateY(0);}             40% {transform: translateY(-30px);}             60% {transform: translateY(-15px);}          }          .bounce {             -webkit-animation-name: bounce;             animation-name: bounce;          }                           重新加载页面                function myFunction() {             location.reload();          }          

CSS background-origin 属性用于规定背景图像的位置。您可以尝试运行以下代码，以实现 background-image 属性示例在线演示                    #demo {             border: 5px dashed red;             padding: 10px;             background-image: url("https://tutorialspoint.com/css/images/css-mini-logo.jpg");             background-origin: content-box;          }                              www.tutorialspoint.com   ... 阅读更多信息

动画是指创建运动效果、更改外观的过程。CSS 支持不同的动画效果，以便更改事件运动。在动画下，使用了一个关键帧概念。关键帧将控制 CSS3 中的中间动画步骤。以下示例显示关键帧语法中动画的高度、宽度、颜色、名称和持续时间——语法@keyframes animation {    from {background-color: pink;}    to {background-color: green;} } div {    width: 100px;    height: 100px;    background-color: red;    animation-name: animation;    animation-duration: 5s; }

CSS background-clip 属性用于声明背景的绘画区域。您可以尝试运行以下代码，以便通过 CSS - 示例现场演示                    #demo {             border: 5px dashed red;             padding: 10px;             background: orange;             background-clip: padding-box;          }                           ... 了解更多信息

该属性指定在朗读元素内容之前需遵循的暂停。可能的取值是 时间 - 以绝对时间单位（秒和毫秒）表示暂停。百分比 - 指的是 speech-rate 属性值的反向值。例如，如果 speech-rate 为每分钟 120 个字（即一个字需要半秒或 500 毫秒），那么 pause-before 为 100% 意味着暂停 500 毫秒，pause-before 为 20% 意味着 100 毫秒。