码迷,mamicode.com
首页 > Web开发 > 详细

CSS3

时间:2020-04-04 23:04:38      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:alt   font   进度条   rap   高度   范围   transform   linear   形状   

(1圆角边框

border-radius

border-top-left-radius(左上角的形状)

border-top-right-radius(右上角的形状)

border-bottom-left-radius(左下角的形状)

border-bottom-right-radius(右下角的形状)

border-radius:水平值,垂直值

技术图片

若border-radius只有一个值,则代表一个圆形。

技术图片技术图片

因为改图形高度为50px,刚好等于25px的2倍,所以两边呈现两个圆弧。

border-radius未说明是哪个方向的形状,则为4个方向的形状均为这个。

圆形的创建

技术图片

技术图片

box-shadow阴影

box-shadow:水平偏移,垂直偏移,模糊程度(模糊距离的范围,值越大模糊程度越大),阴影颜色

下图为水平偏移和垂直偏移均为正数的情况下,若为负数,则向左上方偏移。

技术图片

技术图片

(2)文本与文字

text-shadow属性:水平偏移,垂直偏移,阴影大小,颜色

技术图片

若水平偏移和垂直偏移均为0,则效果如图

技术图片

word-rap属性

允许长单词,URL强制进行换行

break-word属性

技术图片

技术图片

把word-wrap属性设为 break-word;

则会进行强制换行,否则该内容将会超出文本框,溢出

@font-face规则

技术图片

技术图片

要将自己文件下载下来并放到电脑中,以便引用,并且需要4种文件格式

2D变换

transform属性:旋转rotate()   伸缩scale()

技术图片

 

旋转例子

transform:scale(x,y)   x代表水平缩放,y代表垂直缩放,若值大于1,代表放大,小于1,代表缩小,若只有一个值,则代表各个方向都伸缩。

过渡与动画

transition属性

transition-property:对哪个属性名进行变化

transition-duration:持续时间

transition-timing-function:过渡时使用的函数(即过渡的速度,linear(匀速)ease(慢快慢) ease-in(慢快) ease-out(快慢) ease-in-out(慢快慢)

transition:(property) (duration) (function)

技术图片

技术图片

鼠标悬停在这个单词,过了一秒变成下面这个样子。

技术图片

技术图片

鼠标悬停在上面这几个进度条时,它们会以各自的速度变长。

animation动画

定义动画@keyframes规则

调用动画 animation属性

animation-name :引用@keyframes动画的名称

animation-duration:动画完成时间

animation-timing-function规定动画的速度曲线,默认是"ease"

animation-play-state running|paused;

animation:动画名称,动画完成时间 规定动画的速度

技术图片

技术图片

当打开这个文件时,各个进度条以各自的速度前进。

3D变换

3D: transform-style:preserve-3d

旋转 transform属性 rotateX() rotateY() rotateZ()

透视:perspective属性

技术图片

技术图片

技术图片

当鼠标悬停时,图片将进行翻转

咖啡屋

技术图片

技术图片

技术图片

技术图片

技术图片

技术图片

技术图片

 

CSS3

标签:alt   font   进度条   rap   高度   范围   transform   linear   形状   

原文地址:https://www.cnblogs.com/hclhclhcl/p/12634510.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!