一、单选按钮：

  <!-- 实现单选<input type="radio" name="stars">多个单选按钮，通过指定同一个name属性值，组成单选按钮组;-->
<input type="radio" name="test">
<input type="radio" name="test">
<input type="radio" name="test">
<input type="radio" name="test">

案例展示（小星星评分等级表）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.waikuang{height:29px;width:200px;margin-left:100px;margin-top:100px;            }.waikuang label{display:block;height:29px;width:30px;/* 插入背景图片 */background-image: url("星星01.png");/* 背景图片不平铺（背景图片不重复） */background-repeat:no-repeat;/* 背景位置：水平方向 垂直方向 */background-position:0px -1px;/* 右浮动 */float:right;margin-right:5px;  margin-right:5px;}/* 选中的这个label之后的兄弟元素label */.waikuang input:checked+label~label{background-position:0px -31px;}.waikuang input{display: none;}.waikuang label:hover~label{background-position:0px -31px;}/* 鼠标滑过label让它的背景变成黄色 */.waikuang label:hover{background-position:0px -31px;}.waikuang input:checked+label{background-position:0px -31px;}</style>
</head>
<body><div class="waikuang"><!-- 1.实现单选<input type="radio" name="stars">多个单选按钮，通过指定同一个name属性值，组成单选按钮组;--><input type="radio" id="a" name="stars"><label for="a"></label><input type="radio" id="b" name="stars"><label for="b"></label><input type="radio" id="c" name="stars"><label for="c"></label><input type="radio" id="d" name="stars"><label for="d"></label><input type="radio" id="e" name="stars"><label for="e"></label></div>
</body>
</html>

二、字体系列：

font-family：“字体名称”；-----汉字用双引号包括
font-weight(字体粗细)；

三、沿着Y轴旋转

/* 鼠标滑过每一个小框时，让.qian沿Y轴旋转-180deg */
.box:hover .qian{
transform:rotateY(-180deg);
}
rotateY（角度）：正值------向右（顺时针）负值------向左（逆时针）

四、面向用户的那一面不可见

  /* 背向用户的那一面不可见 */
backface-visibility: hidden;

五、三维效果

perspective(里面的数值越大，透视效果越不明显；值越小，透视效果越明显。)
视距 使子元素差生透视效果（远大近小）
perspective:800px;

案例展示（翻转效果图）：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {/* 宽度 */width: 840px;/* 高度 */height: 300px;/* 块水平居中 */margin-left: auto;margin-right: auto;/* 距顶部产生距离 */margin-top: 100px;  }.box1 {width: 200px;height: 300px;/* 相对定位 */position: relative;/* 左浮动 */float: left;margin-left: 5px;margin-right:5px;/* 产生三D的效果 */perspective: 800px;}.qian {width: 200px;height: 300px;/* 绝对定位 */position: absolute;left: 0px;top: 0px;/* 圆角的裁剪 */border-radius: 15px;/* 提升层级 */z-index:2;/* 面向用户那一面不可见 */backface-visibility: hidden;/* 过渡 */transition:1s;}.box1 img {width: 200px;height: 300px;border-radius: 15px;}.text {width: 30px;height: 30px;font-size: 27px;color: white;text-align: center;line-height: 30px;font-family: "楷体";position: absolute;top: 34px;left: 34px;}.hou {width: 200px;height: 300px;position: absolute;left: 0px;top: 0px;font-size: 30px;text-align: center;line-height: 300px;color:coral;background-color: black;border-radius: 15px;backface-visibility: hidden;transform:rotatey(180deg); transition:1s;font-weight: bold;}.box1:hover .qian{transform:rotateY(-180deg); }.box1:hover .hou{transform:rotateY(0deg);   }.box1:nth-child(1) .hou{color:cornflowerblue;}.box1:nth-child(2) .hou{color:red;}.box1:nth-child(3) .hou{color:royalblue;}.box1:nth-child(4) .hou{color:white;}</style>
</head><body><div class="box"><div class="box1"><!-- 前 --><div class="qian"><img src="01.jpg" alt=""><div class="text">春</div></div><div class="hou">生机勃勃</div></div><div class="box1"><!-- 前 --><div class="qian"><img src="02.jpg" alt=""><div class="text">夏</div></div><div class="hou">夏日炎炎</div></div><div class="box1"><!-- 前 --><div class="qian"><img src="03.jpg" alt=""><div class="text">秋</div></div><div class="hou">秋高气爽</div></div><div class="box1"><!-- 前 --><div class="qian"><img src="04.jpg" alt=""><div class="text">冬</div></div><div class="hou">白雪皑皑</div></div></div>
</body></html>

七、背景线性渐变

 /*背景渐变：渐变方向，颜色1,颜色2,颜色3.. */background:linear-gradient(to right top,red 0,red 35%,green 45%, green 52%,blue 65%);/* 控制背景大小  宽度  高度  （单位:px或者百分比） */background-size:300px 300px;/* 不重复 */background-repeat:no-repeat;

八、将背景剪切至文本

 -webkit-background-clip: text;

案例展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color:black;}.box{width:960px;height:300px;margin-left:auto;margin-right:auto;margin-top:100px;font-size:100px;text-align:center;line-height:300px;color:rgba(255,255,255,0.5);font-weight:bold;/* 背景渐变 */background:linear-gradient(to right top, transparent 0%,transparent 35%,white 40%,white 52%,transparent 60%);/* 控制背景大小    宽度    高度 */background-size:300px 300px;background-repeat:no-repeat;animation:move 2s infinite;-webkit-background-clip: text;}@keyframes move {0%{background-position:-110px 0px;}100%{background-position:785px 0px;}}</style>
</head>
<body><div class="box">沉迷学习 日渐消瘦</div>
</body>
</html>

单选按钮、字体的设置、沿着y轴旋转、面向用户的这一面不可见、三维效果、背景线性渐变、将背景剪切至文本相关推荐

android3D动画,绕y轴旋转
原文地址:http://blog.csdn.net/x_i_a_o_h_a_i/article/details/40449847 其实网上的3D旋转的例子很多,在这里我只是想把其代码做一个解释. 先上 ...
曲线绕x轴旋转曲面方程_绕x轴旋转（微积分旋转体绕y轴旋转体积~我看不懂图片上的公式~...）...
关于空间曲线(参数方程)绕x轴旋转得到的曲面方程绕哪个轴旋转,那个坐标不变,另一个的平方变,坐标的平方和绕轴旋转. 由一些在指定的集的数,称为参数或自变量,以决定因变量的结果.例如在运动学,参数通常 ...
曲线绕x轴旋转曲面方程_曲线C绕y轴旋转所成的旋转曲面的方程为.PPT
曲线C绕y轴旋转所成的旋转曲面的方程为曲面之柱面.旋转面.椭球面欧阳顺湘北京师范大学 Recall 曲面方程(Equations for a Surface): 更多曲面柱面旋转面椭球面 ...
Apache POI 生成折线图+柱状图设置双Y轴并导出word文档
实际项目中遇到的问题,相关信息实在较少,怕自己忘记,菜鸟记录一下我设置的是双Y轴的组和图表.左侧为折线图Y轴,右侧为柱状图Y轴. 直接上代码. // An highlighted block pub ...
echarts中设置双Y轴左右刻度线一致
echarts中设置双Y轴左右刻度线一致一.效果图二.主要代码一.效果图二.主要代码 this.taskxAxis = []this.taskSeries = [[], []]taskInit ...
动态设置echarts Y轴最大刻度与最小刻度
动态设置echarts Y轴最大刻度与最小刻度 yAxis: { max: function (value) { return (value.max + 0.01 * (value.min)).toF ...
Winform中自定义添加ZedGraph右键实现设置所有Y轴刻度的上下限
场景 Winforn中实现ZedGraph自定义添加右键菜单项(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
Echarts 设置柱状图 y 轴最小刻度为1
Echarts x轴文字显示不全.间隔显示问题 Echarts 饼图不显示 / 隐藏数据为 0 的展示项在 Vue 中使用 Echarts 很常见,但实现起来有很多可以优化的小细节,这篇博客主要介绍 ...
曲线绕y轴旋转一周所得旋转体体积_由曲线y=x，x=1，x=2，x轴围成的图形绕x轴旋转一周所得旋转体的体积是______．-数学-魔方格...
棱柱: (1)概念:如果一个多面体有两个面互相平行,而其余每相邻两个面的交线互相平行.这样的多面体叫做棱柱.棱柱中两个互相平行的面叫棱柱的底面,其余各个面都叫棱柱的侧面,两个侧棱的公共边叫做棱柱的侧棱 ...
android设置背景颜色渐变,Android背景渐变色(shape,gradient)
Android设置背景色可以通过在res/drawable里定义一个xml,如下: android:startColor="#FFF" android:endColor=" ...

单选按钮、字体的设置、沿着y轴旋转、面向用户的这一面不可见、三维效果、背景线性渐变、将背景剪切至文本

一、单选按钮：

案例展示（小星星评分等级表）：

二、字体系列：

三、沿着Y轴旋转

四、面向用户的那一面不可见

五、三维效果

案例展示（翻转效果图）：

七、背景线性渐变

八、将背景剪切至文本

单选按钮、字体的设置、沿着y轴旋转、面向用户的这一面不可见、三维效果、背景线性渐变、将背景剪切至文本相关推荐

最新文章

热门文章