数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究
230 次浏览
多年来，首字母大写一直被用于印刷媒体，以优雅地介绍章节或部分开头段落的首字母。由于它们仅应用于一个字母，因此这些首字母大写有助于吸引读者的注意力。这也是一个利用高度风格化字体的绝佳机会，而不会影响文本的可读性。通过使用 CSS 中的 ::first-letter 伪元素和新的 initial-letter 属性，可以实现相同的首字母大写效果。CSS ::first-letter 伪元素在块级容器中，::first-letter 伪元素会为... 阅读更多
723 次浏览
Swing 动画效果使元素在悬挂或位于轴线上时来回或左右移动。示例实时演示 .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; ... 阅读更多
177 次浏览
使用此元素在元素之前插入一些内容。以下示例演示如何使用 :before 元素向任何元素添加一些内容。示例实时演示 p:before { content: url(/images/bullet.gif) } 此行前面将有一个项目符号。 此行前面将有一个项目符号。 此行前面将有一个项目符号。
825 次浏览
Shake 动画效果使元素上下或左右移动（对象）。示例实时演示 .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 shake { 0%, 100% {-webkit-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} } @keyframes shake { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 20%, 40%, 60%, 80% {transform: translateX(10px);} } .shake { -webkit-animation-name: shake; animation-name: shake; } 重新加载页面 function myFunction() { location.reload(); }
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 rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } 重新加载页面 function myFunction() { location.reload(); }
104 次浏览
要使用 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 rotateOut { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { transform-origin: center center; transform: rotate(0); opacity: 1; } 100% { transform-origin: center center; transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } 重新加载页面 function myFunction() { location.reload(); }
128 次浏览
要使用 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 rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } 重新加载页面 function myFunction() { location.reload(); }
87 次浏览
要使用 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 rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { -transform-origin: left bottom; -transform: rotate(-90deg); opacity: 0; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } 重新加载页面 function myFunction() { location.reload(); }
121 次浏览
使用 :first-line 元素为文档中元素的第一行添加特殊效果。示例您可以尝试运行以下代码，为文本的第一行添加特殊样式实时演示 p:first-line { text-decoration: underline; } p.noline:first-line { text-decoration: none; } 这行不会有任何下划线，因为这 ... 阅读更多
330 次浏览
要使用 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: ... 阅读更多