• 当前标签:CSS过渡

程序开发 空白与换行、CSS过渡

空白与换行: section:nth-child(1){ /*word-break: break-all;*/ /*英文单词默认不会在单词内换行 如果英文单词过长或在页面上显示URL则会将页面撑大 该样式是英文单词暴力换行 换行后可能造成误解*/ word-wrap: break-word; text-align: justify; /*两端对齐 会拉开单词间距 英文效果显著 但最后一行不会两端对齐*/ } section:nth-child(2){ text-align: justify; } section:nth-child(3){ /*white-space: pre;*/ /*类似pre标签 保留空格 tab 回车换行等空白符*/ white-space: pre-wrap; /*在pre的基础上增加了换行效果*/ /*white-space: pre-line;*/ /*在pre的基础上去掉了空白符*/ /*white-space: nowrap;*/ /*不换行也没有空白*/ /*默认不加样式时是会换行的*/ } CSS过渡 css body{ background-color: black; } section{ width: 300px; height: 300px; background-color: lightgreen; /*border-radius: 50%;*/ margin: 150px auto; /*transition: transform,background-color, 5s;*/ /*过渡综合样式的简写*/ position: absolute; top: 0; left: 100px; /*定义一个初始位置*/ /*transition-property: transform,background-color,margin,width,top,left,height,box-shadow,border-radius;*/ /*transition-duration: 1s;*/ transition-timing-function: linear; /*贝塞尔曲线*/ transition-timing-function: cubic-bezier(0.68,-0.55,0.265,1.55); transition-property: box-shadow; /*transition-duration: 5s;*/ transition-delay: 3s; /*属性规定过渡效果何时开始*/ } section:active{ /*transform: rotate(360deg);*/ /*background-color: yellow;*/ /*margin: 0 auto;*/ /*border-radius: 50%;*/ /*width: 400px;*/ /*height: 400px;*/ /*top: 500px; left: 1000px;*/ box-shadow: 0 10px 100px red; } 演示效果 空白与换行 CSS过渡

2017-05-09 23:02:18 188 2 0
阅读详情
  • 1
前往