CSS3
树己
这个作者很懒,什么都没留下…
展开
-
CSS3中的3D变换
3D变换属性设置:旋转的三个方向,沿着三个轴旋转实现3D的变换,也可以设置透视效果。沿着x轴的旋转类似于平面的移动,y轴的旋转类似于芭蕾舞移动,z轴方向类似于翻跟头的动作。二维变换没有透视效果,三维变换有透视效果,没有透视三个轴上的旋转效果:有透视的时候的旋转效果,有透视的时候存在近大远小的效果,右边为透视效果,左边无透视效果:需要存在父容器来进行旋转,舞台来形成透视关系。属性设置:父容器:transform-style:preserve-3d;transform:rotate Y(原创 2020-07-07 19:02:02 · 218 阅读 · 0 评论 -
CSS3中2D平面变换和过渡及动画效果
2D平面变换方法对元素进行旋转,缩放,移动,拉伸。使用设置transform属性:rotate函数:设置旋转的度数。旋转的效果:代码的实现:#rotateDiv{transform:rotate(30deg);/*设置顺时针旋转的角度,也可以进行扩展*/}scale函数:设置缩放的效果。transform:scale(x,y):x为水平方向,y为垂直方向,小于1的话缩小,大于1放大。#rotateDiv{transform:scale(2,2);/*设置水平方向扩大为2倍原创 2020-07-07 17:36:15 · 382 阅读 · 0 评论 -
CSS3
CSS3新特性光标停留在图片上的时候出现文字解释,CSS中需要使用JS来实现。可以设置悬停效果,旋转效果。每个浏览器带有前缀,w3c标准通用之后才会去除前缀。border-radius:设置圆角边框,水平方向和垂直方向都可以设置。div{border-top-left-radius:40px 20px;/*左上角设置圆形边框,水平40个像素,垂直20个像素*/border-bottom-right-radius:20px;/*右下角设置,水平和垂直都是20个像素*/border-radi原创 2020-07-02 17:59:07 · 122 阅读 · 0 评论 -
CSS3文本与文字
CSS3文本与文字text-shadow属性word-shadow属性font-face规则text-shadow属性参数:水平偏移,垂直偏移,阴影大小,颜色;文字描边的时候偏移量设置为0,浮雕效果设置文字颜色和背景颜色。<h1>Web design</h1>h1{text-shadow:2px 2px 8px blue;}word-wrap属性允许长单词,URL强制进行换行,避免超出边框。具体代码:font-face规则CSS3之前原创 2020-07-02 18:47:25 · 167 阅读 · 0 评论