找到关于 CSS 的 1575 篇文章
98 次查看
要使用 CSS 实现 Y 轴翻转动画效果,您可以尝试运行以下代码在线演示 .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 flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipOutY; backface-visibility: visible !important; animation-name: flipOutY; } 重新加载页面 function myFunction() { location.reload(); }
159 次查看
要使用 CSS 实现翻转退出 X 动画效果,您可以尝试运行以下代码 - 示例在线演示 .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 flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; -webkit-backface-visibility: visible !important; animation-name: flipOutX; backface-visibility: visible !important; } 刷新页面 function myFunction() { location.reload(); }
108 次查看
`speech-rate` 属性指定朗读速度。请注意,允许使用绝对和相对关键字值。可能的值包括:- `number` - 以每分钟单词数指定朗读速度。`x-slow` - 等同于每分钟 80 个单词。`slow` - 等同于每分钟 120 个单词。`medium` - 等同于每分钟 180-200 个单词。`fast` - 等同于每分钟 300 个单词。`x-fast` - 等同于每分钟 500 个单词。`faster` - 在当前朗读速度的基础上增加每分钟 40 个单词。`slower` - 在当前朗读速度的基础上减少每分钟 40 个单词。
148 次查看
CSS3 圆角用于使用 `border-radius` 属性为主体或文本添加特殊颜色的角。圆角的简单语法如下:`#rcorners { border-radius: 60px/15px; background: #FF0000; padding: 20px; width: 200px; height: 150px; }`下表显示了圆角的可能值:值描述`border-radius`用于设置四个边框半径属性`border-top-left-radius`用于设置左上角的边框`border-top-right-radius`用于设置右上角的边框`border-bottom-right-radius`用于设置右下角的边框`border-bottom-left-radius`用于设置… 阅读更多
93 次查看
要使用 CSS 实现翻转进入 Y 动画效果,您可以尝试运行以下代码:示例在线演示 .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: ... 阅读更多