实现html页面及css3动画

最新推荐文章于 2024-06-13 21:22:53 发布
最新推荐文章于 2024-06-13 21:22:53 发布
阅读量936 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40087961/article/details/78441754
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0 auto;
        }
        body{
            background-image: url("img/bg.jpg");
            -webkit-background-size: cover;
            background-size: cover;
        }
        .d1{
            width:1500px;
            height: 250px;
            text-align: center;
        }
        .d2{
            width:1500px;
            height: 100px;
            text-align: center;

        }
        .d3{
            width:1500px;
            text-align: center;
        }
        span{
            position: relative;
        }
        input{
            height: 40px;
            border: 1px solid dodgerblue;

        }
        input:hover{
            transform:scale(1.5);
        }
        .btn{
            width: 150px;
            height: 45px;
            font-size: 16px;
            border: none;
            background:dodgerblue;
            color: #fff;
        }
        .btn:hover{
            transform: scale(2);
            color:red;
        }
        .i{
            position: absolute;
            right: 8px;
            width:30px;
            height: 30px;
            margin-top:10px;
        }
        .i:hover{
            /*background: url("img/camera_on.png");*/
            transform: scale(1.2);
            
        }
        ul{
            width: 900px;
        }
        ul li{
            list-style: none;
            float: left;
            margin:10px;
        }
        .ul1:hover{
            transform:rotate(360deg);
            transition:3s;

        }
         .ul2:hover{
            transform:rotate(-360deg);
            transition:3s;

        }
        .img1:hover{
            -webkit-transform:rotate(360deg) ;
            -moz-transform:rotate(360deg) ;
            -ms-transform:rotate(360deg) ;
            -o-transform:rotate(360deg) ;
            transform: rotate(360deg);
            transition: transform 1s;
        }
        .img2:hover{
            -webkit-transform:rotate(-360deg) ;
            -moz-transform:rotate(-360deg) ;
            -ms-transform:rotate(-360deg) ;
            -o-transform:rotate(-360deg) ;
            transform: rotate(-360deg);
            transition: transform 1s;
        }
        .img3:hover{
            -webkit-transform: scale(1.5);
            -moz-transform: scale(1.5);
            -ms-transform: scale(1.5);
            -o-transform: scale(1.5);
            transform: scale(1.5);
            -webkit-transition: transform 1s;
            -moz-transition: transform 1s;
            -ms-transition: transform 1s;
            -o-transition: transform 1s;
            transition: transform 1s;
        }
        .img4:hover{
            -webkit-transform: skew(50deg);
            -moz-transform: skew(50deg);
            -ms-transform: skew(50deg);
            -o-transform: skew(50deg);
            transform: skew(50deg);
        }
    </style>
</head>
<body>
<div>
<div class="d1"><img src="img/logo.png" /></div>
    <div class="d2"><span><input type="text" size="70"/><img class="i" src="img/camera_off.png"/></span>
        <button class="btn"> 百度一下</button></div>
    <div class="d3">
        <ul class="ul1">
        <li><img src="img/top1.jpg" width="150px" height="150px" class="img1"/></li>
        <li><img src="img/top2.png" width="150px" height="150px"/></li>
        <li><img src="img/top3.png" width="150px" height="150px"/></li>
        <li><img src="img/top4.jpg" width="150px" height="150px"/></li>
        <li><img src="img/top5.jpg" width="150px" height="150px"/></li>
    </ul>
        <ul class="ul2">
            <li><img src="img/bottom1.jpg" width="150px" height="150px" class="img2"/></li>
            <li><img src="img/bottom2.jpg" width="150px" height="150px"/></li>
            <li><img src="img/bottom3.jpg" width="150px" height="150px" class="img3"/></li>
            <li><img src="img/bottom4.png" width="150px" height="150px"  class="img4"/></li>
            <li><img src="img/bottom5.png" width="150px" height="150px"/></li>
        </ul>
    </div>
</div>
</body>
</html>

程序员的美腻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML-动画实现Animation
wen110898的博客
08-18 3371
前言 在没有接触js之前，大家使用HTML和CSS做出来的页面都是静态页面，久而久之，静态页面显得非常的无趣，已经无法满足大家的需求了，就会开始有很多新鲜的idea，比如我想让hover鼠标悬停事件变得更有趣，我想让图片动起来，我想做一个会动的页面，那么不使用js可不可以做呢？答案是必须的~ 那么今天为大家带来的是动画animationn，可以满足大家一些简单的动态要求。 简单介绍 Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需
利用css3制作网页动画
shi15062772894的博客
12-15 265
CSS3变形 CSS3变形是一些效果的集合 如平移、旋转、缩放、倾斜效果 每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化 变形函数 translate()：平移函数，基于X、Y坐标重新定位元素的位置 scale()：缩放函数，可以使任意元素对象尺寸发生变化 rotate()：旋转函数，取值是一个度数值 skew()：倾斜函数，取值是一个度数值 2D位移 一个方向上的偏移 translateX（tx） 表示只设置X轴的位移 tra.
HTML中对于 animation（动画）属性的使用方法
m0_64401301的博客
12-16 5209
这篇文章主要分享了以举例的形式来分享CSS3中的animation属性的用法
【JavaScript脚本宇宙】点亮网页交互：六款前端动画库大揭秘
最新发布
记录我的学习历程
06-13 1206
本文将介绍六种流行的动画库，分别是AOS (Animate On Scroll)、ScrollReveal、WOW.js、Animate.css、GreenSock Animation Platform (GSAP)和Vivus.js。每种库都包括概述、主要特性、使用示例和使用场景等内容，旨在为读者提供全面的了解和选择参考。
HTML-CSS（四十一）animation动画
weixin_44730244的博客
05-01 2755
animation属性 animation-name:设置动画的名字（自定义的） animation-duration:动画的持续时间 animation-delay:动画的延迟时间 animatio-iteration-count：动画的重复次数，默认值是1，infinite无限次数 animation-timing-function:动画的运动形式 @keyframes name{ //定义关键帧 form{} to{} } @keyframes name{ 0%{} x%{} 100%{} } a
HTML之CSS Animation 属性常用动画
Computer_Tech的博客
01-14 955
【代码】HTML之CSS Animation 属性常用动画。
HTML中的动画效果
热门推荐
SuwanH的博客
08-17 3万+
一、HTML中的动画 在HTML中也可根据个人要求添加动画，有过渡动画transition和生动的动画效果animation以及线上的动画库 二、过渡动画transition transition是一种提供了在更改CSS属性时控制动画速度的方法，其可以让属性变化成为一个持续一段时间的过程 为页面创建一个div，为其设置背景颜色等属性 页面预览： 当鼠标悬停时，改变大小，之后在加上过渡动画效果 页面预览：当鼠标放在div上时，div向右移动，宽度改变，颜色改变 属性： tr.
使用css+html实现爱心动画
Glinty的博客
05-10 1527
<!DOCTYPE html> <head> <meta charset="utf-8"> <style> body{ height: 100vh; background: #000; display: flex; justify-content: center; align-items: center;
CSS3动画效果自动登录页面html模板
12-04
在这个登录页面模板中，CSS不仅用于基本的样式设置，还承载了实现CSS3动画的关键代码。可能包括对元素动画的定义，如使用`transition`属性实现平滑变化，或`animation`属性应用预定义的`@keyframes`动画。同时，CSS...
CSS3实现的酷炫流光页面动画特效源码
11-24
本主题我们将深入探讨如何利用CSS3实现酷炫的流光页面动画特效。 首先，CSS3中的关键帧动画（@keyframes）是实现流光动画的基础。通过定义动画的不同阶段，我们可以控制元素在动画过程中的变化，从而创造出流动的...
html+css翻页动画效果
01-27
然后，利用CSS3的transform属性来实现翻页效果。翻页动画通常涉及到旋转和平移，我们可以使用`transform: rotateY()`和`transform-origin`来实现3D翻转效果。例如： ```css .page { perspective: 1000px; /* 创建...
css3实现加载loading特效小动画效果
06-12
本文将深入探讨如何利用CSS3来实现吸引人的加载特效小动画效果。 首先，CSS3中的关键帧动画（@keyframes）是实现这种效果的核心。通过定义动画的起始状态和结束状态，以及可能的中间状态，可以创建平滑过渡的效果。...
使用 html 加 css3 动画完成模仿 QQ 静态页面
03-21
4. **CSS3动画**：为了模仿QQ页面的动态效果，我们将利用CSS3的`@keyframes`规则创建自定义动画。通过指定动画的起始和结束状态，以及过渡时间，可以实现各种平滑的运动效果。 5. **伪元素和伪类**：使用`::before`...
html设置前端加载动画
有朋自远方来，不亦乐乎。
10-13 1604
注意：图片一开始是 不显示的。当点击按钮后才显示。
html+div+动画效果,CSS3效果：animate实现点点点loading动画效果（一）
weixin_28761983的博客
06-03 670
实现如图所示的点点点loading效果：一：CSS3 animation实现代码提交订单中...css代码：.ani_dot{font-family:simsun;}:root .ani_dot{ /*这里使用Hack是因为IE6~IE8浏览器下， vertical-align解析不规范，值为bottom或其他会改变按钮的实际高度*/display:inline-block;width:1.5em...
html animation 属性,CSS3之animation属性
weixin_34883093的博客
06-04 1078
CSS中的animation属性可用于为许多其他CSS属性设置动画，例如颜色，背景色，高度或宽度。 每个动画都需要使用@keyframes这种at-rule语句定义，然后使用animation属性来调用它，如下所示：.element {animation: pulse 5s infinite;}@keyframes pulse {0% {background-color: #001F3F;}100...
HTML 变形(transform)、转换(transition)和动画(animation)
咖啡味的小认真
08-18 1万+
一、变形 Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 transform: rotate | scale | skew | translate |matrix; 我们同时对一个元素进行transform的多种属性操作，例如rotate、scale...
html&css系列学习——（六）过渡及动画
qianqianyunyan的博客
09-01 1036
html&css系列学习——（六）过渡及动画
html animation 属性,css3学习--css3动画详解一(animation属性）
weixin_33268464的博客
06-04 3167
***介绍的属性并不完全，写的都是我认为容易混淆的难点属性，所以属性会在最后综合案例展示~Keyframes介绍：Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。@keyframes changecolor{0%{background: red;}100%...
HTML5和CSS3页面制作的优势与应用
HTML5和CSS3可以提高网页的性能，例如使用Canvas可以实现loading效果，解决部分Android版本不支持gif动画的问题。 **新特性** CSS3引入了许多新特性，如渐变、圆角、阴影、半透明等，这些特性可以让开发者创建出...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值