css3
关注
分享
扫一扫
AsaZyf
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
HTML5+CSS3期末考试大题
1.制作一个文件上传效果code：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>file</title> <style> .content{ w原创 2019-01-08 21:24:01 · 16855 阅读 · 0 评论 -
CSS3--animation属性（fill-mode）
图片链接见https://blog.youkuaiyun.com/AsaZyf/article/details/83831462code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>animation-fill-mode<原创 2018-11-08 11:29:42 · 476 阅读 · 0 评论 -
CSS3--animation属性（direction）
图片链接见https://blog.youkuaiyun.com/AsaZyf/article/details/83831462code：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>animation-direction<原创 2018-11-08 11:27:53 · 483 阅读 · 0 评论 -
CSS3--animation属性(delay和iteration-count)
delay:iteration-count:图片链接见https://blog.youkuaiyun.com/AsaZyf/article/details/83831462code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title&g原创 2018-11-08 10:48:37 · 822 阅读 · 0 评论 -
CSS3多列
定义：参数：code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>columns</title><style type="text/css"&原创 2018-11-13 14:29:42 · 181 阅读 · 0 评论 -
CSS3动画--animation属性(name和duration)
animation-name:animation-duration:code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>animation-duration</title>&原创 2018-11-07 20:45:53 · 1386 阅读 · 0 评论 -
CSS3动画--@keyframes
定义：语法和参数：code：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>@KeyFrames</title><style type="text/css"原创 2018-11-12 21:44:03 · 399 阅读 · 0 评论 -
CSS3--transition简写
code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div原创 2018-11-07 10:24:56 · 2742 阅读 · 0 评论 -
CSS3--transform与坐标系统
explain：(默认以中心为转换点)code：原创 2018-11-04 15:47:44 · 2139 阅读 · 0 评论 -
CSS3多列属性--column-gap
code：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>column-gap</title><style type="text/css">body原创 2018-11-13 20:25:48 · 402 阅读 · 0 评论 -
CSS3多列属性--column-rule
code：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>column-rule</title><style type="text/css">body原创 2018-11-13 20:31:31 · 311 阅读 · 0 评论 -
CSS3--animation(play-state)
code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>animation-play-state</title><style type="text/css"&原创 2018-11-08 16:15:03 · 396 阅读 · 0 评论 -
CSS--样式重置
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, ...原创 2018-11-28 20:45:19 · 218 阅读 · 0 评论 -
CSS3用户界面--pointer-events
code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>pointer-events</title><style type="text/css">.原创 2018-11-17 11:51:07 · 227 阅读 · 0 评论 -
CSS3用户界面--user-select
code：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>user-select</title><style type="text/css">div原创 2018-11-17 11:49:26 · 278 阅读 · 0 评论 -
CSS3用户界面--resize
code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>resize</title><style type="text/css">div { wid原创 2018-11-17 11:43:13 · 198 阅读 · 0 评论 -
CSS3用户界面--cursor
code:<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>cursor</title><style>.test { width: 400px; bo原创 2018-11-15 11:53:15 · 348 阅读 · 0 评论 -
flex实际应用-- flex-card布局
code:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2018-11-20 16:36:43 · 892 阅读 · 0 评论 -
CSS3--column-span
code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>column-span</title><style type="text/css">body原创 2018-11-14 20:09:12 · 384 阅读 · 0 评论 -
CSS3--animation属性复合
code：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Animation</title><style type="text/css">body {原创 2018-11-08 16:20:02 · 1982 阅读 · 0 评论 -
CSS3 3D转换--rotate
rotateX：rotateY：transform：rotateY（angle）rotateZ：rotate3d：注意点：当x,y,z数值为0或小于0时无效果原创 2018-11-04 12:00:27 · 274 阅读 · 0 评论 -
CSS3 2D转换--扭曲skew
三种情况：skewX：skew(X)注意点：skew(Y):transform:skewY(angle)skew(X，Y):skew(X，Y)注意点：当只写一个值时，默认y值为0原创 2018-11-04 11:35:53 · 426 阅读 · 0 评论 -
CSS3 2D转换--缩放scale
缩放scale三种情况：scaleX：scaleY：scale(x,y)：原创 2018-11-04 11:13:29 · 447 阅读 · 0 评论 -
CSS3---永动的方块
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> @-webkit-keyframes domove{原创 2018-10-17 16:17:22 · 316 阅读 · 0 评论 -
jquery、CSS3----多个导航条下拉
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS3实现导航条下拉效果</title> <style> * {原创 2018-10-17 15:57:53 · 252 阅读 · 0 评论 -
CSS3--小三角形箭头
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #sider{ width:原创 2018-10-16 17:23:48 · 645 阅读 · 0 评论 -
CSS3-利用after清浮动
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .header{ width:原创 2018-10-08 22:02:56 · 1544 阅读 · 0 评论 -
CSS3-radio实现选项卡切换
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>radio实现选项卡切换</title> <style> *{原创 2018-10-08 22:00:49 · 1060 阅读 · 0 评论 -
CSS3-对话框图形
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>after和before生成小三角</title> <style> body{原创 2018-10-08 21:59:22 · 497 阅读 · 0 评论 -
CSS3----旋转图片
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>旋转图片</title> <style> *{ margin:原创 2018-10-15 16:21:30 · 589 阅读 · 0 评论 -
CSS3--底部菜单上拉效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>底部菜单上拉效果</title> <style> *{ marg原创 2018-10-15 16:13:21 · 3043 阅读 · 1 评论 -
CSS3--永动圆形
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> @-webkit-keyframes move{原创 2018-10-17 16:30:31 · 277 阅读 · 0 评论 -
CSS3----无缝滚动
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> @-webkit-keyframes domove{原创 2018-10-17 16:36:28 · 220 阅读 · 0 评论 -
CSS3选择器selection--改变选中文字的颜色
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> p::selection{ background: blue; color: red; }原创 2018-10-29 15:25:13 · 1248 阅读 · 0 评论 -
CSS3 2D转换--旋转rotate
explain：code：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>rotate</title><style type="text/css">原创 2018-11-04 00:27:06 · 667 阅读 · 0 评论 -
CSS3 2D转换--移动translate
explain：code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>translate(x,y)</title><style type="text/css"原创 2018-11-04 00:18:47 · 378 阅读 · 0 评论 -
CSS3字体--使用【有字库】字体
code：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="http://cdn.webfon原创 2018-11-01 23:16:29 · 803 阅读 · 0 评论 -
CSS3字体--获取特殊字体
网站链接，可以通过上传一种格式的字体获取多种格式的字体操作步骤：勾选的格式：原创 2018-11-01 22:52:38 · 340 阅读 · 0 评论 -
CSS3字体--字体的应用
通用模板【兼顾IE和手机】使用：原创 2018-11-01 22:37:32 · 341 阅读 · 0 评论 -
CSS3字体--取值说明和格式
取值说明：格式：①②③④IE专用⑤前端流行原创 2018-11-01 22:10:57 · 373 阅读 · 0 评论