移动 web :平面转换,渐变

平面转换

平移效果

平移实现居中效果

双开门案例 :

  • 设置父级背景图片,子级两张图片在父级上,分别占据 50%的宽度
  • 设置鼠标悬停效果,鼠标悬停,那么两张子级图片分别左右平移,而且设置过渡效果
  • 再在父级中设置溢出隐藏

旋转:

  • transform : rotate(旋转角度)
  • 角度单位 deg
  • 取值正,顺时针旋转;取值负,逆时针旋转

旋转 - 改变转换原点

  • 默认情况,转换原点是盒子中心

  • 属性 :transform-origin : 水平原点位置,垂直原点位置

  • 取值

    方位名词(left ,top,right ,bottom ,center)

    像素单位数值

    百分比

多重转换:

transform : translate() rotate() ;

缩放

  • transform : scale (缩放倍数)
  • transform : scale ( X 轴缩放倍数 ,Y 轴缩放倍数)
  • 技巧
    只为 scale()设置一个值,表示 X轴 和 Y轴 等比例缩放
    取值大于 1 表示放大,取值小于 1 表示缩小

倾斜

transform : skew () ; 角度度数 deg

渐变

线性渐变:

  • background-image : linear-gradient(
    渐变方向,(不写方向则默认从上到下)
    颜色1 终点位置,(不写位置则默认从背景图一半开始分隔两个颜色)
    颜色2 终点位置,
    ) ;

  • 取值
    渐变方向 : 可选
    to 方位名词
    角度度数

    终点位置 : 可选
    百分比

设置图片,文字内容定位到图片上

设置一个空盒子是父级的百分百,用于设置颜色渐变,默认从上到下从透明向黑色半透明渐变。只有鼠标悬停时才会显示颜色渐变,所以给该盒子默认设置 opacity为0,也就是透明,当鼠标悬停时,opacity 变为1 ,也就是不透明。而且还要给盒子添加过渡效果

径向渐变:(给按钮添加高光效果)

  • background - image : radial - gradient(
    半径 at 圆心位置,
    颜色1 终点位置,(从中间开始,颜色 1 指向颜色 2 )
    颜色2 终点位置,
    );
  • 取值
    半径是两条,则为椭圆
    圆心位置取值:像素单位数值 / 百分比 /方位名词

喜马拉案例:(ctrl + g 输入要到达的行数,直接跳转到要到达的行数)

旋转,平移

频道右侧字体图标,默认是尖尖朝下,当鼠标悬停时,则尖尖 朝上

而且鼠标悬停时,频道列表也要下移出现(默认是上移列表本身高度,鼠标悬停就下移回到0)

按钮添加渐变色(搜索,登录,下载iphone,Android)

搜索和登录是线性渐变,下载是径向渐变

轮播图:

  • 轮播图区域总共三张图片,分别设置了 z-index堆叠顺序,左右两张图片设置 z-index为0,中间图片设置 z-index为 1 ,相比较之下, 1大,数值越大,元素就会显示在层级更高的位置,覆盖在其他元素之上

  • 而且 z-index只有元素位置属性被设置为 relative,absolute,fixed,sticky时才生效。

  • 将类为左右的两张图分别左右移动并缩小,因为是以 整个 div 盒子为中心进行缩小的,所以移动之后在缩小,实际上是没有移动实际的距离,所以改变 原心,将原心分别设置为左边中心 和 右边中心,那么就能移动相应的距离了

猜你喜欢区域:(鼠标悬停,颜色变深,播放按钮出现,图片内容变大)

  • 设置一个盒子,这里这个盒子用的是伪元素(必须加上content)
  • 设置宽高是父级百分百,并且定位到父级上。
  • 设置黑色半透明遮罩和背景图在该伪元素上,并且将背景图缩小
  • 默认是看不见该黑色半透明背景图的,只有鼠标悬停时才能显示,那么就一开始设置opacity为0,悬停设置为1,background-size:50px,背景图片变大
  • 图片内容放大 transform : scale(1.1)
相关推荐
结城1 小时前
深入掌握CSS Grid布局:每个属性详解与实战示例
前端·css
寒..1 小时前
网络安全第三次作业
前端·css·html
小白阿龙1 小时前
如何实现缓存音频功能(App端详解)
前端·css·html5
王小王-1232 小时前
基于Transform、ARIMA、LSTM、Prophet的药品销量预测分析
lstm·arima·transform·prophet·药品销量预测·时序建模预测
smile boy2 小时前
个人财务记录应用
前端·javascript·css·css3·html5
FogLetter1 天前
从零复刻网易云音乐年度总结H5:技术细节与用户体验的完美结合
前端·css
前端老鹰1 天前
CSS mask-image:给元素 “戴” 上创意面具的隐藏技巧
前端·css
PineappleCoder1 天前
玩转CSS3新特性:让你的网页会“呼吸”!
前端·css·设计
未来之窗软件服务1 天前
免费版酒店管理系统之极简表单设计登录设计——仙盟创梦IDE
前端·css·仙盟创梦ide·东方仙盟·登录设计
Java&Develop2 天前
学生信息管理系统 - HTML实现增删改查
css·html·css3