html画熊代码,HTML+CSS画一朵向日葵(示例代码)

1

2

3

4

5

6

7

8

9

10 .petal{

11 position:absolute;

12 width:50px;

13 height:130px;

14 transform-origin:50% 150%;

15 opacity:.9;

16 }

17 .petal > div:nth-child(1){

18 position:absolute;

19 left:0;

20 top:0;

21 width:50%;

22 height:100%;

23 overflow:hidden;

24 }

25 .petal > div:nth-child(1) > div{

26 position:absolute;

27 left:0;

28 top:-20px;

29 width:160px;

30 height:250px;

31 background-image:linear-gradient(95deg,#fef10c 0%,#ffc701 8%,#fef10c 15%,#ffc701 20%);

32 box-shadow:0 0 10px rgba(0,0,0,.3);

33 border-radius:50%;

34 }

35 .petal > div:nth-child(2){

36 position:absolute;

37 left:50%;

38 top:0;

39 width:50%;

40 height:100%;

41 overflow:hidden;

42 }

43 .petal > div:nth-child(2) > div{

44 position:absolute;

45 right:0;

46 top:-20px;

47 width:160px;

48 height:250px;

49 background-image:linear-gradient(-95deg,#fef10c 0%,#ffc701 8%,#fef10c 15%,#ffc701 20%);

50 box-shadow:0 0 10px rgba(0,0,0,.3);

51 border-radius:50%;

52 }

53 #box{

54 width:370px;

55 height:370px;

56 margin:0 auto;

57 position:relative;

58 }

59 .pistilShadow{

60 position:absolute;

61 left:180px;

62 top:195px;

63 width:120px;

64 height:120px;

65 border-radius:50%;

66 transform:translate(-50%,-50%);

67 box-shadow:-5px 5px 80px #bd3d0e;

68 }

69 .pistil{

70 position:absolute;

71 left:180px;

72 top:195px;

73 width:160px;

74 height:160px;

75 border-radius:50%;

76 transform:translate(-50%,-50%);

77 box-shadow:0 0 80px #bd3d0e inset;

78 background:#325302;

79 overflow:hidden;

80 }

81 .pistilLine{

82 position:absolute;

83 left:20%;

84 top:-50%;

85 transform-origin:center bottom;

86 width:60%;

87 height:100%;

88 border-radius:50%;

89 border:solid 1px #2f1307;

90 }

91 .pistil2{

92 position:absolute;

93 left:180px;

94 top:195px;

95 width:60px;

96 height:60px;

97 border-radius:50%;

98 transform:translate(-50%,-50%);

99 box-shadow:0 0 25px #bd3d0e inset;

100 background:#325302;

101 }

102 .dot{

103 position:absolute;

104 left:28px;

105 top:0;

106 width:4px;

107 height:4px;

108 border-radius:50%;

109 background:#fded00;

110 box-shadow:0 0 15px #fded00 inset;

111 transform-origin:center 30px;

112 }

113

114

115

116