tnblog
首页
视频
资源
登录
原

css3样式学习代码

4668人阅读 2019/4/12 1:17 总访问：3467519 评论：1 收藏：0 手机
分类: 前端

上代码！上代码！不说了

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">

  7. <title>Document</title>

  8. <link rel="stylesheet" href="mystyle.css">

  9. </head>

  10. <body>

  11. <div class="content">

  12. <div></div>

  13. <div></div>

  14. <div></div>

  15. <div><p>Hello！I hope you like it!</p><p>Thank you very much!</p></div>

  16. </div>

  17. </body>

  18. </html>

css:

  1. body{

  2. margin: 0;

  3. padding: 0;

  4. /* 基本上扑满 */

  5. height: 100vh;

  6. width: 100%;

  7. /* 

  8.         盒子模型

  9.         上下左右居中

  10.     */

  11. display: flex;

  12. align-items: center;

  13. justify-content: center;

  14. }

  15. .content{

  16. /*

  17.     相对定位 

  18.      */

  19. position: relative;

  20. height: 640px;

  21. width: 360px;

  22. margin-top: 150px;

  23. /* 通过颜色透明 */

  24. background-color: rgba(0,0,0,.2);

  25. transition: 0.5s;

  26. /* 2D旋转 3D旋转 大小为自身的0.8  .8 == 0.8 */

  27. transform: rotate(-30deg) skew(25deg) scale(.8);

  28. }

  29. .content div{

  30. background-color: black;

  31. /*

  32.     相对于父级的相对定位 进行绝对定位 

  33.      */

  34. position: absolute;

  35. width: 100%;

  36. height: 100%;

  37. color: white;

  38. /* 左右居中 */

  39. /* text-align: center; */

  40. /* 上下居中 */

  41. /* line-height: 640px; */

  42. /* 过滤动画 */

  43. transition: 1s;

  44. }

  45. p{

  46. display: inline-block;

  47. width: 100%;

  48. font-size: 16px;

  49. transform: translate(50px,50px);

  50. }

  51. .content:hover div:nth-child(4){

  52. /* 基于上一次相对定位作出改变 */

  53. transform: translate(160px,-160px);

  54. /* 加粗 */

  55. font-weight: bold;

  56. /* 透明度 */

  57. opacity: 1;

  58. /* 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;  */

  59. box-shadow: -10px 10px 20px 5px red;

  60. }

  61. .content:hover div:nth-child(3){

  62. transform: translate(120px,-120px);

  63. opacity: 0.8;

  64. }

  65. .content:hover div:nth-child(2){

  66. transform: translate(80px,-80px);

  67. opacity: 0.6;

  68. }

  69. .content:hover div:nth-child(1){

  70. transform: translate(40px,-40px);

  71. opacity: 0.4;

  72. }

用其工，迂回其力！


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

评价

剑轩

2019/4/12 14:45:07

放张图效果很棒!

回复

HTML+css3+js 实现生日快乐代码，动态生成效果
&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;UTF-8&quot;&gt; &lt;title&gt;生日快乐&lt;/...

css3过渡渐变
code:&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程...

css3 background-size

语法：div { background:url(img_flwr.gif); background-size:80px60px; background-repeat:no-repeat; }可以设置成10...

css3实现边框旋转但内容不动
其实思路就是把文字旋转的角度反向旋转抵消掉div旋转的角度即可 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...

css3印章效果
配合bootstrap4来写的，效果图直接贴代码吧:直接复制运行即可看到效果：&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&g...

css3 中的 nth-child

:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以...

css3伪类选择器 nth-child ， 循环变色，循环颜色。css最后一个元素
选中第一个元素：.container&gt;div:first-child{ background:#abcdff; }选中最后一个可以使用last-child.container&gt;d...

css3 伪类选择器 before和after。实现简单的标题。清楚浮动。红黄蓝效果。实现下方横线((下划线 ，下横线))，Tab菜单效果
[TOC]伪类选择器before和after，实现一个简单的标题效果 代码如下 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;...

css3 实现ps文字外发光效果实现一串文字背后灯光高亮效果。实现文字发光。css实现实现文字背景高亮
CSS3 并没有直接设置发光效果的属性，但是利用text-shadow属性实现此效果text-shadow: h-shadow v-shadow blur color; 参...

使用css3实现一个不规则div的布局
要实现不规则的div布局，可以使用CSS3的clip-path属性。该属性可以剪切元素的形状，从而实现不规则的布局。以下是一个示例...

css3 渐变 两边浅中间深。由中间向两边。 div边框渐变色
设计图是这样的 可以使用线性渐变语法：background: linear-gradient(direction, color-stop1, color-stop2, …)例如从...
这一世以无限游戏为使命！
博主信息
排名
2
文章
634
粉丝
44
评论
93
文章类别
最新文章
最新评价
docker中Sware集群与service
尘叶心繁 : 想学呀！我教你呀
一个bug让程序员走上法庭 索赔金额达400亿日元
叼着奶瓶逛酒吧 : 所以说做程序员也要懂点法律知识
.net core 塑形资源
剑轩 : 收藏收藏
映射AutoMapper
剑轩 : 好是好，这个对效率影响大不大哇,效率高不高
ASP.NET Core 服务注册生命周期
剑轩 : http://www.tnblog.net/aojiancc2/article/details/167
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术