过渡与变形综合应用

最新推荐文章于 2024-08-31 21:49:18 发布
最新推荐文章于 2024-08-31 21:49:18 发布
阅读量139 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45581246/article/details/105125317
版权

代码如下：

<html>
  <head>
   <title></title>
     <style type="text/css">
        .box {
              width: 2000px;
              height: 500px;
              background-color: green;
              }
        .a{
              float: left;
              width: 400px;
              height: 400px;
              left:20px;
              top:20px;
              position: relative;
               }
        .b{
             float: left;
             width: 400px;
             height: 400px;
             left:100px;
             top: 20px;
             position: relative;
             overflow: hidden;
             border: 22px solid yellow;
             border-radius:22px;
            }
        .c{
              float: left;
              width: 422px;
              height: 422px;
              left:120px;
              top:20px;
              position: relative;
          }
        .d{
               float: left;
               width: 422px;
               height: 422px;
               left:190px;
               top:20px;
               position: relative;
           }
 img[id^=p]{
             border: 22px solid yellow;
             transition: all 3s;
             border-radius: 22px;
             }
      #p1:hover{
              border-radius: 66%;
              }
      #p2{
             transition: all 3s;
                 }
      #p2:hover{
             transform: scale(3);
               }
      #p3:hover{
              transform: rotate(10deg);
            }
      #p4:hover{
             filter: grayscale(200%);
           }
   </style>
 </head>
<body>
    <div class="box">
          <div class="a">
                            <img id="p1" src="1.jpg" alt="">
         </div>
         <div class="b">
                            <img id="p2" src="2.jpg" alt="">
          </div>
          <div class="c">
                            <img id="p3" src="3.jpg" alt="">
          </div>
          <div class="d">
                            <img id="p4" src="4.jpg" alt="">
          </div>
    </div>
</body>
</html>
了不起的盖茨茨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实验报告—过渡与变形的综合应用
Dreammin的博客
03-23 758
实验目的： 理解transition属性、2D变形的使用；熟练运用transition、transform属性实现过渡及变形效果。 实验结果： 1、分析布局 首先最外层box来装内容。 其中每个pic盒子表示一个小组合，pic中包括文字word和边框b以及边框内的img。 代码如下： <body> <div class="Box"> <div class...
图片过度与变形的综合运用
zzfr_llex的博客
03-26 201
2、图片的主网页 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的图片</title> <link rel="stylesheet" type="text/css" href="css/第七周作业样式表.css"> </...
CSS3中变形与过渡的使用
qq_40755047的博客
05-06 189
transform中常见的应用 平移：translate(x轴的平移距离，y轴的平移距离) 示例: transform:translate(20px,20px); 旋转： 缩放： 倾斜的效果：
css3过渡使用_CSS3的实际使用：转换和过渡
Web design 教程小屋
07-08 568
转换和转换（作为CSS3规范的一部分引入）使我们能够创建以前仅与JavaScript或Flash相关联的交互和体验。 您可能已经阅读了很多有关这些属性的讨论和教程，但是它们本质上是实验性质的。 在本教程中，我们将通过创建更有用的内容来探索CSS转换和过渡。 我们将构建一个静态HTML页面，该页面将利用滑块中的变换和过渡以及一些有趣的悬停效果。 在继续之前，需要注意浏览器的兼容性。 ...
CSS3过渡和变形综合应用——不同图片效果
Shmily_ox的博客
03-26 847
CSS3过渡和变形的综合应用 在前面的文章我们了解了CSS3的过渡属性和变形属性，今天利用这两个属性的来实现不同的图片效 果，一起来看看吧！ 要求： （1）当鼠标移上第一-张图像时，产生直角边框过渡为圆角边框的效果。 （2） 当鼠标移上第二张图像时，产生图片逐渐放大的过渡效果。 （3） 当鼠标移上第三张图像时，产生图片旋转的过渡效果。 （4）当鼠标移上第四张图像时，产生图片透明度逐渐变暗的过渡效果...
初学HTML——过渡与变形综合应用
lxl513513的博客
03-26 1090
一.基本要求 1.当鼠标移上第一张图像时，产生直角边框过渡为圆角边框 2.当鼠标移上第二张图像时，产生图片逐渐放大的过渡效果 3.当鼠标移上第三张图像时，产生图片旋转的过渡效果 4.当鼠标移上第四张图像时，产生图片透明度逐渐变暗 5.当鼠标移上四张图像的任一图像时，都伴随着盒子阴影效果 二.代码部分 <!DOCTYPE html> <html> <head> ...
css过渡。变形与动画
qq_44698180的博客
06-23 234
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。语法规则：选择器{ transition:property duration timing-function delay}transition属性显示简单的动画效果 transition属性是一个复合属性，主要包含property、duration、timing-function、delay等子属性 transition属性的常用子属性主要包括：property：规定应用过渡的CSS属性的名称 duration：定义过渡效果花费的时间 timing-fu
【CSS】过渡、变形、动画
南栀的博客
05-07 1111
过渡、变形、动画
CSS过渡、变形与动画
m0_72181130的博客
06-23 143
CSS过渡、变形与动画
HTML 之 过渡
weixin_30530339的博客
08-14 167
打开哔哩哔哩，鼠标移动到一个视频上面，封面发生变化，鼠标移走，变化消失，这是一个动态的过程，这就是过渡。 我们依靠hover标签来实现 hover:犹豫，徘徊 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用过...
CSS3 过渡
weixin_33796205的博客
01-23 88
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML中渲染空格和换行符样式的实现方式
程序人生
08-27 584
在HTML中，连续的空格和换行符会被合并为一个空格，所以无法直接通过添加换行符来实现缩进效果。如果您希望在HTML中显示缩进的效果，可以使用CSS样式中的。样式会保留文本中的所有空格和换行符，可能会导致额外的空白间距。如果您需要控制缩进的具体样式，可以使用CSS中的。样式，这样文本中的空格和换行符就会得到保留，从而实现了缩进的效果。上述代码中，我们将要显示的文本放置在。
前端知识HTML&CSS
最新发布
w13114的博客
08-31 647
前端知识
HTML5 为什么只需要写 ＜!DOCTYPE HTML＞
乐辞的博客
08-31 342
HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。而 HTML4.01 基于 SGML ,所以需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。这个 DTD 提供了规范的文档结构和规则，以确保浏览器正确解析和显示文档。
HTML基本标签
actavy的博客
08-28 811
HTML（HyperText Markup Language）是超文本标记语言。它由一系列的元素（即标签）组成，每个标签都表示页面上的不同内容或元素，如文本、图像、链接等。HTML被用来描述网页的结构，并且在网页浏览器中解释显示这些结构，使网页内容呈现出来。标题标签的默认样式是自动加粗的，字体一级标题最大，六级标题最小，每个标题标签独占一行，并且标题标签是块元素。
HTML静态网页成品作业(HTML+CSS)——个人介绍网页(1个页面)
2301_78945238的博客
08-28 296
HTML静态网页成品作业(HTML+CSS)——个人介绍网页(1个页面)
html table tbody deleteRow有残留?
C201008的专栏
08-29 309
table移除多行不彻底的问题。
巧用 HTML 列表：＜ul＞、＜ol＞、＜dl＞的实用指南
前端基地
08-30 746
本文深入阐释 HTML 列表，涵盖无序列表、容豁级标签、有序列表、定义列表及多级列表等。丰富讲解与实际案例紧密结合，助力新手快速上手，让经验丰富者也能收获实用知识与技巧。为网页创作之路注入新活力，快来开启精彩的学习之旅。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值