CSS 文章 - 第 144 页，共 158 页 - Tutorialspoint

找到 1575 篇文章关于 CSS

使用 CSS 实现右侧淡出放大动画效果

更新于 2024年1月8日 16:07:32

116 次浏览

动画总是能够吸引人们的注意力。当你向人们展示一幅画和一段视频时，他们总是会关注动态图像，因为它更具视觉吸引力。因此，吸引人们访问你网站的最佳方法是加入动画。你可以使用 CSS 动画实现的功能是无限的。几行代码就可以生成令人惊叹且有趣的动画。你只需要调整方向并设置一些参数。为了更好地理解如何使用 CSS 实现右侧淡出放大动画效果，让我们…… 阅读更多

使用 CSS 实现向下淡出放大动画效果

CSS Web 开发前端技术

karthikeya Boyini

更新于 2020年3月16日 08:07:07

130 次浏览

要使用 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 fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } 重新加载页面 function myFunction() { location.reload(); }

使用 CSS 实现向右弹跳消失动画效果

CSS Web 开发前端技术

Arjun Thakur

更新于 2020年3月16日 08:05:49

67 次浏览

要使用 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 bounceOutRight { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } >/div> 重新加载页面 function myFunction() { location.reload(); }

CSS background-image 属性

CSS Web 开发前端技术

Lakshmi Srinivas

更新于 2020年3月16日 08:05:13

174 次浏览

CSS background-image 属性用于指定背景图像。你可以尝试运行以下代码来在 CSS 中实现 background-image 属性 - 示例 #demo { border: 5px dashed red; padding: 10px; background-image: url("https://tutorialspoint.com/css/images/css-mini-logo.jpg"); } www.tutorialspoint.com Tutorials Point 源于…… 阅读更多

CSS background-clip 属性

CSS Web 开发前端技术

karthikeya Boyini

更新于 2020年3月16日 08:04:29

120 次浏览

CSS background-clip 属性用于声明背景的绘制区域。你可以尝试运行以下代码来在 CSS 中实现 background-clip 属性 - 示例 #demo { border: 5px dashed red; padding: 10px; background: orange; background-clip: padding-box; } ... 阅读更多

使用 CSS 实现向左弹跳消失动画效果

CSS Web 开发前端技术

George John

更新于 2020年3月16日 08:03:35

71 次浏览

要使用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 bounceOutLeft { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } 刷新页面 function myFunction() { location.reload(); }

使用CSS实现向上弹跳动画效果

CSS Web 开发前端技术

Samual Sam

更新于 2020年3月16日 08:02:54

127 次查看

要使用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 bounceInUp { 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 bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } 刷新页面 function myFunction() { location.reload(); }

使用CSS实现向下弹跳出动画效果

CSS Web 开发前端技术

karthikeya Boyini

更新于 2020年6月26日 08:19:10

119 次查看

要使用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 bounceOutDown { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } 刷新页面 function myFunction() { location.reload(); }

使用CSS实现弹跳出动画效果

CSS Web 开发前端技术

Arjun Thakur

更新于 2020年3月16日 08:01:05

161 次查看

要使用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 bounceOut { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } 刷新页面 function myFunction() { location.reload(); }

使用CSS实现向右弹跳入动画效果

CSS Web 开发前端技术

Samual Sam

更新于 2020年6月26日 08:17:25

212 次查看

要使用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 bounceInRight { 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 bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } 重新加载页面 function myFunction() { location.reload(); }

找到 1575 篇文章 关于 CSS

找到 1575 篇文章关于 CSS