您的位置:首页 > 房产 > 家装 > 网址导航网址大全彩票网站大全_网络规划设计师教程读后感_网站建设网络推广平台_客户管理系统

网址导航网址大全彩票网站大全_网络规划设计师教程读后感_网站建设网络推广平台_客户管理系统

2024/12/23 10:04:48 来源:https://blog.csdn.net/2403_87427886/article/details/143987206  浏览:    关键词:网址导航网址大全彩票网站大全_网络规划设计师教程读后感_网站建设网络推广平台_客户管理系统
网址导航网址大全彩票网站大全_网络规划设计师教程读后感_网站建设网络推广平台_客户管理系统

1、3D旋转

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>3D旋转</title><style type="text/css">div{/*设置大盒子样式*/width: 100px;height: 100px;/*background-color: rgba(255,0,0,0.5);*/background-color: #FFFF00;}#box2:hover{background-color: wheat;/*transform: rotateX(180deg);/*围绕X轴顺时针旋转180度*/transform: rotateY(180deg);}</style></head><body><div id="box1">原始效果</div><div id="box2">3D旋转效果</div></body>
</html>

点击时

2、简单动画

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>简单动画</title><style type="text/css">div{position: absolute;width: 100px;height: 100px;background-color: red;animation: ball 3s ease 0s 3 alternate;/*设置ball动画持续3s,正方向交替播放3次*//*分开设置如下6行代码animation-name: ball;             设置动画名称animation-duration: 3s;            设置持续时间animation-timing-function: ease;  设置速度曲线animation-delay: 0s;               设置延续时间animation-iteration-count: 3;       设置播放次数animation-direction: alternate;    设置方向*/}@keyframes ball{from{left: 0px;}to{left: 300px;border-radius: 50px;}}</style></head><body><div></div></body>
</html>

会动态的 

3、背景颜色过渡

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>背景颜色过渡</title><style type="text/css">.box{width: 300px;height: 300px;background-color: #f00;margin: 50px auto;/*transition-property: background;/*设置应用过渡效果的属性*//*transition-duration: 0.5s;/*过渡效果持续的时间*//*transition-timing-function: ease-in-out;/*过渡的方式*//*transition-delay: 0s;/*过渡效果的持续时间*//*或者下面的这些*/transition: background 0.5s ease-in-out;}.box:hover{/*设置鼠标指针移动到块元素上时的状态*/background: #00f;/*改变背景颜色*/}</style></head><body><div class="box">过渡属性</div></body>
</html>

点击后

4、宠物墙

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>宠物墙</title><style type="text/css">body,ul,li,img{margin: 0;padding: 0;border: 0;}ul,li{list-style: none;}.photos{width: 1000px;height: 550px;margin: 50px auto;}.photos li{float: left;width: 250px;height: 250px;margin-left: 63px;margin-bottom: 110px;}.photos li a{display: inline-block;/*变为行内块元素*/width: 240px;height: 240px;text-align: center;text-decoration: none;color: #333333;font-size: 16px;font-family: "宋体";line-height: 24px;}.photos a:after{/*after选择器表示在被选元素的内容后面插入内容*/content: attr(title);/*把婴儿的名字显示在超链接后面*/}.photos li:nth-child(even) a{/*第偶数元素的样式*/transform: rotate(10deg);/*顺时针旋转10度*/}.photos img{/*图片的长宽设置*/width: 247px;height: 250px;transition: all 0.5s ease;/*过渡效果*/}.photos li:hover .img1{border-radius: 50%;/*设置第一张照片为圆形*/}.photos li:hover .img2{border: 5px solid #FFFF00;transform: rotate(-60deg);/*设置第二张照片逆时针旋转60度*/}.photos li:hover .img3{transform: rotate(360deg);/*设置第三张照片顺时针旋转360度*/}.photos li:hover .img4{box-shadow: 10px 10px 10px #333333;/*第四张照片添加阴影*/transform: rotate(-10deg);/*第四张照片逆时针旋转10度*/}.photos li:hover .img5{transform: rotateY(180deg);/*第五张图片产生3D变形沿y轴旋转180度*/}.photos li:hover .img6{transform: scale(1.2);/*第六张图片放大1.2倍*/}#one{padding: 10px 15px 50px 15px;box-shadow: 10px 10px 10px 10px #CCCCCC;}#two .img2{padding: 10px 15px 50px 15px;box-shadow: 10px 10px 10px 10px #CCCCCC;}#three{padding: 10px 15px 50px 15px;box-shadow: 10px 10px 10px 10px #CCCCCC;}#four .img4{padding: 10px 15px 50px 15px;box-shadow: 10px 10px 10px 10px #CCCCCC;}#five{padding: 10px 15px 50px 15px;box-shadow: 10px 10px 10px 10px #CCCCCC;}#six .img6{padding: 10px 15px 50px 15px;box-shadow: 10px 10px 10px 10px #CCCCCC;}.one{margin: -50px;text-align: center;}.two{margin: -50px;text-align: center;}.three{margin: -50px;text-align: center;}</style></head><body><ul class="photos"><li id="one"><a href="#"title="笑笑"><img src="img/cat13.jpg"alt="笑笑"class="img1" /></a></li><li id="two"><a href="#"title=""><img src="img/cat8.jpg"alt="佳佳"class="img2" /><p class="one">佳佳</p></a></li><li id="three"><a href="#"title="圆圆"><img src="img/cat9.jpg"alt="圆圆"class="img3" /></a></li><li id="four"><a href="#"title=""><img src="img/cat10.jpg"alt="倩倩"class="img4" /><p class="two">倩倩</p></a></li><li id="five"><a href="#"title="乐乐"><img src="img/cat11.jpg" alt="月月"class="img5"/></a></li><li id="six"><a href="#"title=""><img src="img/cat12.jpg"alt="乐乐"class="img6" /><p class="three">乐乐</p></a></li></ul></body>
</html>

 

 点击时,会出现

5、图片平移

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图片平移</title><style type="text/css">.big{width: 400px;height: 300px;margin: 0 auto;position: relative;background: url(img/pic3.jpg) no-repeat;}.small{width: 100px;height: 100px;border-radius: 50%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background: url(img/cloth.jpg) no-repeat center center;}</style></head><body><div class="big"><div class="small"></div></div></body>
</html>

 6、翻转导航条

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>翻转导航条</title><style type="text/css">*{margin: 0;padding: 0;}nav{width: 960px;height: 40px;background-color: #CCCCCC;margin: 20px auto;}nav ul{list-style: none;}nav ul li{float: left;width: 120px;height: 40px;}nav ul li div{width: 120px;height: 40px;position: relative;perspective: 6000px;transition: all 0.4s ease 0s;transform-style: preserve-3d;/*使被转化的子元素保留其3d转换*/}nav ul li:hover>div{transform: rotateX(-90deg);}nav ul li span{position: absolute;top: 0;left: 0;width: 120px;height: 40px;text-align: center;line-height: 40px;}nav ul li span .no2{background-color: #cd7c7d;transform: rotateX(90deg)translateZ(20px);}</style></head><body><nav><ul><li><div><span class="no1">UI设计培训</span><span class="no1">UI设计培训</span></div></li><li><div><span class="no1">PHP培训</span><span class="no2">PHP培训</span></div></li><li><div><span class="no1">网络营销培训</span><span class="no2">网络营销培训</span></div></li><li><div><span class="no1">前端开发培训</span><span class="no3">前端开发培训</span></div></li><li><div><span class="no1">C++培训</span><span class="no2">C++培训</span></div></li><li><div><span class="no1">IOS培训</span><span class="no2">IOS培训</span></div></li><li><div><span class="no1">Android培训</span><span class="no2">Android培训</span></div></li><li><div><span class="no1">云计算培训</span><span class="no2">云计算培训</span></div></li></ul></nav></body>
</html>

 点击时

7、3D变形

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>3D变形</title><!--盒子1的样式--><style type="text/css">div .no1{width: 152px;height: 227px;border: 1px solid #000000;position: relative;perspective: 230px;}div .no1 img{position: absolute;top: 0;left: 0;backface-visibility: hidden;/*定义元素在不面对屏幕是不可见*/transition: all 1s ease 0s; }div .no1 img.p01{transform: rotateY(-180deg);}div .no1:hover img.p01{transform: rotateY(0deg);}div .no1:hover img.p02{transform: rotateY(180deg);}/*盒子2样式*/div .no2{width: 152px;height: 227px;border: 1px solid #000000;position: relative;perspective: 230px;}div.no2 img{position: absolute;top: 0;left: 0;backface-visibility: hidden;transition: all 1s ease 0s;}div .no2 img.p01{transform: rotateX(-180deg);}div .no2:hover img .p01{transform: rotateX();}div .no2:hover img .p02{transform: rotateX(180deg);}</style></head><body><div class="no1"><!--盒子1--><img class="p01"src="img/puke01.jpg"alt="5"width="300"height="300" /><img class="p02"src="img/puke02.jpg"alt="7"width="300"height="300" /></div><div class="n02"><!--盒子1--><img class="p01"src="img/puke01.jpg"alt="5"width="300"height="300" /><img class="p02"src="img/puke02.jpg"alt="7"width="300"height="300" /></div></body>
</html>

 8、多种过渡效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>多种过渡效果</title><style type="text/css">.box{width: 300px;height: 300px;background-color: #FF0000;border: 3px #0f0 solid;margin: 50px auto;transition-property: all;transition-duration: 1s;transition-timing-function: ease-in;/*transition: all 1s ease-in;*//*设置过渡效果的是所有属性,过渡时间为1s,过渡效果是慢速开始,逐渐加快的*/}.box:hover{border: 3px solid #FF0000;background-color: #00FF00;border-radius: 150px;box-shadow: 5px 5px 10px #000;}</style></head><body><div class="box"></div></body>
</html>

结果为

 

点击后

 

9、图片的遮罩效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图片的遮罩效果</title><style type="text/css">.box{width: 500px;height: 484px;border: 1px solid #ccccc;background: url(img/vegetable.jpg) 0 0 no-repeat;margin: 20px auto;position: relative;/*相对定位*/overflow: hidden;/*隐藏溢出的内容*/}.box hgroup{/*定义遮罩的属性*/position: absolute;/*绝对定位*/left: 0;top: -250px;width: 500px;height: 484px;background-color: rgba(0,0,0,0.5);/*半透明*/}.box:hover hgroup{position: absolute;/*绝对定位*/left: 0;top: 0;transition: all 0.5s ease-in;/*过渡效果*/}.box hgroup h2:nth-child(1){/*设置第一个h2元素*/font-size: 22px;text-align: center;color: #fffff;font-weight: normal;margin-top: 58px;}.box hgroup h2:nth-child(2){/*设置第二个h2元素*/font-size: 14px;text-align: center;color: #fffff;font-weight: normal;margin-top: 15px;}.box hgroup h2:nth-child(3){/*设置第三个h2元素*/width: 26px;height: 26px;margin-left: 120px;margin-top: 15px;background: url(img/jiantou.png) 0 0 no-repeat;}.box hgroup h2:nth-child(4){/*设置第四个h2元素*/width: 26px;height: 26px;margin-left: 95px;margin-top: 25px;background: url(img/anniu.png) 0 0 no-repeat;}</style></head><body><div class="box"><hgroup><h2>一品水果 唇齿留香</h2><h2>泰国黑金刚莲雾</h2><h2></h2><h2></h2></hgroup></div></body>
</html>

 

点击后

 10、平移效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>平移效果</title><style type="text/css">div{width: 100px;height: 100px;background-color: lightcoral;}#box2{transform: translate(100px,30px);/*设置水平向右移动100px,垂直向下移动30px*/}</style></head><body><div id="box1">原始效果</div><div id="box2">平移效果</div></body>
</html>

 

11、设置透视效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>设置透视效果</title><style type="text/css">#div1{margin: 0 auto;width: 100px;height: 100px;border: 1px solid red;perspective: 100px;/*设置透视效果*/}.box1{width: 100px;height: 100px;background-color: rgba(255,0,0,0.5);transition: transform 4s ease;/*设置3D旋转花费4s时间过渡*/}.box1:hover{transform: rotate(180deg);/*设置围绕x轴顺时针旋转180度*/}#div2{margin: 50px auto;width: 100px;height: 100px;border: 1px solid red;}.box2{width: 100px;height: 100px;background-color: red;transition: transform 4s ease;/*不点击时的设置过渡效果**/}.box2:hover{transform: rotateX(180deg);/*设置围绕x轴顺时针旋转180度*/}</style></head><body><div id="div1"><div class="box1">设置透视效果</div></div><div id="div2"><div class="box2">未设置透视效果</div></div></body>
</html>

 

点击后

12、图像的过渡作用

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图像的过渡作用</title><style type="text/css">.photo{width: 300px;height: 300px;border: 3px solid #ff0000;margin: 50px auto;background:url(img/pic1.jpg)no-repeat center center;/*transition-property: all;transition-duration: 0.5s;transition-timing-function: ease-in-out;*/transition: all 0.5s ease-in-out;}.photo:hover{background: url(img/pic2.jpg) no-repeat center center;border: 3px solid #FF0000;border-radius: 50%;}</style></head><body><div class="photo"></div></body>
</html>

 

点击后

13、翻转图片

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>翻转图片</title><style type="text/css">.box{width: 300px;height: 300px;margin: 20px auto;position: relative;perspective: 230px;/*设置元素与查看位置距离*/}.box img{position: absolute;left: 0;top: 0;backface-visibility: hidden;/*隐藏被旋转的div元素的背面*/transition: all 1s ease-in 0s;  }.box img.fan{transform: rotateX(-180deg);/*第二张图片显示在背面不可见*/}.box:hover img.fan{transform: rotateX(0deg)/*第二张图片翻转到正面,可见*/}.box:hover img.zheng{transform: rotateX(180deg);/*第一张图片反转到背面,不可见*/}</style></head><body><div class="box"><img class="zheng" src="img/mangguo1.jpg"alt=""width="200"height="200" /><img class="fan" src="img/mangguo2.jpg" alt=""width="200"height="200" /></div></body>
</html>

 

翻转后

14、旋转效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>旋转效果</title><style type="text/css">div{width: 100px;height: 100px;background-color: lightcoral;}#box2{transform: rotate(45deg);/*旋转45度*/}</style></head><body><div id="box1">原始效果</div><div id="box2">旋转效果</div></body>
</html>

 

15、魔方

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>魔方</title><style type="text/css">*{margin: 0;padding: 0;}body{background: #000;}.magic{transform-style: preserve-3d;/*规定如何在3D空间中呈现被嵌套的元素*/animation: rotate 6s linear infinite;/*设置动画*/}@keyframes rotate{50%{transform-origin: center center;transform: rotateY(3600deg) rotateX(3600deg);}}.magic_a{margin: 300px;transform: translateZ(-150px);}.magic_b{transform: rotateY(90deg) translateX(150deg);transform-origin: right;position: absolute;top: 300px;left: 0;}.magic_c{transform: rotateY(270deg) translateX(-150px);transform-origin: left;position: absolute;top: 300px;left: 600px;}.magic_d{position: absolute;transform: translateZ(150px);top: 300px;left: 300px;}.magic_e{transform: rotateX(270deg) translateX(-150px) translateY(150px);transform-origin: bottom;position: absolute;top: 0;left: 450px;}.magic_f{ transform: rotateX(90deg) translateZ(-150px) translateY(-150px);transform-origin: top;position: absolute;top: 450px;left: 300px;}</style></head><body><div class="magic"><img class="magic_a"src="img/anniu.png"alt=""width="200"height="200" /><img class="magic_b"src="img/anniu.png"alt=""width="200"height="200" /><img class="magic_c"src="img/anniu.png"alt=""width="200"height="200" /><img class="magic_d"src="img/anniu.png"alt=""width="200"height="200" /><img class="magic_e"src="img/anniu.png"alt=""width="200"height="200" /><img class="magic_f"src="img/anniu.png"alt=""width="200"height="200" /></div></body>
</html>

动态版本 

 16、缩放效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>缩放效果</title><style type="text/css">div{width: 100px;height: 100px;background-color: rgba(255,0,0,0.5);}#box2{position: absolute;/*绝对定位*/left: 260px;top: 150px;background-color: red;transform: scale(2,1.2);/*宽度放大2倍,高度放大1.2倍*/}#box3{position: absolute;left: 260px;height: 150px;background-color: blue;transform: scale(0.5);/*高度和宽度均缩小为原来的一半*/}</style></head><body><div id="box1">原始效果</div><div id="box2">放大效果</div><div id="box3">缩小效果</div></body>
</html>

 

17、倾斜效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>倾斜效果</title><style type="text/css">div{width: 100px;height: 100px;background-color: lightcoral;}#box2{position: absolute;left: 50px;top: 150px;transform: skew(45deg,10deg);/*水平倾斜45度,垂直倾斜10度*/}</style></head><body><div id="box1">原始效果</div><div id="box2">倾斜效果</div></body>
</html>

 

18、淘宝衣服放大效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>淘宝衣服放大效果</title><style type="text/css">*{margin: 0;padding: 0;border: 0;}div{width: 200px;height: 200px;margin: 50px auto;overflow: hidden;}div img{transition: all 1s;/*设置过渡效果*/}div:hover img{transform: scale(1.3);/*图片放大1.3倍*/}</style></head><body><div><a href=""><img src="img/cloth.jpg"width="200"height="200" /></a></div></body>
</html>

 

点击后

19、改变中心点

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>改变中心点</title><style type="text/css">div{width: 100px;height: 100px;background-color: lightcoral;}.box2{background-color: red;transform: rotate(45deg);/*旋转45度*/}.box3{background-color: yellow;transform-origin: 100px 100px;/*移动中心点*/transform: rotate(45deg);/*旋转45度*/}</style></head><body><div class="box1">原始效果</div><div class="box2">旋转效果</div><div class="box3">改变中心点的旋转效果</div></body>
</html>

 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com