数据结构
网络
RDBMS
操作系统
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 次浏览
摇摆动画效果使元素在悬挂或处于轴线上时来回或左右移动。示例实时演示 .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 次浏览
晃动动画效果使元素上下或左右移动（对象）。示例实时演示 .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: ... 阅读更多